snapshot
/
html5testapp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jQuery Mobile: Grid Layout</title>
	<link rel="stylesheet"  href="../../jquery.mobile-1.0.1.min.css" />
	<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
	<script src="../../jquery.js"></script>
	<script src="../../jquery.mobile-1.0.1.min.js"></script>
	
	<script>
	$(function(){
		$(".ui-grid-d a").bind("tap click", function(e){
			$(this).hide();
			$("#log")
				.prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"; message: grid '"+$(this).text()+"' hidden</li>")
				.listview("refresh");
			return false;
		}).bind("tap click", false);
		$("#showbtn").bind("tap click", function(e){
			$(".ui-grid-d a").show();
			$("#log")
				.prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"; message: show all buttons</li>")
				.listview("refresh");
		}).bind("tap click", false);
	});	
	</script>
</head> 
<body> 
<div data-role="page" data-theme="b" id="jqm-home">
	<div data-role="header">
		<h1>Grid Layout</h1>
	</div>
	
	<div data-role="content">
		<p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
		
		<div class="ui-grid-d">
			<div class="ui-block-a">
				<a data-role="button" id="btn1" data-theme="b">Button 1</a>
			</div>
			<div class="ui-block-b">
				<a data-role="button" id="btn2" data-theme="b">Button 2</a>
			</div>
			<div class="ui-block-c">
				<a data-role="button" id="btn3" data-theme="b">Button 3</a>
			</div>
			<div class="ui-block-d">
				<a data-role="button" id="btn4" data-theme="b">Button 4</a>
			</div>
			<div class="ui-block-e">
				<a data-role="button" id="btn5" data-theme="b">Button 5</a>
			</div>
		</div>
		
		<a data-role="button" id="showbtn">Show all button</a>
		
		<ul data-role="listview" id="log">
			
		</ul>

	</div>
</div>
</body>
</html>