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.

jQuery Mobile example page

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.

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

 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”

uery mobile themeroller

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”

 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.

7. Total index.php code

Download jQuery Mobile example website here–> jQuery Mobile Example Website (1386) <–

Comments: 2

  1. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

-->