jquery mobile

Predhin Tom Sapru

Introduction

• People around the globe are accessing the web via their smartphones more often than ever. So far in 2013, 17.4% of web traffic has come through mobile, representing more than a 6% increase since 2012 11.1% of traffic came from mobile.

Challenges for developing Mobile Web App

Creating web apps and sites for the Mobile Web has its own sets of challenges and techniques. From UIs optimized for fingers instead of mouse cursors to the bandwidth limitations that most portable personal devices have, developing for mobile devices requires a paradigm shift for those of us who’ve traditionally created products aimed at desktops.To help you rapidly deploy cross-platform mobile apps and websites, there’s a wide range of JavaScript frameworks you can take advantage of.Some common characteristics of JavaScript mobile web development frameworks:• Optimized for touchscreen devices: Fingers as input devices instead of mouse cursors provide an extra set of challenges in user interface design. Mobile web development frameworks provide standard UI elements and event-handling specifically for mobile device platforms.• Cross-platform: Support for multiple mobile device platforms such iOS and Android allows you to get your app to a wide range of users.• Lightweight: Because of current bandwidth limitations, a stronger emphasis on lowering file weight is placed into mobile web development frameworks.• Uses HTML5 and CSS3 standards: Most mainstream mobile devices have web browsers that support HTML5 and CSS3, and so mobile web development frameworks take advantage of new features available in these upcoming W3C specifications for a better user experience.• WAI-ARIA (Web Accessibility Initiative : Accessible Rich Internet Applications) is a technical specification published by the World Wide Web Consortium that specifies how to increase the accessibility of web pages, in particular, dynamic content and user interface components developed with Ajax, HTML, JavaScript and related technologies.

What is JqueryMobile

• Mobile framework using jQuery (obviously).• Aggresively cross-browser, cross-platform.• Create web apps that feel as close to native as

possible.• Markup driven, minimal code required to get

up and running.• Focused on progressive enhancement,

graceful degradation.

What is JqueryMobile• jQuery Mobile is a cross platform mobile framework designed to simplify

and enhance the development of mobile web applications by integrating HTML5, CSS3, jQuery and jQuery UI into one framework that is not only robust, but maintainable and organized.

• jQuery Mobile is built upon the existing jQuery core, meaning that if you understand the jQuery syntax, then you will have no problems getting JM to work. The framework is compatible with all major mobile and desktop applications including iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, Opera Mobile/Mini, Firefox Mobile and all modern desktop browsers.

• Its lightweight size (about 20K compressed) makes it a speed freak and the fact that it uses minimal image dependencies also speeds it up ridiculously. Its Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.

What is JqueryMobile• Automatic initialization by using HTML5 data-role attributes in

the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page and accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.

• jQuery Mobile's API supports not only Touch events, but also the usual Mouse events usually associated with jQuery, making it completely cross-browser and platform compatible. Built in controls are not only themable by the built in UI, but the Touch Optimized interface is completely supported by the UI. As an extra measure, jQuery Themeroller can also build custom widget designs for you to use.

What is JqueryMobile• Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as

soon as it loads (long before the document.ready event fires). These enhancements are applied based on jQuery Mobile's default settings, which are designed to work with common scenarios. If changes to the settings are needed, they are easy to configure.

