Triggered after a quick, complete touch event. The jQuery Mobile tap event triggers after a quick, complete touch event that occurs on a single target object. It is the gesture equivalent of a standard click event that is triggered on the release state of the touch gesture. This plugin extends jQuery's built-in method. If jQuery Mobile is not loaded, calling the .tap() method may not fail directly, as the method still exists. However, the expec

Triggered after a sustained complete touch event. The jQuery Mobile taphold event triggers after a sustained, complete touch event (also known as a long press). $.event.special.tap.tapholdThreshold (default: 750) - This value dictates how long the user must hold their tap before the taphold event is fired on the target element. $.event.special.tap.emitTapOnTaphold (default: true) - This value dictates whether a tap event will be emitted along w

Creates a responsive table in reflow mode The reflow table mode works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row. Since the HTML source order of a table prohibits styling a table to look like this, the plugin dynamically adds a bit of markup to make the display work (without affecting accessibility). Here is a demo of a basic table using reflow mode: Applying reflow mode t

Triggered when a swipe event occurs moving in the left direction. Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration in the left direction. See the swipe event entry for more detailed information on the swipe event. jQuery( window ).on( "swipeleft", function( event ) { ... } )

Creates a responsive table Responsive tables One of the biggest challenges in responsive web design (RWD) is presenting tabular data. Large tables with lots of columns don't fit on smaller screens and there isn't a simple way to re-format the table content with CSS and media queries for an acceptable presentation. To address this, the framework offers two different options for presenting tables responsively. Each has benefits and tradeoffs, the

Creates a responsive table in column toggle mode This table mode automatically hides less important columns at narrower widths and surfaces a button to open a menu that allows the user to choose what columns they want to see. In this mode, the author attempts to define which columns are most important to show across various widths by assigning a priority to each column. A user may choose to check as many columns as they want by tapping the "Col

Creates a textinput widget for textinput, textarea or search input Text Input Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. To collect standard alphanumeric text, use an input with a type="text" attribute. Set the for attribute of the label to match the id of the input so they are semantically associated. It's possible to accessibly hi

Creates a select menu widget The select menu is based on a native select element, which is hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The select menu is ARIA-enabled and keyboard accessible on the desktop as well. By default, the framework leverages the native OS options menu to use with the custom button. When the button is clicked, the native OS menu will ope

Creates a slider widget Slider To add a slider widget to your page, use a standard input with the type="range" attribute. The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify min and max attribute values to set the slider's range. If you want to constrain input to specific increments, add the step attribute. Set the value attribute to define the initial value. The frame

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