Archive for category jquery
jQuery Mobile – a full basic page
Posted by roqeem in jQuery Mobile on May 20, 2013
<!DOCTYPE html></pre> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Content goes here</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body> </html> <pre>
Creating Loading Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loading page example</title>
<!--Loading display while images load-->
<style>
.web_loading_class { position: absolute; z-index: 1; visibility: visible;
width:220px;
height:36px;
left:50%;
top:50%;
margin:-18px 0px 0px -110px;
}
.web_page_class { visibility: hidden }
</style>
<script>
function downLoad(){
if (document.all){
document.all["web_loading"].style.visibility="hidden";
document.all["web_page"].style.visibility="visible";
} else if (document.getElementById){
node = document.getElementById("web_loading").style.visibility='hidden';
node = document.getElementById("web_page").style.visibility='visible';
}
}
</script>
<!--END Loading display while images load-->
</head>
<body onLoad="downLoad()">
<!--Loading display while images load-->
<div id="web_loading" class="web_loading_class"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/loader.gif"></div>
<div id="web_page" class="web_page_class">
<!--Here big size page to load-->
</div>
</body>
</html>
jQuery Mobile Table
Posted by roqeem in jQuery Mobile on June 25, 2012
<style type="text/css">
table { width:100%; font-size:13px }
table caption { text-align:left; }
table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
table th, td { text-align:left; padding:6px;}
table th{font-size:15px }
</style>
<table summary="This table lists all the JetBlue flights.">
<thead>
<tr style="background:#999;">
<th scope="col" style="width:15%">Promo Name</th>
<th scope="col" style="width:11%">From</th>
<th scope="col" style="width:11%">To</th>
<th scope="col">Item</th>
<th scope="col">Stock</th>
<th scope="col">Price</th>
<th scope="col">Disc.</th>
<th scope="col" style="width:3%">Active</th>
</tr>
</thead>
<tbody>
<tr>
<th>Test</th>
<td>09-09-2011</td>
<td>09-10-2011</td>
<td>Apple iPad2 3G + Wifi 64GB Black</td>
<td>0</td>
<td>150.000</td>
<td>0</td>
<td><img style="margin-left:10px" src="images/accept.png"></td>
</tr>
<tr>
<th>Test</th>
<td>09-09-2011</td>
<td>09-10-2011</td>
<td>Apple iPad2 3G + Wifi 64GB Black</td>
<td>0</td>
<td>150.000</td>
<td>0</td>
<td><img style="margin-left:10px" src="images/accept.png"></td>
</tr>
<tr>
<th>Test</th>
<td>09-09-2011</td>
<td>09-10-2011</td>
<td>Apple iPad2 3G + Wifi 64GB Black</td>
<td>0</td>
<td>150.000</td>
<td>0</td>
<td><img style="margin-left:10px" src="images/accept.png"></td>
</tr>
</tbody>
</table>