• The mobileinit event• When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit. $(document).bind("mobileinit", function(){ //apply overrides here }); • Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link

to your JavaScript files in the following order: <script src="jquery.js"></script><script src="custom-scripting.js"></script><script src="jquery-mobile.js"></script> You can override default settings by extending the $.mobile object using jQuery's $.extend method. $(document).bind("mobileinit", function(){ $.extend( $.mobile , { foo: bar });});

Data- attribute reference

• The jQuery Mobile framework uses HTML5 data- attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also usedata- attributes, set a custom namespace by modifying the ns global option.

Jquery Mobile Theming

• jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content, and button colors, called a "swatch". The framework comes with five defined themes (swatches "a" to "e") which can be used readily, removed, or overwritten.

• we can download the theme from this URL:http://jQuerymobile.com/themeroller

http://jquerymobile.com/themeroller

Jquery Mobile Theming• To use your theme, add it to the head of your page before the

jQuery.mobile.structure file, like this:<!DOCTYPE html> <html> <head> <title>jQuery Mobile page</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/themes/my-custom-theme.css" /> <link rel="stylesheet" href=“jQuery.mobile.structure-1.1.1.min.css" /> <script src=“jQuery-1.7.1.min.js"></script> <script src=“jQuery.mobile-1.1.1.min.js"></script> </head>

Jquery Mobile Components - Page

• The page is the primary unit of interaction in jQuery Mobile and is used to group content into logical views that can be animated in and out of view with page transitions. A HTML document may start with a single "page" and the AJAX navigation system will load additional pages on demand into the DOM as users navigate around. Alternatively, a HTML document can be built with multiple "pages" inside it and the framework will transition between these local views with no need to request content from the server.

Mobile page structure

• A jQuery Mobile site must start with an HTML5 "doctype" to take full advantage of all of the framework's features. (Older devices with browsers that don't understand HTML5 will safely ignore the 'doctype' and various custom attributes.)

• In the "head", references to jQuery, jQuery Mobile and the mobile theme CSS are all required to start things off.

Sample Jquery Mobile Page Structure

<!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> ...content goes here...

</body></html>

Viewport meta tag• meta viewport tag in the head specify how the browser should display

the page zoom level and dimensions. If this isn't set, many mobile browsers will use a "virtual" page width around 900 pixels to make it work well with existing desktop sites but the screens may look zoomed out and too wide. 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"> • These settings do not disable the user's ability to zoom the pages,

which is nice from an accessibility perspective. There is a minor issue in iOS that doesn't properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed in a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library.

Inside the body• 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. View the data- attribute reference to see all the possible attributes you can add to pages.<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>

• Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of "header", "content", and "footer".

Different Page templates• Single page template

<!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>

<div data-role="content"><p>Page content goes here.</p>

</div>

<div data-role="footer"><h4>Page Footer</h4>

</div></div>

</body></html>

Different Page templates

• Multi-page template– 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"). When a link is clicked, the framework will look for an internal "page" with the id and transition it into view.

Different Page templates<body>

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

<div data-role="header"><h1>Foo</h1></div>

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

<div data-role="footer"><h4>Page Footer</h4></div>

</div>

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

<div data-role="header"><h1>Bar</h1></div>

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

<div data-role="footer"><h4>Page Footer</h4></div>

</div></body>

Difference between Single Page and Multipage Template

Single Page Template:

• Lighter and cleaner. Each page is a separate html file and more modular. • Better fallback if JavaScript is not supported. So works well on more platforms, you could even target grade

C browsers • On first load, the start page is loaded into the DOM. An internal reference is always held to this. Any new

page loaded is added to the DOM. Any previously shown page is removed from the DOM. The start page is always in the DOM.

• The DOM size is relatively smaller• Optional to use the "page" data-role element in the code• Can turn off Ajax Navigation between pages using data-ajax="false"• Recommend to use the <title> tag for page titles• The <title> tag always gets precedence during page loads• Consumes more bandwidth as each page navigation generates a new request• Navigating back to a previously loaded page will again generate a fresh request (with DOM caching you can

avoid reloading of the same pages multiple times)• First load is faster, but every subsequent page has to be fetched• Suitable for larger applications and situations where you want to target as many platforms as possible

including platforms which lack JavaScript support

Difference between Single Page and Multipage Template

Multi Page Template:

• Heavier. All the pages are in a single html file.• Needs JavaScript support as Ajax Navigation is used• Multiple page containers are present, and only the first one is shown when page loads• Large applications with many pages will increase the DOM size• The "page" data-role element is required• Using data-ajax="false" for internal pages ignores the data-transition attribute, by default

slide is used• Recommend to use the data-title attribute for all page titles• On first load, <title> tag is used and subsequent transitions data-title is used for page titles• Since all pages are already loaded, no additional requests are generated for navigating

between pages• First load is slower as the file size is larger, but subsequent page navigation is fast• Suitable for relatively smaller applications and situations where you know the capabilities of

your target platforms including presence of JavaScript support

Jquery Mobile Components - Content

Container with data-role="content"data-theme swatch letter (a-z)

For Ex: <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body>

Jquery Mobile Components - Checkbox

• Pairs of labels and inputs with type="checkbox" are auto-enhanced, no data-role required

• data-mini true | false - Compact sized version• data-role none (prevents auto-enhancement to use native

control)• data-theme swatch letter (a-z) - Added to the form element• Multiple checkboxes can be wrapped in a container with a data-

role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the checkboxes to sit side-by-side. Add the data-mini="true" to get the mini/compact sized version for all the checkboxes that appear in the controlgroup.

Jquery Mobile Components – Checkbox Group

Example:<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> or <fieldset data-role="controlgroup" data-type="horizontal">

<legend>Agree to the terms:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> <label for="checkbox-1">Cheetos</label> <input type=“checkbox” name=“checkbox-2” id=“checkbox-2” class=“custom” /> <label for=“checkbox-2”>Doritos</label> <input type=“checkbox” name=“checkbox-3” id=“checkbox-3” class=“custom” /> <label for=“checkbox-3”>Fritos</label> <input type=“checkbox” name=“checkbox-4” id=“checkbox-4” class=“custom” /> <label for=“checkbox-4”>Sun Chips</label>

</fieldset></div>

Jquery Mobile Components – Collapsible

A heading and content wrapped in a container with the data-role="collapsible“• data-collapsed true | false• data-content-theme swatch letter (a-z)• data-iconpos left | right | top | bottom• data-mini true | false - Compact sized version• data-theme swatch letter (a-z)

Example: <div data-role="collapsible" data-content-theme="c"> <h3>Header</h3> <p>I'm the collapsible content with a themed content block set to "c".</p> </div>

Jquery Mobile Components – Collapsible Set

A number of collapsibles wrapped in a container with the data-role="collapsible-set“Example:<div data-role="collapsible-set“>

<div data-role="collapsible" data-collapsed="false“><h3>Section 1</h3><p>I'm the collapsible set content for section 1.</p></div>

<div data-role="collapsible“><h3>Section 2</h3><p>I'm the collapsible set content for section 2.</p></div>

<div data-role="collapsible“><h3>Section 2</h3><p>I'm the collapsible set content for section 2.</p></div></div>

Jquery Mobile Components – Collapsible Group

DIV or FIELDSET container with data-role="controlgroup". Visually integrate multiple button-styled inputs of a single type (checkboxes, link-based buttons, radio buttons, selects) into a group. For grouping form checkboxes and radio buttons, the fieldset container is recommended inside a div container with the data-role="fieldcontain", to improve label styling.

• data-mini true | false - Compact sized version for all items in the controlgroup• data-type horizontal | vertical - For horizontal or vertical item alignment

Example: <div data-role="controlgroup"> or <div data-role="controlgroup“ data-type="horizontal" > <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a><a href="index.html" data-role="button">Maybe</a> </div>

Jquery Mobile Components – Dialog

Container with data-role="dialog" or linked to with data-rel="dialog" on the anchor.• data-close-btn-text string (text for the close button, dialog

only)• data-dom-cache true | false• data-overlay-theme swatch letter (a-z) - overlay theme when

the page is opened in a dialog• data-theme swatch letter (a-z)• data-title string (title used when page is shown)Example: <a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

Jquery Mobile Components – Field Container

Container with data-role="fieldcontain" wrapped around label/form element pairExample:

<div data-role="fieldcontain" ><label for="basic">Text Input:</label> <input

type="text" name="name" id="basic" data-mini="true" /></div>

Jquery Mobile Components – Fixed Toolbar

Container with data-role="header" or data-role="footer" plus the attribute data-position="fixed"

• data-disable-page-zoom true | false - User-scaling-ability for pages with fixed toolbars

• data-fullscreen true | false - Setting toolbars over the page-content• data-tap-toggle true | false - Ability to toggle toolbar-visibility on user tap/click• data-transition slide | fade | none - Show/hide-transition when a tap/click

occursExample:

<div data-role="header" data-position="fixed"> <h1>Fixed Header!</h1>

</div>

Which results in fixed header at top. The header will always on display even we scroll down. Similarly we can create for footer too.

Jquery Mobile Components – Flip Toggle Switch

Select with data-role="slider", two options only• data-mini true | false - Compact sized version• data-role none (prevents auto-enhancement to use native control)• data-theme swatch letter (a-z) - Added to the form element• data-track-theme swatch letter (a-z) - Added to the form element

Example: <label for="flip-1">Select slider:</label>

<select name="flip-1" id="flip-1" data-role="slider"> <option value="off">Off</option> <option value="on">On</option>

</select>

Jquery Mobile Components – Header/Footer

Container with data-role=“header/footer"• data-id string (unique id, useful in persistent

footers)• data-position fixed• data-fullscreen true (used in conjunction with

fixed toolbars)• data-theme swatch letter (a-z)

