ADAPTING TO THE ORIENTATION EVENT

When viewing a mobile device, there are two options or modes for screen orientation. When a page is viewed in portrait, it means that the height of the screen is greater than the width of the screen. When a page is viewed in landscape, the width of the screen is greater than the height of the screen.
Unless the device is locked into one viewing mode, the screen can be rotated and content shifted dynamically to make use of the extra space. While jQuery Mobile handles the resize of many of your elements, you may want to trigger a custom function whenever a screen change is detected.

When building a jQuery application, it is common practice to bind your event handlers on document load. You can do something similar using jQuery Mobile’s page hide and show events, but be careful. Since the page hide and show events are triggered every time a page transition happens, you might bind the event handlers more than once. For example, if you bind a click event listener to an element within a page show event, that click event listener will be bound every time that page is shown. If you are only using that page once, that’s fine, but if the user goes to that page multiple times, then the event listener will be bound multiple times.
To get around this problem, you can either check to see if you have already bound the event handler (and if you have, do not bind it again), or clear the binding each time before you rebind. If you use the latter method, namespacing your bindings can be particularly useful. For more information on namespaced events, see http://docs.jquery.com/Namespaced_Events. Namespaced events are a useful tool to have in your jQuery toolbox.

USING PAGEBEFORECREATE TO DYNAMICALLY ADD AN ATTRIBUTE

The pagebeforecreate event is used when you have content that you want modified before jQuery Mobile has had a chance to lock in and write the data-roles and attributes of page elements to the DOM.

Example 9: using pagebeforecreate to dynamically add an attribute

The file starts out as a standard HTML file that uses jQuery Mobile, but we start a script element. Some jQuery code that is used to bind the pagebeforecreate event to the document. This is done by using the .on() function that is available when using jQuery 1.7+. When the pagebeforecreate event runs it searches for any elements that have an attribute of class="modify" and applies an attribute of datainset="true" to any that are found by using the .attr() function.
Because the pagebeforecreate event runs before the page code is added to the DOM, jQuery Mobile sees the data-inset="true" attribute and styles it as an inset list.

USING THE PAGECREATE EVENT

The pagecreate event can be used either to apply your own widgets or to use the built-in widget or plug-in controls that jQuery Mobile provides.Example 8: using the pagecreate event in conjuction with the listview plug-in

The code starts out as a standard page using jQuery Mobile, and the .on() function is using the pagecreate event to run.
There is a selector that finds any element on the page that has a class="modify" attribute and then adds an attribute of data-inset="true". After that has been done you can see that a function called listview() is being run. This function is known as the listview plug-in and is used to apply the styles and markup for a list. Line 11 then closes the .on() function, which is the binding to the pagecreate event.
There is a ul element that contains only an attribute of class="modify". The data-role="listview" attribute is not present, and neither is the data-inset="true" attribute.

USING THE PAGEINIT EVENT

The pageinit event is best described and used as you would use the $(document).ready() function of jQuery. This event is triggered after the DOM has been loaded and all widgets and plug-ins have been run. This event also is triggered whenever a page is loaded either directly or through the AJAX call of another page. This event is triggered only once when included in the DOM.

Using pageinit When Loading the Second Page

The initial page setup should be familiar by now. Starting you can see the same method is employed to bind the pageinit event as was used to bind the pagebeforecreate and pagecreate events. The difference of course is where a selector for an element with an id="away" is used in the .on() function to bind an alert() function that will only run on the page with that selector when it is first loaded into the DOM.
Continuing down the code you can see that a page has been set up with a div element using the data-role="page" attribute.

TOUCH EVENTS

Whenever users interact by touch with your site they are triggering touch events. You can tap (pardon the pun) into these events to run custom functions.

USING TAP EVENTS

The main difference between a click and touchstart event is about 300ms. While that may not seem like a lot of time, an almost 1/3 of a second delay can make your mobile site or application feel slow and unresponsive. While the tap event is used by default on links, lists, and similar jQuery Mobile plug-ins and widgets, you can use the tap event to trigger custom functions on different elements on your page.Example 11: Using the tap and taphold events

The tap and taphold events must be bound in either the document.ready() function or inside the pageinit event. Since we already know that using the document.ready() function is not recommended for use with jQuery Mobile, we are binding the pageinit event using the .on() function. Inside the function, you can see the .on() function attaching the tap event to an element with an attribute of id=”image”.

USING SWIPE EVENTS

Swiping at your mobile device is common when moving through image galleries, deleting email, bringing up contact information, and more. With jQuery Mobile you can tap into three swipe events: swipe, swipeleft, and swiperight. A swipe is similar to a click-and-drag action on a computer. For any of the swipe events to trigger, the touch must travel more than 30px horizontally and take less than 1 second to complete. It also may not move more than 20px vertically or the event trigger will be cancelled.

Example 12: using swipe events

The below image is shown when swipe the box to the right as it previews on your mobile browser on your device.

VIRTUAL MOUSE EVENTS

The virtual mouse events are an answer to compatibility problems between mobile and desktop browsers. For example, some mobile browsers support an event called touchstart, while other mobile browsers do not. Desktop browsers support the mousemove event and have support for hover through the use of the mouseover event while mobile devices have a hard time emulating or using the correct event. These problems are solved in jQuery Mobile by using virtual mouse events. When a page is loaded with jQuery Mobile, the browser is checked for event support.
Events are then supported based on the virtual mouse events. While this happens in the background, you can bind virtual mouse events to run specific functions, or even to get data that can be used in other functions.
The virtual mouse events that are available are

vmouseover

vmousedown

vmousemove

vmouseup

vclick

vmousecancel

To use the vmousedown, vmousemove, and vmouseover Events snippet of code below is included in the head tag <head></head>

BUILDING YOUR FIRST MOBILE SITE USING JQUERY MOBILE

The Header
This section is the first thing a user sees, and may be the most prominent feature of your mobile site. This informs users where they are, and may include a search bar, a call-to-action button, and/or a logo.

The Content Area
Content areas are exactly what they sound like: buttons, text, call-outs, and everything else that is not already included in the other sections. The content area houses the core of your site and displays everything you want the user to see, absorb, or spend time on.

The Footer
The footer is an often overlooked but important area of your site. It can contain everything from extra links to a simple credit line for ownership of the site. In mobile development the footer is often omitted and replaced with a navigation bar or other static element.

Hello there! My name is Andrew and I have been doing web development for years. Frankly, not only web-development, and system-development too. This site is the place where I get to teach and share my experience for the web. Read more