jQuery-Mobile-Advanced-API-Examples/index.html at master · pinehead/jQuery-Mobile-Advanced-API-Examples · 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
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
<!DOCTYPE html>
<html>
	<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

	<script type="text/javascript">
	//simulate the $(document).ready(function()}); perform javascript once page is loaded with jquerymobile ajax

	$("#homepage").live( 'pageinit',function(event) {
		//Add Back Button To pages
		$.mobile.page.prototype.options.addBackBtn = "true";
		$.mobile.page.prototype.options.backBtnText = "Go Back";


		$('li').each(function(index) {

		var elementId = $(this).attr("id");
		var rel = $(this).attr("rel");
		var text = $(this).text();
	    elementId = '#'+elementId;
	    var link = elementId + '.php';

	   	//Add event listener for each li
	    $(function() {
			$(elementId).live('swipe', function(event) {
				//Load page that you swiped on.


				$.mobile.changePage( elementId, {transition: "slideup"} );

		  });
		});
 	   });
 	 });


	</script>

</head>

<body>

<div data-role="page" id="homepage">
<div data-role="header">
<h3>Pinehead.tv</h3>
</div>
<div data-role="content">
<h1>Advanced Topics</h1>
<p>Swipe on list element</p>
<ul data-role="listview" data-theme="c" id="swipelist">
	<li id="page1"><a href="">$.mobile.changePage Event</a></li>
	<li id="page2"><a href="">pageInit Event</a></li>
	<li id="page3"><a href="">Swipe Event</a></li>
	<li id="page4"><a href="">$.mobile…addBackBtn</a></li>
	<li id="page5"><a href="">silentScroll</a>
</ul>
</div>
</div>

<div data-role="page" id="page1">
<div data-role="header">
<h3>Pinehead.tv</h3>
</div>
<div data-role="content">
<h3>$.mobile.changePage Event</h3>
<p>
$.mobile.changePage Event
This tut uses the $.mobile.changePage event.  The changePage event allows you to change the page using code instead of hyperlinks.  This allows you to use events to change pages.
</p>
</div>
</div>

<div data-role="page" id="page2">
<div data-role="header">
<h3>Pinehead.tv</h3>
</div>
<div data-role="content">
<h3>pageInit Event</h3>
<p>
The pageinit event is used INSTEAD of $(document).ready().  This allows ajax to load the page being called and will execute the javascript code AFTER the DOM (document object model) is loaded.
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h3>Pinehead.tv</h3>
</div>
<div data-role="content">
<h3>Swipe Event</h3>

The swipe event allows actions/events to occur given page swipes.  You can use swip, sipeleft, or swiperight.
</div>
</div>
</body>

<div data-role="page" id="page4">
<div data-role="header">
<h3>Pinehead.tv</h3>
</div>
<div data-role="content">
<h3>BackBtn</h3>

The backBtn options allow you to by default have a back button appear on the header of each page.
$.mobile.page.prototype.options.addBackBtn = "true";
When set will include all sub pages with a back button

backBtntext - Will change the back button text.
$.mobile.page.prototype.options.backBtnText = "Go back";

backBtnTheme - Will change the theme of the back button
$.mobile.page.prototype.options.backBtnTheme = "c";

</div>
</div>

<div data-role="page" id="page5">
<div data-role="header">
<h3>Pinehead.tv</h3>
</div>
<div data-role="content">
<h3>silenScroll</h3>
Scroll to a position on a page

var yp = "y position on page"; //scroll to 100px y position on page
$.mobile.silentScroll(yp);


<div id="ypbutton" data-role="button" data-theme="c">Show Me</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam est neque, elementum eget aliquet vel, elementum at leo. Mauris aliquam iaculis ante nec sollicitudin. Quisque nec urna enim, quis scelerisque quam. Mauris aliquam imperdiet vehicula. Morbi commodo augue ut augue euismod porta. Vivamus ut lacus sit amet nibh congue suscipit non et nunc. Proin pretium vulputate dui in rutrum. Sed massa lectus, volutpat sagittis consequat vitae, sollicitudin sit amet est. Ut elementum blandit sem, rutrum ornare massa malesuada non. Nunc velit felis, posuere non gravida in, dignissim in libero. Quisque a dolor eu eros imperdiet placerat. Fusce erat risus, imperdiet et laoreet ut, vulputate ut ante. Quisque vitae interdum lacus. Aenean tempor sollicitudin nisl, a congue ante sollicitudin non. Proin nulla felis, aliquet eget interdum ac, luctus sit amet tortor. Nullam ultrices nibh eu ipsum commodo placerat.

Maecenas condimentum justo eu augue iaculis convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus tortor mauris, varius quis egestas sed, tempor in libero. Mauris enim tellus, elementum sed pulvinar in, tempor sit amet ipsum. Fusce dignissim ipsum ut metus adipiscing sed aliquet mauris consequat. Duis id rutrum justo. Pellentesque vitae nulla vel tellus facilisis dictum nec ut enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla iaculis turpis a metus luctus fermentum. Suspendisse ante massa, malesuada et vulputate ut, euismod sit amet dui. Quisque ipsum orci, feugiat nec ultricies nec, dictum in nisi. Vestibulum vitae eros nec lectus ullamcorper mattis non a diam.

<script type="text/javascript">
$('#ypbutton').click(function() {

	$.mobile.silentScroll(200);

});
</script>

</div>
</div>

</body>
</html>