-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
executable file
·180 lines (146 loc) · 4.14 KB
/
index.html
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<html>
<head>
<!-- Locks Web-Kit down on iPhone and Android, setting the
initial view to occupy the entire screen and not allowing
the user to scale the viewport. -->
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<!-- jQLite -->
<script src="jqlite.1.1.1.min.js" type="text/javascript"></script>
<!-- jQuery
<script src="jquery.js" type="text/javascript"></script>-->
<style type="text/css">
body {
font: 10pt Arial,Helvetica,Sans-serif;
margin-left: 5px;
margin-right: 5px;
}
div.spacer {
height: 15px;
}
div.button {
font-weight: bold;
background-color: silver;
border: 1px solid gray;
width: 90px;
height: 25px;
text-align: center;
padding-top: 5px;
cursor: pointer;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
span.jqlink.red {
background-color: red;
color: white;
}
.bold {
font-weight: bold;
}
p.hidden {
display: none;
}
</style>
<script type="text/javascript">
<!-- Testing jQLite support -->
var calls = 0, startTime = 0, left = 95;
$(document).ready(function() {
$("div.button.jq").click(function() {
$("span.jqlink").toggleClass("red");
});
$("div.multi span.hilite").css({
border: "2px dashed blue",
fontWeight: "bold"
});
$("div.button.hideshow").click(function() {
$("p.jqhideshow").toggleClass("hidden");
});
$("div.button.show").click(function() {
$("p.jqshow").show(function() {
alert("now showing!");
});
});
$(".spacer").css("borderBottom", "2px dotted green");
});
</script>
</head>
<body>
<a href="animate.html">jQAnimation Extension for jQLite >></a>
<h1>Using jQLite</h1>
<h2>Simple jQLite DOM Manipulations</h2>
<p>
With jQLite, you can control the DOM, even on the BlackBerry mobile device.
<span id="jqlink" class="jqlink">Manipulate the DOM by adjusting classes and setting up event
handlers.</span>
</p>
<div class="button jq">
jQuery
</div>
<div class="spacer"> </div>
<h2>Multiple Selectors</h2>
<div class="multi">
It is possible to utilize some of the capabilities of jQuery in jQLite, setting the styles
<span class="hilite">of multiple elements</span> that have the same class name
<span class="hilite">within the page.</span>
</div>
<div class="spacer"> </div>
<h2>Toggling of Classes</h2>
<div class="button hideshow">
Toggle
</div>
<p class="jqhideshow hidden">
If you can see this, then you were able to toggle the visibility of the
paragraph. Touch the button again to make it disappear...
</p>
<div class="spacer"> </div>
<h2>Show and Hide with Callback</h2>
<div class="button show">
Show
</div>
<p class="jqshow hidden">
If you can see this, then you were able to show the
paragraph.
</p>
<hr/>
<h1>Basic Testing of jQLite</h1>
<p class="first">
One paragraph. <span>With a span in it for element selection</span>
</p>
<script type="text/javascript">
$(document).ready(function() {
$("p.first span").css({ backgroundColor: "yellow" });
});
</script>
<div class="second">
Another paragraph with a list inside of it:
<ul>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("div.second ul li").last().css({ backgroundColor: "yellow" });
});
</script>
<div class="third">
<span>Hello</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("div.third span").append($("<span> World</span>"));
$("div.second ul li").first().css({ backgroundColor: "red", color: "white" });
});
</script>
<div class="fourth">
<div class="not-found">
This won't be found, but shouldn't throw an error!
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("div.fourth div.found").css("border", "1px solid blue").last().css("background", "pink");
});
</script>
</body>
</html>