This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>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 right choice will depend on the data being presented.</p>
<p>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 right choice will depend on the data being presented.</p>
<p><ahref="table-reflow">Reflow mode</a> - Re-formats the table columns at narrow widths so each row of data is presented as a formatted block of label/data pairs. This is ideal for tables with product or contact information with more complex or lengthy data formatting that doesn't need comparison across rows of data.</p>
<p><ahref="table-reflow">Reflow mode</a> - Re-formats the table columns at narrow widths so each row of data is presented as a formatted block of label/data pairs. This is ideal for tables with product or contact information with more complex or lengthy data formatting that doesn't need comparison across rows of data.</p>
<p><ahref="table-columntoggle">Column toggle mode</a> - Selectively hides columns at narrower widths as a sensible default but also offers a menu to let users manually control which columns they want to see. This mode is better for financial data tables that have compact values and need to maintain comparisons across columns and rows of data. It can also be used for building things like product comparison tables.</p>
<p><ahref="table-columntoggle">Column toggle mode</a> - Selectively hides columns at narrower widths as a sensible default but also offers a menu to let users manually control which columns they want to see. This mode is better for financial data tables that have compact values and need to maintain comparisons across columns and rows of data. It can also be used for building things like product comparison tables.</p>
<p>The responsive table feature is built with a core table plugin (<code>table.js</code>) that initializes when the <code>data-role="table"</code> attribute is added to the markup. This plugin is very lightweight and adds <code>ui-table</code> class, parses the table headers and generates information on the columns of data, and fires a <code>tablecreate</code> event. Both the table modes, <ahref="table-reflow">reflow</a> and <ahref="table-columntoggle">column toggle</a>, are written as extensions to the table widget that hook in via the <code>create</code> event to add the additional behaviors that make the tables responsive. Reflow is the default mode so if the extension is present, it will be applied automatically if the <code>data-role="table"</code> attribute is on the table.</p>
<p>If only one mode is used on a project, the download builder tool can be used to package only the table plugin and the single extension to save code weight.</p>
<h3>General table markup guidelines</h3>
<p>The responsive table feature is built with a core table plugin (<code>table.js</code>) that initializes when the <code>data-role="table"</code> attribute is added to the markup. This plugin is very lightweight and adds <code>ui-table</code> class, parses the table headers and generates information on the columns of data, and fires a <code>tablecreate</code> event. Both the table modes, <ahref="table-reflow">reflow</a> and <ahref="table-columntoggle">column toggle</a>, are written as extensions to the table widget that hook in via the <code>create</code> event to add the additional behaviors that make the tables responsive. Reflow is the default mode so if the extension is present, it will be applied automatically if the <code>data-role="table"</code> attribute is on the table.</p>
<p>If only one mode is used on a project, the download builder tool can be used to package only the table plugin and the single extension to save code weight.</p>
<p>Here is the basic table markup you should use for both table modes:</p>
<p>Both table modes start with standard HTML table markup but there are some specific guidelines you must follow for the responsive table to work correctly: </p>
<ulclass="bullet">
@@ -51,25 +53,18 @@
<li>The first row of the table must contain the table headers, be sure to use <code>TH</code> instead of <code>TD</code> tags</li>
<li>To display longer table header text in the column chooser or reflow labels, wrap the text in the <code>TH</code> with a <code>abbr</code> element and set the <code>title</code>. This string will be used in place.</li>
</ul>
<h3>Styling and theming tables</h3>
<p>The responsive table plugin is as minimally styled as possible to give you a clean slate for your designs. The plugin focuses primarily on the difficult scripting elements: generating the labels for the reflow table and creating the button and column chooser popup. Out of the box, the table just has a few basic style rules to add a bit of padding and set the vertical alignment of cells to be top left for visual consistency. </p>
<p>The table will adapt to whatever content block it sits on, but there isn't an explicit theming attribute for this widget. We did this because it's simple enough to add theme classes like <code>ui-body-a</code> to individual cells if a more heavily themed look is wanted.</p>
<h3>Row strokes</h3>
<p>To add horizontal lines between each row, add a custom style to your stylesheet that adds a border to the table headers and cells. In this example, RGBA is used to set a color (black) at an opacity of 5% so this will work on any background color:</p>
<pre><code>.table-stroke thead th {
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.table-stroke tbody th,
.table-stroke tbody td {
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
</code></pre>
<p>This standard table stroke style can be also applied by adding <code>table-stroke</code> <code>class</code> to the <code>table</code> element. If you prefer a custom stroke style, use the example above as a starting point. Note that adding styles that set a color for the stroke will override a theme class so do not use these together.</p>
<h3>Styling and theming tables</h3>
<p>The responsive table plugin is as minimally styled as possible to give you a clean slate for your designs. The plugin focuses primarily on the difficult scripting elements: generating the labels for the reflow table and creating the button and column chooser popup. Out of the box, the table just has a few basic style rules to add a bit of padding and set the vertical alignment of cells to be top left for visual consistency. </p>
<p>The table will adapt to whatever content block it sits on, but there isn't an explicit theming attribute for this widget. We did this because it's simple enough to add theme classes like <code>ui-body-a</code> to individual cells if a more heavily themed look is wanted.</p>
<h3>Row strokes and stripes</h3>
<p>The theme CSS contains a preset row strokes and alternating row stripes style which can be applied by adding <code>table-stroke</code> or <code>table-stripe</code> class to the <code>table</code> element.</p>
<strong>Note: the <code>table-stroke</code> and <code>table-stripe</code> classes are deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0. The demos contain an example how to apply these styles with custom CSS.</strong>
</longdesc>
<added>1.3</added>
<options>
@@ -78,19 +73,12 @@
<p>The classes option is only configurable via JavaScript because it expects an object literal value.</p></desc>
<desc>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as tables. To change which elements are initialized, bind this option to the mobileinit event:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>The jQuery Mobile <code>tap</code> 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.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>Triggered after a sustained complete touch event.</desc>
<longdesc>
<p>The jQuery Mobile <code>taphold</code> event triggers after a sustained, complete touch event (also known as a long press).</p>
<p>The jQuery Mobile <code><placeholdername="name"/></code> event triggers after a sustained, complete touch event (also known as a long press).</p>
<p><code>$.event.special.tap.tapholdThreshold</code> (default: 750) - This value dictates how long the user must hold their tap before the taphold event is fired on the target element.</p>
<p><code>$.event.special.tap.emitTapOnTaphold</code> (default: true) - This value dictates whether a tap event will be emitted along with the <placeholdername="name"/> event.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>The jQuery Mobile theme provides the CSS framework necessary for providing a consistent and touch-friendly look and feel for your widgets across platforms. It is built around the following essential concepts:</p>
<h3>Swatches</h3>
<p>A swatch is one of several colour schemes provided by your theme. We use single-letter designations for swatches. The default jQuery Mobile theme provides two swatches. The "a" swatch is a neutral, gray swatch, and the "b" swatch has a darker color scheme designed to contrast with the "a" swatch. You can use "b" to draw special attention to elements in a user interface styled with "a", and vice versa.</p>
<p>The <ahref="http://jquerymobile.com/themeroller/">ThemeRoller</a> allows you to create any number of swatches for a custom theme.</p>
<h3>Active state</h3>
<p>The theme defines an "active" state separately from all the swatches. The intention is to give immediate feedback upon a user action if there should be a brief processing delay. For example, most mobile devices implement a 300ms delay between the time when the user lifts her finger from the touchscreen and the triggering of the "click" event. jQuery Mobile adds the "active" state to a button whenever the device is poised to emit a "click" event so the user receives immediate feedback that the application is committed to processing the "click" in the next 300ms.</p>
<h3>Theme inheritance</h3>
<p>You do not need to specify a swatch for every widget you create. Despite this, most widgets have a "theme" option set to <code>null</code> by default so you may override the swatch for an individual widget. The default value of <code>null</code> makes it sufficient to specify a swatch on the outermost container for your user interface. The swatch will then be inherited by all the widgets in the container.</p>
<p>You can override the swatch for portions of a container by specifying a theme swatch for one of its subcontainers. <br /><strong>Note:</strong> Because of the nature of CSS, you cannot repeatedly alternate between two swatches.</p>
<p>If you use a widget outside a jQuery Mobile <ahref="/page/">page</a> (or you don't use pages at all) and there is no themed ancestor you have to set the theme option or add the applicable theme class in your markup if you want the widget to be styled. For example, if your panel markup is outside the page and it has a listview inside, you have to set a swatch on the panel for the panel to be styled properly. However, once you set the swatch for the panel, the listview will inherit the swatch from the panel.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>The jQuery Mobile <code>throttledresize</code> event is a special event that prevents browsers from running continuous callbacks on resize. <code>throttledresize</code> is used internally for orientationchange in browsers like Internet Explorer. <code>throttledresize</code> ensures that a held event will execute after the timeout so logic that depends on the final conditions after a resize is complete will still execute properly.</p>
<p>The <code>throttledresize</code> event is triggered if orientationchange is not natively supported.</p>
<p>The jQuery Mobile <code>throttleresize</code> event is a special event that prevents browsers from running continuous callbacks on resize. <code>throttleresize</code> is used internally for orientationchange in browsers like Internet Explorer. <code>throttleresize</code> ensures that a held event will execute after the timeout so logic that depends on the final conditions after a resize is complete will still execute properly.</p>
<p>The <code>throttleresize</code> event is triggered if orientationchange is not natively supported.</p>
<p>This event triggers when the browser window resizes from:</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>This event is triggered by components within the framework that dynamically show/hide content, and is meant as a generic mechanism to notify other components that they may need to update their size or position. Within the framework, this event is fired on the component element whose content was shown/hidden, and bubbles all the way up to the document element. </p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
<p>The jQuery Mobile <code>"vclick"</code> event handler simulates the "onclick" event handler on mobile devices.</p>
<pstyle="font-style:italic;">The idea behind virtualized mouse events is to translate touch events into mouse events to compensate for the missing mouse event triggers. Developers should be aware that these virtualized mouse events will not prevent any synthetic mouse events from being triggered inside the browser after a touch event. If a mouse-type device is used on the system, the virtualized mouse events are dispatched at the same time as the normal mouse events.</p>
<divclass="warning"><h4>Warning: Use vclick with caution</h4>
<p> Use vclick with caution on touch devices. Webkit based browsers synthesize <code>mousedown</code>, <code>mouseup</code>, and <code>click</code> events roughly 300ms after the <code>touchend</code> event is dispatched. The target of the synthesized mouse events are calculated at the time they are dispatched and are based on the location of the touch events and, in some cases, the implementation specific heuristics which leads to different target calculations on different devices and even different OS versions for the same device. This means the target element within the original touch events could be different from the target element within the synthesized mouse events.</p>
<p>We recommend using <code>click</code> instead of <code>vclick</code> anytime the action being triggered has the possibility of changing the content underneath the point that was touched on screen. This includes page transitions and other behaviors such as collapse/expand that could result in the screen shifting or content being completely replaced.</p>
</div>
<divclass="warning"><h4>Canceling an element's default click behavior</h4>
<p>Applications can call <code>preventDefault()</code> on a <code>vclick</code> event to cancel an element's default click behavior. On mouse based devices, calling <code>preventDefault()</code> on a <code>vclick</code> event equates to calling <code>preventDefault()</code> on the real <code>click</code> event during the bubble event phase. On touch based devices, it's a bit more complicated since the actual <code>click</code> event is dispatched about 300ms after the <code>vclick</code> event is dispatched. For touch devices, calling <code>preventDefault()</code> on a <code>vclick</code> event triggers some code in the vmouse plugin that attempts to catch the next <code>click</code> event that gets dispatched by the browser, during the capture event phase, and calls <code>preventDefault()</code> and <code>stopPropagation()</code> on it. As mentioned in the warning above, it is sometimes difficult to match up a touch event with its corresponding mouse event because the targets can differ. For this reason, the vmouse plugin also falls back to attempting to identify a corresponding <code>click</code> event by coordinates. There are still cases where both target and coordinate identification fail, which results in the <code>click</code> event being dispatched and either triggering the default action of the element, or in the case where content has been shifted or replaced, triggering a click on a different element. If this happens on a regular basis for a given element/control, we suggest you use <code>click</code> for triggering your action.</p>
</div>
<dd><p>The virtual mouse events can also be configured:</p>
<ul>
<li><code>$.vmouse.moveDistanceThreshold</code> (default: 10px) – More than this, then it is a scroll event. The vmousecancel event is called and the TouchMove event is cancelled.</li>
<li><code>$.vmouse.clickDistanceThreshold</code> (default: 10px) – If a vclick event was already captured and is in the block list, then vclicks less than this distance are ignored.</li>
<li><code>$.vmouse.resetTimerDuration</code> (default: 1500ms) – More time than this, then it is not a touch event. Scroll, TouchMove and TouchEnd events use this. The block list is cleared.</li>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
<p>The jQuery Mobile <code>vmousecancel</code> event handler is called whenever the system cancels a virtualized mouse event. This event occurs when a scroll is triggered. jQuery Mobile will fire a "vmousecancel" event in this instance.</p>
<pstyle="font-style:italic;">The idea behind virtualized mouse events is to translate touch events into mouse events to compensate for the missing mouse event triggers. Developers should be aware that these virtualized mouse events will not prevent any synthetic mouse events from being triggered inside the browser after a touch event. If a mouse-type device is used on the system, the virtualized mouse events are dispatched at the same time as the normal mouse events.</p>
<dd><p>The virtual mouse events can also be configured:</p>
<ul>
<li><code>$.vmouse.moveDistanceThreshold</code> (default: 10px) – More than this, then it is a scroll event. The vmousecancel event is called and the TouchMove event is cancelled.</li>
<li><code>$.vmouse.clickDistanceThreshold</code> (default: 10px) – If a vclick event was already captured and is in the block list, then vclicks less than this distance are ignored.</li>
<li><code>$.vmouse.resetTimerDuration</code> (default: 1500ms) – More time than this, then it is not a touch event. Scroll, TouchMove and TouchEnd events use this. The block list is cleared.</li>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
<p>The jQuery Mobile <code>vmousedown</code> event handler simulates the "onmousedown" event handler on mobile devices.</p>
$( this ).append( "<span style='color:#108040;'> vmousedown fired...</span>" );
});
]]></code></pre>
<pstyle="font-style: italic;">The idea behind virtualized mouse events is to translate touch events into mouse events to compensate for the missing mouse event triggers. Developers should be aware that these virtualized mouse events will not prevent any synthetic mouse events from being triggered inside the browser after a touch event. If a mouse-type device is used on the system, the virtualized mouse events are dispatched at the same time as the normal mouse events.</p>
<dd><p>The virtual mouse events can also be configured:</p>
<ul>
<li><code>$.vmouse.moveDistanceThreshold</code> (default: 10px) – More than this, then it is a scroll event. The vmousecancel event is called and the TouchMove event is cancelled.</li>
<li><code>$.vmouse.clickDistanceThreshold</code> (default: 10px) – If a vclick event was already captured and is in the block list, then vclicks less than this distance are ignored.</li>
<li><code>$.vmouse.resetTimerDuration</code> (default: 1500ms) – More time than this, then it is not a touch event. Scroll, TouchMove and TouchEnd events use this. The block list is cleared.</li>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
<p>The jQuery Mobile <code>vmousemove</code> event handler simulates the "onmousemove" event handler on mobile devices.</p>
<pstyle="font-style: italic;">The idea behind virtualized mouse events is to translate touch events into mouse events to compensate for the missing mouse event triggers. Developers should be aware that these virtualized mouse events will not prevent any synthetic mouse events from being triggered inside the browser after a touch event. If a mouse-type device is used on the system, the virtualized mouse events are dispatched at the same time as the normal mouse events.</p>
<dd><p>The virtual mouse events can also be configured:</p>
<ul>
<li><code>$.vmouse.moveDistanceThreshold</code> (default: 10px) – More than this, then it is a scroll event. The vmousecancel event is called and the TouchMove event is cancelled.</li>
<li><code>$.vmouse.clickDistanceThreshold</code> (default: 10px) – If a vclick event was already captured and is in the block list, then vclicks less than this distance are ignored.</li>
<li><code>$.vmouse.resetTimerDuration</code> (default: 1500ms) – More time than this, then it is not a touch event. Scroll, TouchMove and TouchEnd events use this. The block list is cleared.</li>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
<p>The jQuery Mobile <code>vmouseout</code> event handler simulates the "onmouseout" event handler on mobile devices.</p>
<pstyle="font-style: italic;">The idea behind virtualized mouse events is to translate touch events into mouse events to compensate for the missing mouse event triggers. Developers should be aware that these virtualized mouse events will not prevent any synthetic mouse events from being triggered inside the browser after a touch event. If a mouse-type device is used on the system, the virtualized mouse events are dispatched at the same time as the normal mouse events.</p>
<dd><p>The virtual mouse events can also be configured:</p>
<ul>
<li><code>$.vmouse.moveDistanceThreshold</code> (default: 10px) – More than this, then it is a scroll event. The vmousecancel event is called and the TouchMove event is cancelled.</li>
<li><code>$.vmouse.clickDistanceThreshold</code> (default: 10px) – If a vclick event was already captured and is in the block list, then vclicks less than this distance are ignored.</li>
<li><code>$.vmouse.resetTimerDuration</code> (default: 1500ms) – More time than this, then it is not a touch event. Scroll, TouchMove and TouchEnd events use this. The block list is cleared.</li>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
<p>The jQuery Mobile <code>"vmouseover"</code> event handler simulates the "onmouseover" event handler on mobile devices.</p>
<pstyle="font-style:italic;">The idea behind virtualized mouse events is to translate touch events into mouse events to compensate for the missing mouse event triggers. Developers should be aware that these virtualized mouse events will not prevent any synthetic mouse events from being triggered inside the browser after a touch event. If a mouse-type device is used on the system, the virtualized mouse events are dispatched at the same time as the normal mouse events.</p>
<dd><p>The virtual mouse events can also be configured:</p>
<ul>
<li><code>$.vmouse.moveDistanceThreshold</code> (default: 10px) – More than this, then it is a scroll event. The vmousecancel event is called and the TouchMove event is cancelled.</li>
<li><code>$.vmouse.clickDistanceThreshold</code> (default: 10px) – If a vclick event was already captured and is in the block list, then vclicks less than this distance are ignored.</li>
<li><code>$.vmouse.resetTimerDuration</code> (default: 1500ms) – More time than this, then it is not a touch event. Scroll, TouchMove and TouchEnd events use this. The block list is cleared.</li>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
<p>The jQuery Mobile <code>"vmouseup"</code> event handler simulates the "onmouseup" event handler on mobile devices.</p>
<pstyle="font-style:italic;">The idea behind virtualized mouse events is to translate touch events into mouse events to compensate for the missing mouse event triggers. Developers should be aware that these virtualized mouse events will not prevent any synthetic mouse events from being triggered inside the browser after a touch event. If a mouse-type device is used on the system, the virtualized mouse events are dispatched at the same time as the normal mouse events.</p>
<dd><p>The virtual mouse events can also be configured:</p>
<ul>
<li><code>$.vmouse.moveDistanceThreshold</code> (default: 10px) – More than this, then it is a scroll event. The vmousecancel event is called and the TouchMove event is cancelled.</li>
<li><code>$.vmouse.clickDistanceThreshold</code> (default: 10px) – If a vclick event was already captured and is in the block list, then vclicks less than this distance are ignored.</li>
<li><code>$.vmouse.resetTimerDuration</code> (default: 1500ms) – More time than this, then it is not a touch event. Scroll, TouchMove and TouchEnd events use this. The block list is cleared.</li>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>You can improve the load time of your page by providing the markup that the <placeholdername="name"/> widget would normally create during its initialization.</p>
<p>By providing this markup yourself, and by indicating that you have done so by setting the attribute <code>data-enhanced="true"</code>, you instruct the <placeholdername="name"/> widget to skip these DOM manipulations during instantiation and to assume that the required DOM structure is already present.</p>
<p>When you provide such pre-rendered markup you must also set all the classes that the framework would normally set, and you must also set all data attributes whose values differ from the default to indicate that the pre-rendered markup reflects the non-default value of the corresponding widget option.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Seting this option to <code>true</code> indicates that other widgets options have default values and causes jQuery Mobile's widget autoenhancement code to omit the step where it retrieves option values from data attributes. This can improve startup time.
<p>This option is also exposed as a data attribute: <code>data-defaults="true"</code>.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>The default <code>initSelector</code> for the <placeholdername="name" /> widget is:</p>
<pre><code>
"<placeholdername="init-selector"/>"
</code></pre>
<divclass="warning">
<p><strong>Note:</strong> This option is deprecated in 1.4.0 and will be removed in 1.5.0.<br />
As of jQuery Mobile 1.4.0, the <code>initSelector</code> is no longer a widget option. Instead, it is declared directly on the widget prototype. Thus, you may specify a custom value by handling the <code>mobileinit</code> event and overwriting the <code>initSelector</code> on the prototype:</p>
<p><strong>Note:</strong> Remember to attach the <code>mobileinit</code> handler after you have loaded jQuery, but before you load jQuery Mobile, because the event is triggered as part of jQuery Mobile's loading process.</p>
<p>The value of this option is a jQuery selector string. The framework selects elements based on the value of this option and instantiates <placeholdername="name" /> widgets on each of the resulting list of elements.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<desc>If set to <code>true</code>, this will display a more compact version of the <placeholdername="name"/> that uses less vertical height by applying the <code>ui-mini</code> class to the outermost element of the <placeholdername="name"/> widget.
<p>This option is also exposed as a data attribute: <code>data-mini="true"</code>.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<optionname="theme"default="null, inherited from parent"example-value='"b"'>
<desc>
Sets the color scheme (swatch) for the <placeholdername="name" /> widget. It accepts a single letter from a-z that maps to the swatches included in your theme.
<p>Possible values: swatch letter (a-z).</p>
<p>This option is also exposed as a data attribute: <code>data-theme="b"</code>.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"excerpt": "A list of the icons provided by jQuery Mobile.",
"termSlugs": {
"category": ["reference"]
"category": ["jqmicons"]
}
}</script>
<h2>Icons</h2>
<p>jQuery Mobile provides a number of icons that can be used by applying a <code>data-icon</code> attribute to <ahref="button/#option-icon">buttons</a>, <ahref="navbar/#option-iconPos">navbar elements</a>, <ahref="listview/#option-icon">linked list items</a> and <ahref="selectmenu/#option-icon">select menus</a>, <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> to <ahref="collapsible/#option-collapsedIcon">collapsibles</a> and <ahref="collapsible-set/#option-collapsedIcon">collapsible-sets</a>, and <code>data-split-icon</code> to split <ahref="listview/#option-splitIcon">listviews</a>. The icon name is self-describing. For example, the following will display a button with a home icon:</p>
<p>jQuery Mobile provides a number of icons that can be used by applying a <code>data-icon</code> attribute or a <code>ui-icon-</code> class to a suitable widget.<br />
There is an SVG and PNG image of each icon. By default the SVG icons, that look great on both SD and HD screens, are used. On platforms that don't support SVG the framework falls back to PNG icons. The icon name is self-describing. For example, the following will display a button with a home icon:</p>
<p>The semi-transparent black circle behind the white icon ensures good contrast on any background color so it works well with the jQuery Mobile theming system. Here are examples of the same icons sitting on top of a range of different color swatches with themed buttons.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"excerpt": "A single content area with multiple panels, each associated with a header in a list.",
"termSlugs": {
"category": ["widgets"]
}
}</script>
<p>This widget is imported unchanged from <ahref="http://jqueryui.com/">jQuery UI</a>. Nevertheless, in keeping with jQuery Mobile widget features, the options documented on its jQuery UI API <ahref="http://api.jqueryui.com/tabs/">reference</a> page are also available as <code>data-*</code> attributes.</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>By default, all buttons in the body content are styled as block-level elements so they fill the width of the screen:</p>
<ahref="index.html" data-role="button">Button</a>
<p>However, if you want a more compact button that is only as wide as the text and icons inside, add the <code> data-inline="true"</code> attribute to the button:</p>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters