jQuery Mobile example website

Building a website with Jquery Mobile is very easy when you know the basics.
The beauty of a jQuery website is that you can create the whole website into a single file.

http://www.pietervanos.net/dev/jquerymobile/example_page/

First you have to create your own theme with the Jquery Mobile themeroller,
http://jquerymobile.com/themeroller/

The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.
http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-transitions.html

1. Create a file called index.php (or index.html)

2. Set the HTML5 tags and default html tags.

HTML5 tags

XHTML

<!DOCTYPE HTML>
<html> 
</html>

<!DOCTYPE HTML>

<html>

</html>

3. Create the html head

Between the html <head> </head> tags you put your:
– javascript code like google analytics and in this case you also call the jquery framework in the head.
– Favicon.ico
– Meta data
– Css path
– Website Title

HTML Head

XHTML

<head>
	<title>Example Website</title>  
	<meta charset="utf-8" />
  	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="shortcut icon" href="favicon.ico" >
	<link rel="stylesheet" href="style/pietervanos.css" />
	<link rel="stylesheet" href="style/pietervanos.min.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
	<script type="text/javascript">
		//google analytics//
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-6021558-12']);
	  _gaq.push(['_trackPageview']);

	  (function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

	</script>
</head>

<head>

<title>Example Website</title>

//google analytics//

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-6021558-12']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

</head>

4. Create the html body

create the html body by using the <body> </body> tags.

5. Add a homepage to the body

The homepage is the most important part of this website. It contains the menu with the different types of transitions.

The classes center-image and madeby are not inside the jquery css by default.
When you create a theme with the jquery themeroller you will find out you can create different themes inside 1 css. Those themes refer to a, b ,c. To use different themes change the part data-theme=”a”
to the theme version you want. i.e. data-theme=”b”, data-theme=”c”

This menu uses all the available transitions:
data-transition=”slide”
data-transition=”slideup”
data-transition=”slidedown”
data-transition=”pop”
data-transition=”fade”
data-transition=”flip”

To navigate to a page inside the index.php you just have to call the div ID.
href=”#slide”

Home page

XHTML

	<div id="home" data-role="page" class="type-interior" data-theme="a">
		<div data-role="header" data-theme="a">
			<div class="center-image"><h1>Example jQuery Mobile Webpage</h1></div>
		</div>
		<br />
		<div class="center-image"><img src="style/images/logo.png" style="width:100%"></img></div>
		<div data-role="content" data-theme="a">
				<a href="#slide" type="button" data-theme="a" data-transition="slide">Slide page</a>
				<a href="#slideup" type="button" data-theme="a" data-transition="slideup">Slideup page</a>
				<a href="#slidedown" type="button" data-theme="a" data-transition="slidedown">Slidedown page</a>
				<a href="#pop" type="button" data-theme="a" data-transition="pop">Pop page</a>
				<a href="#fade" type="button" data-theme="a" data-transition="fade">Fade page</a>
				<a href="#flip" type="button" data-theme="a" data-transition="flip">Flip page</a>
			<br />
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>

<div class="center-image"><h1>Example jQuery Mobile Webpage</h1></div>

</div>

<br />

<a href="#slide" type="button" data-theme="a" data-transition="slide">Slide page</a>

<a href="#slideup" type="button" data-theme="a" data-transition="slideup">Slideup page</a>

<a href="#slidedown" type="button" data-theme="a" data-transition="slidedown">Slidedown page</a>

<br />

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

6. Create a page

When you create a page you have to start with a div and div ID. The div ID is used by the menu to navigate to the page.

Jquery Mobile Page

XHTML

	<div id="slide" data-role="page" data-theme="a">
		<div data-role="header">
			<h1>Slide</h1>
			<a data-icon="home" data-rel="back" style="margin-top:2px;">Home</a>
		</div>
		<div data-role="content" data-theme="a">	
			<h1>This is a test page</h1>
			<p> Click home to go back </p>
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div

<h1>Slide</h1>

</div>

<p> Click home to go back </p>

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

</div

7. Total index.php code

Jquery Mobile Website Code

XHTML

<!DOCTYPE HTML>
<html> 
<head>
	<title>Example Website</title>  
	<meta charset="utf-8" />
  	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<link rel="shortcut icon" href="favicon.ico" >
	<link rel="stylesheet" href="style/pietervanos.css" />
	<link rel="stylesheet" href="style/pietervanos.min.css" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
	<script type="text/javascript">
		//google analytics//
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-6021558-12']);
	  _gaq.push(['_trackPageview']);

	  (function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

	</script>
</head>
<body>
	<div id="home" data-role="page" class="type-interior" data-theme="a">
		<div data-role="header" data-theme="a">
			<div class="center-image"><h1>Example jQuery Mobile Webpage</h1></div>
		</div>
		<br />
		<div class="center-image"><img src="style/images/logo.png" style="width:100%"></img></div>
		<div data-role="content" data-theme="a">
				<a href="#slide" type="button" data-theme="a" data-transition="slide">Slide page</a>
				<a href="#slideup" type="button" data-theme="a" data-transition="slideup">Slideup page</a>
				<a href="#slidedown" type="button" data-theme="a" data-transition="slidedown">Slidedown page</a>
				<a href="#pop" type="button" data-theme="a" data-transition="pop">Pop page</a>
				<a href="#fade" type="button" data-theme="a" data-transition="fade">Fade page</a>
				<a href="#flip" type="button" data-theme="a" data-transition="flip">Flip page</a>
			<br />
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
	<div id="slide" data-role="page" data-theme="a">
		<div data-role="header">
			<h1>slide</h1>
			<a data-icon="home" data-rel="back" style="margin-top:2px;">Home</a>
		</div>
		<div data-role="content" data-theme="a">	
			<h1>This is a test page</h1>
			<p> Click home to go back </p>
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
	<div id="slideup" data-role="page" data-theme="a">
		<div data-role="header">
			<h1>slideup</h1>
			<a data-icon="home" data-rel="back" style="margin-top:2px;">Home</a>
		</div>
		<div data-role="content" data-theme="a">	
			<h1>This is a test page</h1>
			<p> Click home to go back </p>
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>	
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
		<div id="slidedown" data-role="page" data-theme="a">
		<div data-role="header">
			<h1>slidedown</h1>
			<a data-icon="home" data-rel="back" style="margin-top:2px;">Home</a>
		</div>
		<div data-role="content" data-theme="a">	
			<h1>This is a test page</h1>
			<p> Click home to go back </p>
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>	
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
	<div id="pop" data-role="page" data-theme="a">
		<div data-role="header">
			<h1>pop</h1>
			<a data-icon="home" data-rel="back" style="margin-top:2px;">Home</a>
		</div>
		<div data-role="content" data-theme="a">	
			<h1>This is a test page</h1>
			<p> Click home to go back </p>
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>	
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
		<div id="fade" data-role="page" data-theme="a">
		<div data-role="header">
			<h1>fade</h1>
			<a data-icon="home" data-rel="back" style="margin-top:2px;">Home</a>
		</div>
		<div data-role="content" data-theme="a">	
			<h1>This is a test page</h1>
			<p> Click home to go back </p>
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>	
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
		<div id="flip" data-role="page" data-theme="a">
		<div data-role="header">
			<h1>flip</h1>
			<a data-icon="home" data-rel="back" style="margin-top:2px;">Home</a>
		</div>
		<div data-role="content" data-theme="a">	
			<h1>This is a test page</h1>
			<p> Click home to go back </p>
		</div>
		<div data-role="footer">
			<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>
			<a href="http://www.pietervanos.net" class="madeby" target="_blank"><img src="pietervanos.png" class="ui-btn-right" alt="Made By Pieter" /></a></h4></div>

		</div>
	</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->	
</body>
</html>

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

<!DOCTYPE HTML>

<html>

<head>

<title>Example Website</title>

//google analytics//

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-6021558-12']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

</head>

<body>

<div class="center-image"><h1>Example jQuery Mobile Webpage</h1></div>

</div>

<br />

<a href="#slide" type="button" data-theme="a" data-transition="slide">Slide page</a>

<a href="#slideup" type="button" data-theme="a" data-transition="slideup">Slideup page</a>

<a href="#slidedown" type="button" data-theme="a" data-transition="slidedown">Slidedown page</a>

<br />

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

<h1>slide</h1>

</div>

<p> Click home to go back </p>

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

<h1>slideup</h1>

</div>

<p> Click home to go back </p>

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

<h1>slidedown</h1>

</div>

<p> Click home to go back </p>

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

</div>

<p> Click home to go back </p>

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

</div>

<p> Click home to go back </p>

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

</div>

<p> Click home to go back </p>

</div>

<div class="center-image"><h4><a href="http://www.pietervanos.net" data-theme="a" data-inline="true" style="color:white;" TARGET="_blank">Visit here our desktop webpage</a>

</div>

</body>

</html>

Download jQuery Mobile example website here–> [download id=”5″] <–

Carlos leal March 9, 2015 at 15:35 Reply

help please.

Can you tell me how made transition slide “left to right”, i mean, the invert “slide”,

Tahk you

p.vanos March 12, 2015 at 16:45 Reply

You can try this:
http://stackoverflow.com/questions/7205609/sliding-left-to-right-transition-in-jquery-mobile

Portfolio

Knowledge

jQuery Mobile example website

1. Create a file called index.php (or index.html)

2. Set the HTML5 tags and default html tags.

3. Create the html head

4. Create the html body

5. Add a homepage to the body

6. Create a page

7. Total index.php code

Download jQuery Mobile example website here–> [download id=”5″] <–

Comments: 2

Leave a Reply Cancel reply

Recent Posts

Recent posts

Debian install PyMySQL

Update Cordova & Phonegap

Visual Basic outlook sent function

Visual Basic delete self with UNC support

IOS Developer screenshot sizes

Recent Comments

Archives

Categories