Creates a panel widget Panels are designed to be as flexible as possible to make it easy to create menus, collapsible columns, drawers, inspectors panes and more. Where panel markup goes in a page A panel must be a sibling to the header, content, and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between. Here is an example of the panel before the header, content and

Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration. Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration but these can be configured: $.event.special.swipe.scrollSupressionThreshold (default: 10px) â More than this horizontal displacement, and we will suppress scrolling. $.event.special.swipe.durationThreshold (default: 1

Opens content in a popup. Popups 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. This is a similar markup pattern to the dialog widget. A popup div has to be nested inside the same page as the link. <a href="#popupBasic" data-rel="popu

Creates a rangeslider widget Range Slider The rangeslider widget can be considered as a double handle slider. To add a rangeslider widget to your page, use two standard inputs with the type="range" attribute, and put them inside a <div> container. The input values are used to configure the starting position of the handles and the values are populated in the corresponding text inputs (the first one at the beginning of the rangeslider, and

Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. We're currently investigating ways to allow DOM manipulations to apply before a scroll starts. jQuery( ".selector" ).on( "scrollstart", function( event ) { ... } )

Reponsive layout grids Responsive grids When using layout grids for building full-level layouts, it may make sense to apply responsive web design (RWD) principles to ensure that the layout adapts to a wide range screen widths. The simplest form of responsive behavior swaps from a stacked layout on narrow screens like a smartphone to the multi-column grid layouts at wider screens. This can be done by targeting styles to specific screen widths by

Triggered just before the framework attempts to remove an external page from the DOM. By default, the framework removes any non active dynamically loaded external pages from the DOM as soon as the user navigates away to a different page. The pageremove event is dispatched just before the framework attempts to remove the page from the DOM. This event is triggered just before the framework attempts to remove an external page from the DOM. Event c

Triggered after the page is successfully loaded and inserted into the DOM. Note: The triggering of this event is deprecated as of jQuery Mobile 1.4.0. It will no longer be triggered in 1.6.0. The replacement for pageload is the pagecontainer widget's pagecontainerload event. In jQuery Mobile 1.4.0, the two events are identical except for their name and the fact that pagecontainerload is triggered on the pagecontainer, whereas pageload is trigg

Triggered on the "toPage" after the transition animation has completed. Note: The triggering of this event is deprecated as of jQuery Mobile 1.4.0. It will no longer be triggered in 1.6.0. The replacement for pageshow is the pagecontainer widget's pagecontainershow event. In jQuery Mobile 1.4.0, the two events are identical except for their name and the fact that pagecontainershow is triggered on the pagecontainer, whereas pageshow is triggere

Triggered if the page load request failed. Note: The triggering of this event is deprecated as of jQuery Mobile 1.4.0. It will no longer be triggered in 1.6.0. The replacement for pageloadfailed is the pagecontainer widget's pagecontainerloadfailed event. In jQuery Mobile 1.4.0, the two events are identical except for their name and the fact that pagecontainerloadfailed is triggered on the pagecontainer, whereas pageloadfailed is triggered on