Jquery Mobile Components – Navbar

A number of LIs wrapped in a container with data-role="navbar"• data-iconpos left | right | top | bottom | notext

To add icons to the navbar items, the data-icon attribute is used, specifying a standard mobile icon for each item.

Navbars inherit the theme-swatch from their parent container. Setting the data-theme attribute to a navbar is not supported. The data-theme attribute

can be set individually to the links inside a navbar.Example:

<div data-role="navbar"> <ul> <li><a href="a.html“ class="ui-btn-active ui-state-persist" >One</a></li> <li><a href="b.html">Two</a></li> </ul>

</div>

Jquery Mobile Components – Radiobutton

Pairs of labels and inputs with type="radio" are auto-enhanced, no data-role required• data-mini true | false - Compact sized version• data-role none (prevents auto-enhancement to use native control)• data-theme swatch letter (a-z) - Added to the form element

Multiple radion buttons can be wrapped in a container with a data-role="controlgroup" attribute for a vertically grouped set. Add the data-type="horizontal" attribute for the radio buttons to sit side-by-side. Add the data-mini="true" to get the mini/compact sized version for all the radio buttons that appear in the controlgroup.

Example: <fieldset data-role="controlgroup“><legend>Choose a pet:</legend><input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">Cat</label> <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2">Dog</label> <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3">Hamster</label> <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" /> <label for="radio-choice-4">Lizard</label></fieldset>

Jquery Mobile Components – Slider

Inputs with type="range" are auto-enhanced, no data-role required• data-highlight true | false - Adds an active state fill on track to handle• data-mini true | false - Compact sized version• data-role none (prevents auto-enhancement to use native control)• data-theme swatch letter (a-z) - Added to the form element• data-track-theme swatch letter (a-z) - Added to the form element

Example: <div data-role="fieldcontain"> <label for="slider-3">Input slider:</label>

<input type="range" name="slider-3" id="slider-3" value="25" min="0" max="100" data-theme="a" data-track-theme="b" /> </div>

Jquery Mobile Components – Text Input & Textarea

Input type="text|number|search|etc." or textarea elements are auto-enhanced, no data-role required

• data-mini true | false - Compact sized version• data-role none (prevents auto-enhancement to use native control)• data-theme swatch letter (a-z) - Added to the form element

Example: – <div data-role="fieldcontain"> <label for="name">Text Input:</label> <input

type="text" name="name" id="name" value="" /> </div>

– <div data-role="fieldcontain"> <label for="textarea">Textarea:</label> <textarea name="textarea" id="textarea"></textarea> </div>

Jquery Mobile Components – Creating a web page for below UI

Hands-on example<!DOCTYPE html>

<html> <head> <title>jQuery Mobile page</title>

<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/themes/my-custom-theme.css" /> <link rel="stylesheet" href=“jQuery.mobile.structure-1.1.1.min.css" /> <script src=“jQuery-1.7.1.min.js"></script> <script src=“jQuery.mobile-1.1.1.min.js"></script>

</head> <body> <div data-role="page">

<div data-role="header"> <h1>Page Title</h1>

</div> <div data-role="content"><div class="content-primary">

<form><ul data-role="listview" data-inset="true">

<li data-role="fieldcontain“><label for="name">Text Input:</label><input type="text" name="name" id="name" value="" /></li><li data-role="fieldcontain“><label for="textarea">Textarea:</label><textarea cols="40" rows="8" name="textarea" id="textarea"></textarea></li><li data-role="fieldcontain“><label for="search">Search Input:</label><input type="search" name="password" id="search" value="" /></li><li data-role="fieldcontain“><label for="slider2">Flip switch:</label>

<select name="slider2" id="slider2" data-role="slider"><option value="off">Off</option><option value="on">On</option>

</select></li><li data-role="fieldcontain“><label for="slider">Slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /></li>

Hands-on example<li data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose as many snacks as you'd like:</legend> <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" /><label for="checkbox-1a">Cheetos</label> <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" /><label for="checkbox-2a">Doritos</label> <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" /><label for="checkbox-3a">Fritos</label>

<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" /><label for="checkbox-4a">Sun Chips</label> </fieldset></li><li data-role="fieldcontain"><fieldset data-role="controlgroup" data-type="horizontal"> <legend>Font styling:</legend> <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" /><label for="checkbox-6">b</label><input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" /><label for="checkbox-7"><em>i</em></label><input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" /><label for="checkbox-8">u</label> </fieldset></li><li data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose a pet:</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">Cat</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /> <label for="radio-choice-2">Dog</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /> <label for="radio-choice-3">Hamster</label> <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" /> <label for="radio-choice-4">Lizard</label> </fieldset></li>

Hands-on example<li data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Layout view:</legend> <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" /> <label for="radio-choice-c">List</label> <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" /> <label for="radio-choice-d">Grid</label> </fieldset></li><li data-role="fieldcontain"><label for="select-choice-1" class="select">Choose shipping method:</label><select name="select-choice-1" id="select-choice-1"><option value="standard">Standard: 7 day</option><option value="rush">Rush: 3 days</option><option value="express">Express: next day</option><option value="overnight">Overnight</option></select></li><li data-role="fieldcontain"><label for="select-choice-3" class="select">Your state:</label><select name="select-choice-3" id="select-choice-3"><option value="AL">Alabama</option></select></li><li data-role="fieldcontain"><label for="select-choice-a" class="select">Choose shipping method:</label><select name="select-choice-a" id="select-choice-a" data-native-menu="false"><option>Custom menu example</option></select></li>

Hands-on example<li class="ui-body ui-body-b"><fieldset class="ui-grid-a"><div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div><div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div> </fieldset></li></ul></form></div><div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body></html>

Jquery Mobile Event

• jQuery Mobile offers several custom events that build upon native events to create useful hooks for development. Note that these events employ various touch, mouse, and window events, depending on event existence, so you can bind to them for use in both handheld and desktop environments. You can bind to these events like you would with other jQuery events, using live() or bind().

Page Life Cycle• pagebeforecreate – First event to occur before page is loaded into the DOM. This is an excellent event if you want to add additional content to your DOM. This is because at this point DOM content is still intact and jQuery Mobile is waiting to enhance page markup.• pagecreate – Second event to occur if page is still not loaded into the DOM. It marks that page is loaded into the DOM and can also be used in same fashion just like pagebeforecreate.• pageinit – This event is perfect replacement for classic jQuery document ready. At this point page markup is enhanced and like document ready it will trigger only once, at least in multi-page template. In multi-HTMl template pageinit will trigger every time page is about to be shown.• pagebeforehide – This is excellent event if you want to do something before page is hidden or before next page can be shown.• pagehide – Unlike previous one this page even will trigger after pages is hidden, used page template will determine is this page completely removed or just marked not-active (in case of multi-HTMl template this page is removed from DOM, unless it is marked for cashing).• pagebeforeshow – This event will trigger just before page is shown, it is also an excellent time to bind other events, like click etc.• pageshow – At this point page is shown. This event should be used for jQuery plugins that require precise page height cause only at this point page height can be calculated correctly.• pageremove – This event is triggered when page is about to be removed from the DOM, it will work only in case of multi-HTML template when page cashing is turned off.• pagebeforeload – This event will trigger when pageload function is used but before page is successfully loaded.• pageload – Just like previous event, but this one will trigger only on a successful page load.• pagebeforechange – This page event will trigger when changePagefunction is triggered but before page transition process. It will trigger even during normal transition because changePagefunction is called automatically each time page is about to be changed (I just wanted to clarify this, changePagedon’t need to be executed manually for this event to work). Must be bound to the document object, it will not work bound to a page div.• pagechange – Just like previous one, but this one will trigger on successful page change status.

Page Life Cycle

• To Summarize:

Use $(document).bind('pageinit'), not $(document).ready()

• The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

$(document).bind('pagecreate') vs $(document).bind('pageinit')

• Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the pagecreate event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the pagecreate event in place of direct calls to the widget methods. As a result, users binding to the pagecreate in mobileinit would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked after the create method, so the pageinit event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects. In short, if you were previously using pagecreate to manipulate the enhanced markup before the page was shown, it's very likely you'll want to migrate to 'pageinit'.

Develop Mobile / Tablet UI using Dreamweaver CS6

• Step 1. Create a new document Select Page from Sample Mobile Starters jQuery Mobile with theme Select Create Button


Step 2. Save the Html. It will automatically create html page with all the necessary jQuery UI CSS styles and JavaScript as below. <!DOCTYPE html>

<html><head><meta charset="utf-8"><title>jQuery Mobile Web App</title><link href="jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/><link href="jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/><script src="jquery-1.6.4.min.js" type="text/javascript"></script><script src="jquery.mobile-1.0.min.js" type="text/javascript"></script></head> <body> <div data-role="page" id="page">

<div data-role="header"><h1>Page One</h1></div><div data-role="content">

<ul data-role="listview"><li><a href="#page2">Page Two</a></li>

</ul></div><div data-role="footer"><h4>Page Footer</h4></div>

</div><div data-role="page" id="page2“><div data-role="header"><h1>Page Two</h1></div>

<div data-role="content“>Content</div> <div data-role="footer"><h4>Page Footer</h4></div></div></body></html>


• Step 3. Insert the jQuery Mobile form controls as shown below and develop the html page as normally in previous versions of Dreamweaver.


• Step 4. Preview the html page as Multiscreen Preview. Windows Multiscreen Preview


• Step 5. It will display how HTML5 and CSS3 renders in different devices like Mobile/ Tablet and desktop as below.

jquery mobile

Technology