jQueryMobile-BB10-Theme/kitchenSink/buttons_icontest.html at master · blackberry/jQueryMobile-BB10-Theme · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE HTML>
<!--
* Copyright 2012 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<html>
<head>
	<meta charset="utf-8">
	<title>Button Icon Test</title>
	<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
		<script>
			var meta = document.createElement("meta");
			meta.setAttribute('name','viewport');
			meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
			document.getElementsByTagName('head')[0].appendChild(meta);
		</script>

	<link rel="stylesheet" href="lib/BlackBerry-JQM-all.css" />
	<script src="lib/BlackBerry-JQM-all.js"></script>
	<style>
		.ui-grid-c {
			text-align: center;
		}
		div[data-role="navbar"] {
			margin: 0;
		}
	</style>
	<script type="text/javascript">
		var classReset = "ui-btn-icon-left ui-btn-icon-right ui-btn-icon-top ui-btn-icon-bottom";
		$("#left").live('click', function() {
			$("#buttons").children().each(function() {
				$(this)
					.removeClass(classReset)
					.addClass("ui-btn-icon-left");
			});
		});
		$("#right").live('click', function() {
			$("#buttons").children().each(function() {
				$(this)
					.removeClass(classReset)
					.addClass("ui-btn-icon-right");
			});
		});
		$("#top").live('click', function() {
			$("#buttons").children().each(function() {
				$(this)
					.removeClass(classReset)
					.addClass("ui-btn-icon-top");
			});
		});
		$("#bottom").live('click', function() {
			$("#buttons").children().each(function() {
				$(this)
					.removeClass(classReset)
					.addClass("ui-btn-icon-bottom");
			});
		});
	</script>
</head>
<body>
	<div data-role="page">
		<div data-role="header" data-theme="c">
			<h1>Buttons Icon Test</h1>
		</div><!-- /header -->
		<div data-role="content" >
			<div data-role="navbar">
				<ul>
					<li><a href="" id="left">Icon Left</a></li>
					<li><a href="" id="right">Icon Right</a></li>
					<li><a href="" id="top">Icon Top</a></li>
					<li><a href="" id="bottom">Icon Bottom</a></li>
				</ul>
			</div>
			<div class="ui-grid-c" id="buttons">
				<a href="#" data-role="button" data-inline="true" data-icon="plus">Plus Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="minus">Minus Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="delete">Delete Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="arrow-r">Arrow Right Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="arrow-l">Arrow Left Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="arrow-u">Arrow Up Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="arrow-d">Arrow Down Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="check">Check Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="gear">Gear Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="refresh">Refresh Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="forward">Forward Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="back">Back Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="grid">Grid Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="star">Star Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="alert">Alert Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="info">Info Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="home">Home Icon</a>
				<a href="#" data-role="button" data-inline="true" data-icon="search">Search Icon</a>
			</div>
		</div><!-- /content -->
		<div data-role="footer" data-position="fixed">
			<div id="action-bar-area" data-role="actionbar">
				<div data-role="back"></div>
			</div>
		</div>
	</div><!-- /page -->
</body>
</html>