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.
1 2 3 |
<!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
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 |
<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> |
 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”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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 |
7. Total index.php code
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 |
<!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> |
help please.
Can you tell me how made transition slide “left to right”, i mean, the invert “slide”,
Tahk you
You can try this:
http://stackoverflow.com/questions/7205609/sliding-left-to-right-transition-in-jquery-mobile