Skip to content

Commit 6b1ef10

Browse files
agcolomagcolom
committed
Merge pull request jquery#54 from pashamalla/master
New ThrottledResize Doc and Example
2 parents 858911a + 74099d3 commit 6b1ef10

File tree

6 files changed

+232
-11
lines changed

6 files changed

+232
-11
lines changed

‎entries/orientationchange.xml

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
<?xml version="1.0"?>
22
<entry name="orientationchange" type="event" return="jQuery">
33
<title>orientationchange</title>
4-
<desc>Enables bookmarkable #hash history.</desc>
4+
<desc>Device Portrait/Landscape Orientation Event</desc>
55
<longdesc>
66
<p>The jQuery Mobile <code>orientationchange</code> event triggers when a device orientation changes, either by turning the device vertically or horizontally. When bound to this event the callback function has the event object. The event object contains an <code>orientation</code> property equal to either "portrait" or "landscape".</p>
77
<p>Note, we bind to the browser's resize event when <code>orientationchange</code> is not natively supported or if <code>$.mobile.orientationChangeEnabled</code> is set to false.</p>
88
<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
99
<pre>
1010
<code><![CDATA[
1111
$(function(){
12-
// Bind an event to window.orientationchange that, when the device is turned, gets the
13-
// orientation and displays it to on screen.
14-
$(window).bind('orientationchange', orientationChangeHandler);
12+
/*
13+
Bind an event to window.orientationchange that, when the device is turned,
14+
gets the orientation and displays it to on screen.
15+
*/
16+
$(window).bind( 'orientationchange', orientationChangeHandler );
1517
16-
function orientationChangeHandler(event){
17-
$('h1#orientation').html('This device is in ' + event.orientation + ' mode!');
18+
function orientationChangeHandler( event ) {
19+
$('h1#orientation').html( 'This device is in ' + event.orientation + ' mode!' );
1820
}
1921
// You can also manually force this event to fire.
2022
$(window).orientationchange();

‎entries/tap.xml

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<?xml version="1.0"?>
2+
<entry name="tap" type="event" return="jQuery">
3+
<title>tap</title>
4+
<desc>Triggered after a quick, complete touch event.</desc>
5+
<longdesc>
6+
<p>The jQuery Mobile <code>tap</code> event triggers after a quick, complete touch event that occurs of a single target object. It is the gesture equivalent of a standard click event that is triggered on the release state of the touch gesture.</p>
7+
8+
<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
9+
<pre>
10+
<code><![CDATA[
11+
<style type="text/css">
12+
div.box {
13+
background-color: #f00;
14+
height: 3em;
15+
width: 3em;
16+
}
17+
div.box.tap {
18+
background-color: #f0f;
19+
}
20+
</style>
21+
22+
...
23+
24+
<div class="box"></div>
25+
26+
...
27+
28+
$(function(){
29+
// Bind the tapHandler callback function to the tap event on div.box
30+
$('div.box').bind( 'tap', tapHandler );
31+
32+
// Callback function references the event target and adds the 'tap' class to it
33+
function tapHandler( event ){
34+
$(event.target).addClass( 'tap' );
35+
}
36+
});
37+
]]></code>
38+
</pre>
39+
<p>Tap the square to see the above code applied.
40+
<iframe id="tapIframe" src="/resources/tap/example1.html" style="width:100%;height:90px;border:0px"></iframe></p>
41+
</longdesc>
42+
<added>1.0</added>
43+
<signature>
44+
<argument name="callback" type="Function" optional="true">
45+
<desc>A function to invoke after the the tap event fires.</desc>
46+
</argument>
47+
</signature>
48+
<category slug="events"/>
49+
</entry>

‎entries/throttledresize.xml

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0"?>
2+
<entry name="throttledresize" type="event" return="jQuery">
3+
<title>throttledresize</title>
4+
<desc>Enables bookmarkable #hash history.</desc>
5+
<longdesc>
6+
<p>The jQuery Mobile <code>throttleresize</code> event is a special event that prevents browsers from running continuous callbacks on resize. <code>throttleresize</code> is used internally for orientationchange in browsers like Internet Explorer. <code>throttleresize</code> ensures that a held event will execute after the timeout so logic that depends on the final conditions after a resize is complete will still execute properly.</p>
7+
<p>The <code>throttleresize</code> event is triggered if orientationchange is not natively supported.</p>
8+
<p>This event triggers when the browser window resizes from:</p>
9+
<ol>
10+
<li>an orientation change (orientation-enabled device);</li>
11+
<li>changes in dimension ratio that replicates a landspace/portrait change (resizing a desktop browser).<li>
12+
</ol>
13+
14+
<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
15+
<pre>
16+
<code><![CDATA[
17+
var count = 0;
18+
$(function(){
19+
/*
20+
Bind an event handler to window's throttledresize event that, when triggered,
21+
passes a reference of itself that is accessible by the callback function.
22+
*/
23+
$(window).bind( 'throttledresize', throttledresizeHandler );
24+
25+
function throttledresizeHandler( event ){
26+
$('#output-text').html( 'Event Count: ' + ++count );
27+
}
28+
29+
// You can also manually force this event to fire.
30+
$(window).trigger( 'throttledresize' );
31+
});
32+
]]></code>
33+
</pre>
34+
<p>Visit this from your orientation-enabled device to see it in action!
35+
<iframe id="throttledresizeIframe" src="/resources/throttledresize/example1.html" style="width:100%;height:90px;border:0px"></iframe></p>
36+
37+
</longdesc>
38+
<added>1.0</added>
39+
<signature>
40+
<argument name="callback" type="Function" optional="true">
41+
<desc>A function to invoke after the the throttledresize event fires.</desc>
42+
</argument>
43+
</signature>
44+
<category slug="events"/>
45+
</entry>

‎resources/orientationchange/example1.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>orientationchange demo</title>
7-
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
8-
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
9-
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
7+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
8+
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
9+
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
1010
<style>
1111
html, body { padding: 0; margin: 0; }
1212
html, .ui-mobile, .ui-mobile body {
@@ -46,10 +46,10 @@
4646
<h1 id="orientation">orientationchange Not Supported on this Device.</h1>
4747
<script>
4848
$(function(){
49-
$(window).bind('orientationchange', orientationChangeHandler);
49+
$(window).bind( 'orientationchange', orientationChangeHandler );
5050

5151
function orientationChangeHandler(event){
52-
$('h1#orientation').html('This device is in ' + event.orientation + ' mode!');
52+
$('h1#orientation').html( 'This device is in ' + event.orientation + ' mode!' );
5353
}
5454

5555
$(window).orientationchange();

‎resources/tap/example1.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Tap event demo</title>
7+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
8+
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
9+
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
10+
<style>
11+
html, body { padding: 0; margin: 0; }
12+
html, .ui-mobile, .ui-mobile body {
13+
height: 85px;
14+
}
15+
.ui-mobile, .ui-mobile .ui-page {
16+
min-height: 85px;
17+
}
18+
#nav {
19+
font-size: 200%;
20+
width:17.1875em;
21+
margin:17px auto 0 auto;
22+
}
23+
#nav a {
24+
color: #777;
25+
border: 2px solid #777;
26+
background-color: #ccc;
27+
padding: 0.2em 0.6em;
28+
text-decoration: none;
29+
float: left;
30+
margin-right: 0.3em;
31+
}
32+
#nav a:hover {
33+
color: #999;
34+
border-color: #999;
35+
background: #eee;
36+
}
37+
#nav a.selected,
38+
#nav a.selected:hover {
39+
color: #0a0;
40+
border-color: #0a0;
41+
background: #afa;
42+
}
43+
div.box {
44+
width: 3em;
45+
height: 3em;
46+
background-color: #f00;
47+
}
48+
div.box.tap {
49+
background-color: #f0f;
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
<div class="box"></div>
55+
<script>
56+
$(function(){
57+
$('.box').bind( 'tap', tapHandler );
58+
59+
function tapHandler(event){
60+
$(event.target).addClass( 'tap' );
61+
}
62+
});
63+
</script>
64+
</body>
65+
</html>

‎resources/throttledresize/example1.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>throttledresize demo</title>
7+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
8+
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
9+
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
10+
<style>
11+
html, body { padding: 0; margin: 0; }
12+
html, .ui-mobile, .ui-mobile body {
13+
height: 85px;
14+
}
15+
.ui-mobile, .ui-mobile .ui-page {
16+
min-height: 85px;
17+
}
18+
#nav {
19+
font-size: 200%;
20+
width:17.1875em;
21+
margin:17px auto 0 auto;
22+
}
23+
#nav a {
24+
color: #777;
25+
border: 2px solid #777;
26+
background-color: #ccc;
27+
padding: 0.2em 0.6em;
28+
text-decoration: none;
29+
float: left;
30+
margin-right: 0.3em;
31+
}
32+
#nav a:hover {
33+
color: #999;
34+
border-color: #999;
35+
background: #eee;
36+
}
37+
#nav a.selected,
38+
#nav a.selected:hover {
39+
color: #0a0;
40+
border-color: #0a0;
41+
background: #afa;
42+
}
43+
</style>
44+
</head>
45+
<body>
46+
<h1 id="output-text">Event Output</h1>
47+
<script>
48+
var count = 0;
49+
$(function(){
50+
$(window).bind( 'throttledresize', throttledresizeHandler );
51+
52+
function throttledresizeHandler(event){
53+
$('#output-text').html( 'Event Count: ' + ++count );
54+
}
55+
56+
$(window).trigger( 'throttledresize' );
57+
});
58+
</script>
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)