jquery-mobile/tests/functional/gridlayout.html at master · allsteady/jquery-mobile · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jQuery Mobile: Grid Layout</title>
	<link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
	<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
	<script src="../../js/jquery.tag.inserter.js"></script>
	<script src="../../external/jquery/jquery.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
	<script src="../../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>