Archive for category jquery

jQuery Mobile – a full basic page

<!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>

Leave a comment

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>

Leave a comment

jQuery Mobile Table

	
<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>

Leave a comment

Design a site like this with WordPress.com
Get started