Skip to content

Commit 4c8e227

Browse files
agcolomagcolom
committed
Merge pull request #24 from robertbosse/master
API Doc: Revised onhashchange documentation
2 parents 085c439 + d9fee5e commit 4c8e227

File tree

2 files changed

+74
-38
lines changed

2 files changed

+74
-38
lines changed

‎entries/hashtag.xml

Lines changed: 4 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</argument>
1515
</signature>
1616
<example>
17-
<desc>Click, and watch as the magic happens!</desc>
17+
<desc>A simple jQuery Mobile hashchange example.</desc>
1818
<code><![CDATA[
1919
$(function(){
2020
// Bind an event to window.onhashchange that, when the hash changes, gets the
@@ -36,43 +36,9 @@
3636
$(window).hashchange();
3737
});
3838
]]></code>
39-
<html><![CDATA[
40-
<style>
41-
#nav {
42-
font-size: 200%;
43-
}
44-
45-
#nav a {
46-
color: #777;
47-
border: 2px solid #777;
48-
background-color: #ccc;
49-
padding: 0.2em 0.6em;
50-
text-decoration: none;
51-
float: left;
52-
margin-right: 0.3em;
53-
}
54-
55-
#nav a:hover {
56-
color: #999;
57-
border-color: #999;
58-
background: #eee;
59-
}
60-
61-
#nav a.selected,
62-
#nav a.selected:hover {
63-
color: #0a0;
64-
border-color: #0a0;
65-
background: #afa;
66-
}
67-
</style>
68-
69-
<p id="nav">
70-
<a href="#test1">test 1</a>
71-
<a href="#test2">test 2</a>
72-
<a href="#test3">test 3</a>
73-
<a href="#test4">test 4</a>
74-
</p>
75-
]]></html>
39+
<p>Click, and watch as the magic happens!
40+
<iframe src="/resources/hashtag/example1.html" style="width:100%;height:90px;border:0px"></iframe>
41+
</p>
7642
</example>
7743
<category slug="events"/>
7844
</entry>

‎resources/hashtag/example1.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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>hashtag 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>
10+
<style>
11+
#nav {
12+
font-size: 200%;
13+
width:17.1875em;
14+
margin:0 auto;
15+
}
16+
17+
#nav a {
18+
color: #777;
19+
border: 2px solid #777;
20+
background-color: #ccc;
21+
padding: 0.2em 0.6em;
22+
text-decoration: none;
23+
float: left;
24+
margin-right: 0.3em;
25+
}
26+
27+
#nav a:hover {
28+
color: #999;
29+
border-color: #999;
30+
background: #eee;
31+
}
32+
33+
#nav a.selected,
34+
#nav a.selected:hover {
35+
color: #0a0;
36+
border-color: #0a0;
37+
background: #afa;
38+
}
39+
</style>
40+
</head>
41+
<body>
42+
<p id="nav">
43+
<a href="#test1">test 1</a>
44+
<a href="#test2">test 2</a>
45+
<a href="#test3">test 3</a>
46+
<a href="#test4">test 4</a>
47+
</p>
48+
<script>
49+
$(function(){
50+
// Bind an event to window.onhashchange that, when the hash changes, gets the
51+
// hash and adds the class "selected" to any matching nav link.
52+
$(window).hashchange( function(){
53+
var hash = location.hash;
54+
55+
// Set the page title based on the hash.
56+
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
57+
58+
// Iterate over all nav links, setting the "selected" class as-appropriate.
59+
$('#nav a').each(function(){
60+
var that = $(this);
61+
that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
62+
});
63+
})
64+
// Since the event is only triggered when the hash changes, we need to trigger
65+
// the event now, to handle the hash the page may have loaded with.
66+
$(window).hashchange();
67+
});
68+
</script>
69+
</body>
70+
</html>

0 commit comments

Comments
 (0)