Small and simple touch to Jquey Mobile

Jquery Mobile

· The jQuery Mobile "page" structure is optimized to support either single pages, or local internal linked "pages" within a page.

· A jQuery Mobile site must start with an HTML5 "doctype" to take full advantage of all of the framework's features.

· By setting the viewport attributes to content="width=device-width, initial-scale=1", the width will be set to the pixel width of the device screen.

<meta name="viewport" content="width=device-width, initial-scale=1">

· Inside the <body> tag, each view or "page" on the mobile device is identified with an element (usually a div) with the data-role="page" attribute.

<div data-role="page">

         <div data-role="header">...</div>

         <div data-role="content">...</div>

         <div data-role="footer">...</div>

</div>

Basic single page template

Putting it all together, this is the standard boilerplate page template you should start with on a project:

<!DOCTYPE html>

<html>

<head>

   <title>Page Title</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

   <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

   <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

<div data-role="page">

   <div data-role="header">

                   <h1>Page Title</h1>

   </div><!-- /header -->

   <div data-role="content">

                   <p>Page content goes here.</p>

   </div><!-- /content -->

   <div data-role="footer">

                   <h4>Page Footer</h4>

   </div><!-- /footer -->

</div><!-- /page -->

</body>

</html>

Multi-page template structure

·         A single HTML document can contain multiple "pages" that are loaded together by stacking multiple divs with a data-role of "page".

·         Each "page" block needs a unique id (id="foo") that will be used to link internally between "pages" (href="#foo").

<body>

<!-- Start of first page -->

<div data-role="page" id="foo">

         <div data-role="header">

                         <h1>Foo</h1>

         </div><!-- /header -->

         <div data-role="content">

                         <p>I'm first in the source order so I'm shown as the page.</p>

                         <p>View internal page called <a href="#bar">bar</a></p>

         </div><!-- /content -->

         <div data-role="footer">

                         <h4>Page Footer</h4>

         </div><!-- /footer -->

</div><!-- /page -->

<!-- Start of second page -->

<div data-role="page" id="bar">

         <div data-role="header">

                         <h1>Bar</h1>

         </div><!-- /header -->

         <div data-role="content">

                         <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>

                         <p><a href="#foo">Back to foo</a></p>

         </div><!-- /content -->

         <div data-role="footer">

                         <h4>Page Footer</h4>

         </div><!-- /footer -->

</div><!-- /page -->

</body>

·         Although the page structure outlined above is a recommended approach for a standard web app built with jQuery Mobile.

·         The page, header, content, and footer data-role elements are optional and are mostly helpful for providing some basic formatting and structure.

·         In a multi-page setup, you are required to have page wrappers in your markup in order to group the content into multiple pages.

·         If your body contains no data-role="page" divs, jQuery Mobile wraps the entire contents of the body within a page div.

· We therefore strongly recommend that jQuery Mobile documents with scripts in their body also contain a div with data-role="page".

· Titles in Multiple Pages. To manually define a title

<div data-role="page" id="foo" data-title="Page Foo">

Dialog

· Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link

· <a href="foo.html" data-rel="dialog">Open dialog</a>

· By default, the dialog will open with a 'pop' transition. Like all pages, you can specify any page transition you want on the dialog by adding the data-transition attribute to the link.

Page transitions

· By default, the framework applies a fade transition. To set a custom transition effect, add the data-transition attribute to the link.

<a href="index.html" data-transition="pop">I'll pop</a>

· To specify that the reverse version of a transition should be used, add the data-direction="reverse" attribute to a link.

Popup

· To create a popup, add the data-role="popup" attribute to a div with the popup contents. Then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped.

<a href="#popupBasic" data-rel="popup">Open Popup</a>

<div data-role="popup" id="popupBasic">

         <p>This is a completely basic popup, no options set.<p>

</div>

·         To open a popup programmatically, call popup with the open method on the popup container:

               $( "#myPopupDiv" ).popup( "open" )

Changing pages

· If you want to change the current active page with JavaScript, you can use the changePage method.

//transition to the "about us" page with a slideup transition

$.mobile.changePage( "about/us.html", { transition: "slideup"} );

//transition to the "search results" page, using data from a form with an id of "search"

$.mobile.changePage( "searchresults.php", {

         type: "post",

         data: $("form#search").serialize()

});

Venkat's Planet

Search This Blog

Small and simple touch to Jquey Mobile

Jquery Mobile

Basic single page template

Multi-page template structure

Dialog

Page transitions

Popup

Changing pages

Labels

Comments

Post a Comment

Popular posts from this blog

Dialogues from Athadu

Good Dialogues from Krishnam Vande Jagadgurum (KVJ)

Telugu Samethalu