Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-20 14:20:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' of https://github.com/jquery/jquery-mobile

Browse source
This commit is contained in:
jblas@adobe.com 2011-11-14 09:45:21 -08:00
commit db2782b564
37 changed files with 877 additions and 247 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/structure/jquery.mobile.forms.slider.css
View file

@ -2,7 +2,7 @@ label.ui-slider { font-size: 16px; line-height: 1.4; font-weight: normal; margi
input.ui-slider-input,
.ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; }
select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 66%; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 60%; }
div.ui-slider-switch { width: 99.8%; }
a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }

BIN
css/themes/default/images/icons-18-black.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
css/themes/default/images/icons-36-black.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
css/themes/valencia/images/icons-18-black.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
css/themes/valencia/images/icons-36-black.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
docs/_assets/images/themroller-mobile-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

9
docs/about/platforms.html
View file

@ -24,12 +24,11 @@
<div class="content-primary">
<h2 id="platforms">Platform support in 1.0 RC2</h2>
<p>We're excited to announce that as of 1.0 RC2, we've covered all our target platforms for the project. At this stage, we have broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We're very proud of our commitment to universal accessibility through our broad support for all popular platforms.</p>
<h2 id="platforms">jQuery Mobile Supported Platforms</h2>
<p>jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We're very proud of our commitment to universal accessibility through our broad support for all popular platforms.</p>
<p>Our <a href="http://jquerymobile.com/gbs/">graded support matrix</a> was created over a year ago based on our goals as a project and since that time, we've been refining our grading system based on real-world device testing and the quickly evolving mobile landscape. To provide a quick summary of our browser support in Beta 1, we've created a simple A (full), B (full minus Ajax), C (basic) grade system with notes of the actual devices and versions we've been testing on in our lab.</p>
<p>The visual fidelity of the experience is highly dependent on CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that's the nature of the web. </p>
<p>We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic). The visual fidelity of the experience is highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that's the nature of the web.</p>
<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #74B64A; padding: 5px 0 5px 8px;"><strong> A-grade</strong> - Full enhanced experience with Ajax-based animated page transitions.</h3>
<ul>
<li><strong>Apple iOS 3.2-5.0</strong> - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)</li>

3
docs/api/themes.html
View file

@ -35,6 +35,9 @@
<li>A <strong>simplified icon set</strong> including those most commonly used for mobile, in a sprite to reduce image weight</li>
</ul>
<h2>ThemeRoller</h2>
<a href="http://www.jquerymobile.com/themeroller" rel="external"><img src="../_assets/images/themroller-mobile-logo.png" width="250" style="float:right; margin-left:25px;" alt="Themroller Mobile Logo"></a>
The easiest way to create custom themes is with the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller tool</a>. It allows you to build a theme, then download a custom CSS file, ready to be dropped into your project.
<h2>Themes &amp; swatches</h2>

2
docs/buttons/buttons-types.html
View file

@ -33,7 +33,7 @@
</ul>
<p>Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (<code>a</code> elements) to mark up navigation buttons, and <code>input</code> or <code>button</code> elements for form submission.</p>
<p>Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (<code>a</code> elements) to mark up navigation buttons, and <code>input</code> or <code>button</code> elements for form submission. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to buttons.</p>
<h2>Styling links as buttons</h2>

2
docs/content/content-collapsible-set.html
View file

@ -24,7 +24,7 @@
<div class="content-primary">
<h2>Collapsible set markup</h2>
<p>Collapsible sets start with the exact same markup as <a href="content-collapsible.html">individual collapsibles</a>. By adding a parent wrapper with a <code> data-role="collapsible-set"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.</p>
<p>Collapsible sets start with the exact same markup as <a href="content-collapsible.html">individual collapsibles</a>. By adding a parent wrapper with a <code> data-role="collapsible-set"</code> attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsible sets.</p>
<p>By default, all the sections will be collapsed. To set a section to be open when the page loads, add the <code> data-collapsed="false"</code> attribute to the heading of the section you want expanded.</p>
<pre><code>

4
docs/content/content-collapsible.html
View file

@ -24,9 +24,7 @@
<div class="content-primary">
<h2>Collapsible content markup</h2>
<p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
<p>Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible.</p>
<p>To create a collapsible block of content, create a container and add the <code> data-role="collapsible"</code> attribute. Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to collapsibles.</p>
<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>

43
docs/forms/api-forms.html
View file

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Forms API</title>
<link rel="stylesheet" href="../../css/themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Form API</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="c">
<h2>Dependencies</h2>
<p>To be documented</p>
<h2>Options</h2>
<p>To be documented</p>
<h2>Methods</h2>
<p>To be documented</p>
<h2>Known Issues</h2>
<p>To be documented</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

2
docs/forms/checkboxes/index.html
View file

@ -36,7 +36,7 @@
<p>Checkboxes are used to provide a list of options where more than one can be selected. Traditional desktop checkboxes are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the checkboxes so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
<p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. </p>
<p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to checkboxes.</p>
<p>To create a single checkbox, add an <code>input</code> with a <code>type="checkbox"</code> attribute and a corresponding <code>label</code>. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated.</p>

2
docs/forms/radiobuttons/index.html
View file

@ -36,7 +36,7 @@
<p>Radio buttons are used to provide a list of options where only a single items can be selected. Traditional desktop radio buttons are not optimized for touch input so in jQuery Mobile, we style the <code>label</code> for the radio buttons so they are larger and look clickable. A custom set of icons are added to the label to provide additional visual feedback.</p>
<p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. </p>
<p>Both the radio and checkbox controls below use standard input/label markup, but are styled to be more touch-friendly. The styled control you see is actually the label element, which sits over the real input, so if images fail to load, you'll still have a functional control. In most browsers, clicking the label automatically triggers a click on the input, but we've had to trigger the update manually for a few mobile browsers that don't do this natively. On the desktop, these controls are keyboard and screen-reader accessible. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to radio buttons.</p>
<h2>Vertically grouped radio buttons</h2>

3
docs/forms/search/index.html
View file

@ -34,7 +34,8 @@
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an <code>input</code> with a <code>type="search"</code> attribute in your markup. </p>
<p>Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an <code>input</code> with a <code>type="search"</code> attribute in your markup. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to search inputs.</p>
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
<pre><code>

2
docs/forms/selects/index.html
View file

@ -34,7 +34,7 @@
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<p>The select menu is based on a native <code>select</code> 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.</p>
<p>The select menu is based on a native <code>select</code> 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. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to selects.</p>
<p>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 open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value.</p>

12
docs/forms/slider/index.html
View file

@ -33,12 +33,12 @@
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<p>To add a slider widget to your page, use a standard <code>input</code> with the <code>type="range"</code> attribute. The input's <code>value</code> is used to configure the starting position of the handle and the value populated in the text input. Specify <code>min</code> and <code>max</code> attribute values to set the slider's range. The framework will parse these attributes to configure the slider widget. </p>
<p>To add a slider widget to your page, use a standard <code>input</code> with the <code>type="range"</code> attribute. The input's <code>value</code> is used to configure the starting position of the handle and the value is populated in the text input. Specify <code>min</code> and <code>max</code> attribute values to set the slider's range. The framework will parse these attributes to configure the slider widget. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to sliders.</p>
<p>As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.</p>
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
<p>The framework will find all <code>inputs</code> elements with a <code>type="range"</code> and automatically enhance them into a slider with an accompanying input, no need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of this input into a slider, add <code>data-role="none"</code> attribute to the <code>input</code>.</p> and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
<p>The framework will find all <code>input</code> elements with a <code>type="range"</code> and automatically enhance them into a slider with an accompanying input, no need to apply a <code>data-role</code> attribute. To prevent the automatic enhancement of this input into a slider, add <code>data-role="none"</code> attribute to the <code>input</code> and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
<pre><code>
&lt;label for=&quot;slider-0&quot;&gt;Input slider:&lt;/label&gt;
@ -59,13 +59,13 @@
<strong>&lt;/div&gt;
</strong></code></pre>
<p>The slider is now be is displayed like this:</p>
<p>The slider is now displayed like this:</p>
<div data-role="fieldcontain">
<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="25" min="0" max="100" />
</div>
<p>Sliders also respond to key commands. Right Arrow, Up Arrow, and Page Up keys increase the value; Left Arrow, Down Arrow, and Page Down keys decrease it. To move the slider to its minimum or maximum value, use the Home or End key, respectively.</p>
<p>Sliders also respond to key commands. Right Arrow, Up Arrow and Page Up keys increase the value; Left Arrow, Down Arrow and Page Down keys decrease it. To move the slider to its minimum or maximum value, use the Home or End key, respectively.</p>
<h2>Calling the slider plugin</h2>
@ -82,14 +82,14 @@ $('input').slider();
<pre><code>
&lt;div data-role=&quot;fieldcontain&quot;&gt;
&lt;label for=&quot;slider-2&quot;&gt;Input slider:&lt;/label&gt;
&lt;input type=&quot;range&quot; name=&quot;slider-2&quot; id=&quot;slider-1&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot; <strong>data-theme=&quot;a&quot; data-track-theme=&quot;b&quot;</strong> /&gt;
&lt;input type=&quot;range&quot; name=&quot;slider-2&quot; id=&quot;slider-2&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot; <strong>data-theme=&quot;a&quot; data-track-theme=&quot;b&quot;</strong> /&gt;
&lt;/div&gt;
</code></pre>
<p>This will produce a themed slider:</p>
<div data-role="fieldcontain">
<label for="slider-2">Input slider:</label>
<input type="range" name="slider-2" id="slider-1" value="25" min="0" max="100" data-theme="a" data-track-theme="b" />
<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" data-theme="a" data-track-theme="b" />
</div>
</form>
</div><!--/content-primary -->

2
docs/forms/switch/index.html
View file

@ -35,7 +35,7 @@
<p>A binary "flip" switch is a common UI element on mobile devices that is used for binary on/off or true/false data input. You can either drag the flip handle like a slider or tap one side of the switch.</p>
<p>To create a flip toggle, start with a <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options accordingly.</p>
<p>To create a flip toggle, start with a <code>select</code> with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options accordingly. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to flip switches.</p>
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>

2
docs/forms/textinputs/index.html
View file

@ -34,7 +34,7 @@
<li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>
<p>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.</p>
<p>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. View the <a href="../../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to text inputs.</p>
<h2>Text inputs</h2>
<p>To collect standard alphanumeric text, use an <code>input</code> with a <code>type="text"</code> attribute. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>

28
docs/lists/api-lists.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Lists API</title>
<link rel="stylesheet" href="../../css/themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>List API</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

14
docs/lists/docs-lists.html
View file

@ -23,7 +23,8 @@
<div data-role="content">
<div class="content-primary">
<h2>Basic linked lists</h2>
<p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. Here is the HTML markup for a basic linked list.</p>
<p>A list view is coded as a simple unordered list containing linked list items with a <code> data-role="listview"</code> attribute. jQuery Mobile will apply all the necessary styles to transform the list into a mobile-friendly list view with right arrow indicator that fills the full width of the browser window. When you tap on the list item, the framework will trigger a click on the first link inside the list item, issue an AJAX request for the URL in the link, create the new page in the DOM, then kick off a page transition. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to listviews.</p>
<p>Here is the HTML markup for a basic linked list.</p>
<pre><code>
&lt;ul data-role=&quot;listview&quot; data-theme=&quot;g&quot;&gt;
@ -47,7 +48,7 @@
<a href="lists-ol.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Numbered list example</a>
<h2>Read-only lists</h2>
<p>List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch (flat white in the default theme) and sets the text size to a smaller size than the clickable lists to save a bit of space.</p>
<p>List views can also be used to display a non-interactive list of items, usually as an inset list. This list is built from an unordered or ordered list that don't have linked list items. The framework defaults to styling these list with the "c" theme swatch and sets the text size to a smaller size than the clickable lists to save a bit of space.</p>
<a href="lists-readonly-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Read-only list example</a>
@ -101,10 +102,15 @@ function( text, searchValue ){
<a href="lists-inset.html" data-role="button" data-icon="arrow-r" data-iconpos="right">Inset list example</a>
<h2>Calling the listview plugin</h2>
<p>You can directly call the listview plugin on any selector, just like any jQuery plugin:</p>
<code>$('#mylist').listview();</code>
<h2>Updating lists</h2>
<p>If you add items to a listview, you'll need to call the <code>refresh()</code> method on it to update the styles and create any nested lists that are added. For example, <code>$('ul').listview('refresh');</code></p>
<p>If you add items to a listview, you'll need to call the <code>refresh()</code> method on it to update the styles and create any nested lists that are added. For example:</p>
<code>$('#mylist').listview('refresh');</code>
<p>We're currently working on a few improvements to the refresh method, so keep your eye on Github for updates.</p>
<p>Note that the <code>refresh()</code> method only affects <strong>new nodes</strong> appended to a list. This is done for performance reasons. Any list items already enhanced will be ignored by the refresh process. This means that if you change the contents or attributes on an already enhanced list item, these won't be reflected. If you want a list item to be updated, replace it with fresh markup before calling refresh. </p>
</div><!--/content-primary -->

2
docs/lists/lists-themes.html
View file

@ -56,7 +56,7 @@
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li data-theme="a">Trash <span class="ui-li-count">34</span></a></li>
<li data-theme="a"><a href="index.html">Trash <span class="ui-li-count">34</span></a></li>
</ul>
<h2>Theming dividers</h2>

2
docs/pages/page-anatomy.html
View file

@ -57,7 +57,7 @@
<p>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 a 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. </p>
<h2>Inside the body: Pages</h2>
<p>Inside the <code>&lt;body&gt;</code> tag, each view or "page" on the mobile device is identified with an element (usually a <code>div</code>) with the <code> data-role="page"</code> attribute:</p>
<p>Inside the <code>&lt;body&gt;</code> tag, each view or "page" on the mobile device is identified with an element (usually a <code>div</code>) with the <code> data-role="page"</code> attribute. View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to pages.</p>
<div class="highlight">
<pre><span class="nt">&lt;div</span> <span class="na">data-role=</span><span class="s">"page"</span><span class="nt">&gt;</span>

114
docs/pages/pages-themes.html
View file

@ -21,7 +21,18 @@
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<div class="content-primary">
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="pages-themes.html" data-role="button" data-transition="fade" class="ui-btn-active">Theme Overview</a></li>
<li><a href="pages-themes/theme-a.html" data-role="button" data-transition="fade">A</a></li>
<li><a href="pages-themes/theme-b.html" data-role="button" data-transition="fade">B</a></li>
<li><a href="pages-themes/theme-c.html" data-role="button" data-transition="fade">C</a></li>
<li><a href="pages-themes/theme-d.html" data-role="button" data-transition="fade">D</a></li>
<li><a href="pages-themes/theme-e.html" data-role="button" data-transition="fade">E</a></li>
</ul>
<h2>Page Theming</h2>
<p>jQuery Mobile has a rich <a href="../api/themes.html">theming system</a> that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.</p>
@ -33,59 +44,27 @@
<div data-role="header">
<h1>Default Theme</h1>
</div>
<div class="ui-bar ui-bar-c">
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" data-icon="gear" data-role="button" data-inline="true">Tools</a>
<a href="#" data-icon="star" data-role="button" data-inline="true">Like</a>
<a href="#" data-icon="refresh" data-role="button" data-inline="true">Refresh</a>
</div><!-- /controlgroup -->
</div>
<div class="ui-body ui-body-c">
<h3>Default Theme Content Header</h3>
<p>This is the default content color swatch and a preview of a <a href="#" class="ui-link">link</a>.</p>
<label for="slider1">Input slider:</label>
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" />
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Cache settings:</legend>
<input type="radio" name="radio-choice-z1" id="radio-choice-y1" value="on" checked="checked" />
<label for="radio-choice-y1">On</label>
<input type="radio" name="radio-choice-z1" id="radio-choice-z1" value="off" />
<label for="radio-choice-z1">Off</label>
</fieldset>
<a href="#" data-role="button" data-inline="true">Button</a>
</div>
<div class="ui-bar ui-bar-a">
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
</div><!-- /controlgroup -->
</div>
<p>And each of the five "swatches" applies its style consistently across all page elements, as shown below:</p>
<h2>Swatch A</h2>
<div data-role="header" data-position="inline">
<h1>Header A</h1>
</div>
<div class="ui-body ui-body-a">
<h3>Header</h3>
<p>This is content color swatch "A" and a preview of a <a href="#" class="ui-link">link</a>.</p>
<label for="slider1">Input slider:</label>
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="a" />
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Cache settings:</legend>
<input type="radio" name="radio-choice-a1" id="radio-choice-a1" value="on" checked="checked" />
<label for="radio-choice-a1">On</label>
<input type="radio" name="radio-choice-a1" id="radio-choice-b1" value="off" />
<label for="radio-choice-b1">Off</label>
</fieldset>
<a href="#" data-role="button" data-inline="true">Button</a>
</div>
<div class="ui-bar ui-bar-a">
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
</div><!-- /controlgroup -->
</div>
<h2>Swatch B</h2>
@ -95,22 +74,8 @@
<div class="ui-body ui-body-b">
<h3>Header</h3>
<p>This is content color swatch "B" and a preview of a <a href="#" class="ui-link">link</a>.</p>
<label for="slider1">Input slider:</label>
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="b" />
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Cache settings:</legend>
<input type="radio" name="radio-choice-a2" id="radio-choice-a2" value="on" checked="checked" />
<label for="radio-choice-a2">On</label>
<input type="radio" name="radio-choice-a2" id="radio-choice-b2" value="off" />
<label for="radio-choice-b2">Off</label>
</fieldset>
<a href="#" data-role="button" data-inline="true">Button</a>
</div>
<div class="ui-bar ui-bar-b">
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
</div><!-- /controlgroup -->
</div>
<h2>Swatch C</h2>
<div data-role="header" data-theme="c">
@ -119,23 +84,9 @@
<div class="ui-body ui-body-c">
<h3>Header</h3>
<p>This is content color swatch "C" and a preview of a <a href="#" class="ui-link">link</a>.</p>
<label for="slider1">Input slider:</label>
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="c" />
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Cache settings:</legend>
<input type="radio" name="radio-choice-a3" id="radio-choice-a3" value="on" checked="checked" />
<label for="radio-choice-a3">On</label>
<input type="radio" name="radio-choice-a3" id="radio-choice-b3" value="off" />
<label for="radio-choice-b3">Off</label>
</fieldset>
<a href="#" data-role="button" data-inline="true">Button</a>
</div>
<div class="ui-bar ui-bar-c">
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
</div><!-- /controlgroup -->
</div>
<h2>Swatch D</h2>
<div data-role="header" data-theme="d">
<h1>Header D</h1>
@ -143,22 +94,8 @@
<div class="ui-body ui-body-d">
<h3>Header</h3>
<p>This is content color swatch "D" and a preview of a <a href="#" class="ui-link">link</a>.</p>
<label for="slider1">Input slider:</label>
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="d" />
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Cache settings:</legend>
<input type="radio" name="radio-choice-a4" id="radio-choice-a4" value="on" checked="checked" />
<label for="radio-choice-a4">On</label>
<input type="radio" name="radio-choice-a4" id="radio-choice-b4" value="off" />
<label for="radio-choice-b4">Off</label>
</fieldset>
<a href="#" data-role="button" data-inline="true">Button</a>
</div>
<div class="ui-bar ui-bar-d">
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
</div><!-- /controlgroup -->
</div>
<h2>Swatch E</h2>
<div data-role="header" data-theme="e">
@ -167,24 +104,9 @@
<div class="ui-body ui-body-e">
<h3>Header</h3>
<p>This is content color swatch "E" and a preview of a <a href="#" class="ui-link">link</a>.</p>
<label for="slider1">Input slider:</label>
<input type="range" name="slider1" id="slider1" value="50" min="0" max="100" data-theme="e" />
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend>Cache settings:</legend>
<input type="radio" name="radio-choice-a5" id="radio-choice-a5" value="on" checked="checked" />
<label for="radio-choice-a5">On</label>
<input type="radio" name="radio-choice-a5" id="radio-choice-b5" value="off" />
<label for="radio-choice-b5">Off</label>
</fieldset>
<a href="#" data-role="button" data-inline="true">Button</a>
</div>
<div class="ui-bar ui-bar-e">
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a><a href="#" data-inline="true" data-role="button">Button</a>
</div><!-- /controlgroup -->
</div>
</div><!--/content-primary -->
<div class="content-secondary">

161
docs/pages/pages-themes/theme-a.html Normal file
View file

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Theming Pages</title>
<link rel="stylesheet" href="../../../css/themes/default/" />
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
<script src="../../../js/jquery.js"></script>
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../../_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior" data-theme="a">
<div data-role="header">
<h1>Theming pages</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
<li><a href="theme-a.html" data-role="button" data-transition="fade" class="ui-btn-active">A</a></li>
<li><a href="theme-b.html" data-role="button" data-transition="fade">B</a></li>
<li><a href="theme-c.html" data-role="button" data-transition="fade">C</a></li>
<li><a href="theme-d.html" data-role="button" data-transition="fade">D</a></li>
<li><a href="theme-e.html" data-role="button" data-transition="fade">E</a></li>
</ul>
<h2>Theme A Sample Page</h2>
<p>This is an example of <code>data-theme="a"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
<div data-role="fieldcontain">
<label for="name-a">Text Input:</label>
<input type="text" name="name" id="name-a" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-a">Flip switch:</label>
<select name="switch-a" id="switch-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-a">Slider:</label>
<input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
<label for="checkbox-6a">b</label>
<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
<label for="checkbox-7a"><em>i</em></label>
<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
<label for="checkbox-8a">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
<label for="radio-choice-1a">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
<label for="radio-choice-2a">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
<label for="radio-choice-3a">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
<label for="radio-choice-4a">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-a" class="select">Choose shipping method:</label>
<select name="select-choice-a" id="select-choice-a">
<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>
</div>
<h2>Collapsible Sets</h2>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
</div>
<h2>Inset List</h2>
<ul data-role="listview" data-inset="true">
<li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="a" data-dividertheme="a">
<li data-role="list-divider">Pages &amp; Dialogs</li>
<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
<li><a href="../page-titles.html">Page titles</a></li>
<li><a href="../page-links.html">Linking pages</a></li>
<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
<li><a href="../page-dialogs.html">Dialogs</a></li>
<li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
<li><a href="../page-scripting.html">Scripting pages</a></li>
<li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

161
docs/pages/pages-themes/theme-b.html Normal file
View file

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Theming Pages</title>
<link rel="stylesheet" href="../../../css/themes/default/" />
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
<script src="../../../js/jquery.js"></script>
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../../_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior" data-theme="b">
<div data-role="header">
<h1>Theming pages</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
<li><a href="theme-a.html" data-role="button" data-transition="fade">A</a></li>
<li><a href="theme-b.html" data-role="button" data-transition="fade" class="ui-btn-active">B</a></li>
<li><a href="theme-c.html" data-role="button" data-transition="fade">C</a></li>
<li><a href="theme-d.html" data-role="button" data-transition="fade">D</a></li>
<li><a href="theme-e.html" data-role="button" data-transition="fade">E</a></li>
</ul>
<h2>Theme B Sample Page</h2>
<p>This is an example of <code>data-theme="b"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
<div data-role="fieldcontain">
<label for="name-a">Text Input:</label>
<input type="text" name="name" id="name-a" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-a">Flip switch:</label>
<select name="switch-a" id="switch-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-a">Slider:</label>
<input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
<label for="checkbox-6a">b</label>
<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
<label for="checkbox-7a"><em>i</em></label>
<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
<label for="checkbox-8a">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
<label for="radio-choice-1a">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
<label for="radio-choice-2a">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
<label for="radio-choice-3a">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
<label for="radio-choice-4a">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-a" class="select">Choose shipping method:</label>
<select name="select-choice-a" id="select-choice-a">
<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>
</div>
<h2>Collapsible Sets</h2>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
</div>
<h2>Inset List</h2>
<ul data-role="listview" data-inset="true">
<li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="b">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="b" data-dividertheme="b">
<li data-role="list-divider">Pages &amp; Dialogs</li>
<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
<li><a href="../page-titles.html">Page titles</a></li>
<li><a href="../page-links.html">Linking pages</a></li>
<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
<li><a href="../page-dialogs.html">Dialogs</a></li>
<li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
<li><a href="../page-scripting.html">Scripting pages</a></li>
<li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

161
docs/pages/pages-themes/theme-c.html Normal file
View file

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Theming Pages</title>
<link rel="stylesheet" href="../../../css/themes/default/" />
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
<script src="../../../js/jquery.js"></script>
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../../_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior" data-theme="c">
<div data-role="header" data-theme="c">
<h1>Theming pages</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
<li><a href="theme-a.html" data-role="button" data-transition="fade">A</a></li>
<li><a href="theme-b.html" data-role="button" data-transition="fade">B</a></li>
<li><a href="theme-c.html" data-role="button" data-transition="fade" class="ui-btn-active">C</a></li>
<li><a href="theme-d.html" data-role="button" data-transition="fade">D</a></li>
<li><a href="theme-e.html" data-role="button" data-transition="fade">E</a></li>
</ul>
<h2>Theme C Sample Page</h2>
<p>This is an example of <code>data-theme="c"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
<div data-role="fieldcontain">
<label for="name-a">Text Input:</label>
<input type="text" name="name" id="name-a" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-a">Flip switch:</label>
<select name="switch-a" id="switch-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-a">Slider:</label>
<input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
<label for="checkbox-6a">b</label>
<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
<label for="checkbox-7a"><em>i</em></label>
<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
<label for="checkbox-8a">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
<label for="radio-choice-1a">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
<label for="radio-choice-2a">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
<label for="radio-choice-3a">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
<label for="radio-choice-4a">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-a" class="select">Choose shipping method:</label>
<select name="select-choice-a" id="select-choice-a">
<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>
</div>
<h2>Collapsible Sets</h2>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
</div>
<h2>Inset List</h2>
<ul data-role="listview" data-inset="true">
<li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="c" data-content-theme="c">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="c">
<li data-role="list-divider">Pages &amp; Dialogs</li>
<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
<li><a href="../page-titles.html">Page titles</a></li>
<li><a href="../page-links.html">Linking pages</a></li>
<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
<li><a href="../page-dialogs.html">Dialogs</a></li>
<li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
<li><a href="../page-scripting.html">Scripting pages</a></li>
<li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

161
docs/pages/pages-themes/theme-d.html Normal file
View file

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Theming Pages</title>
<link rel="stylesheet" href="../../../css/themes/default/" />
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
<script src="../../../js/jquery.js"></script>
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../../_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Theming pages</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
<li><a href="theme-a.html" data-role="button" data-transition="fade">A</a></li>
<li><a href="theme-b.html" data-role="button" data-transition="fade">B</a></li>
<li><a href="theme-c.html" data-role="button" data-transition="fade">C</a></li>
<li><a href="theme-d.html" data-role="button" data-transition="fade" class="ui-btn-active">D</a></li>
<li><a href="theme-e.html" data-role="button" data-transition="fade">E</a></li>
</ul>
<h2>Theme D Sample Page</h2>
<p>This is an example of <code>data-theme="d"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
<div data-role="fieldcontain">
<label for="name-a">Text Input:</label>
<input type="text" name="name" id="name-a" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-a">Flip switch:</label>
<select name="switch-a" id="switch-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-a">Slider:</label>
<input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
<label for="checkbox-6a">b</label>
<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
<label for="checkbox-7a"><em>i</em></label>
<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
<label for="checkbox-8a">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
<label for="radio-choice-1a">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
<label for="radio-choice-2a">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
<label for="radio-choice-3a">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
<label for="radio-choice-4a">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-a" class="select">Choose shipping method:</label>
<select name="select-choice-a" id="select-choice-a">
<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>
</div>
<h2>Collapsible Sets</h2>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
</div>
<h2>Inset List</h2>
<ul data-role="listview" data-inset="true">
<li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Pages &amp; Dialogs</li>
<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
<li><a href="../page-titles.html">Page titles</a></li>
<li><a href="../page-links.html">Linking pages</a></li>
<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
<li><a href="../page-dialogs.html">Dialogs</a></li>
<li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
<li><a href="../page-scripting.html">Scripting pages</a></li>
<li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="d">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

161
docs/pages/pages-themes/theme-e.html Normal file
View file

@ -0,0 +1,161 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Theming Pages</title>
<link rel="stylesheet" href="../../../css/themes/default/" />
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
<script src="../../../js/jquery.js"></script>
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../../_assets/js/jqm-docs.js"></script>
<script src="../../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior" data-theme="e">
<div data-role="header" data-theme="e">
<h1>Theming pages</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
<li><a href="../pages-themes.html" data-role="button" data-transition="fade">Theme Overview</a></li>
<li><a href="theme-a.html" data-role="button" data-transition="fade">A</a></li>
<li><a href="theme-b.html" data-role="button" data-transition="fade">B</a></li>
<li><a href="theme-c.html" data-role="button" data-transition="fade">C</a></li>
<li><a href="theme-d.html" data-role="button" data-transition="fade">D</a></li>
<li><a href="theme-e.html" data-role="button" data-transition="fade" class="ui-btn-active">E</a></li>
</ul>
<h2>Theme E Sample Page</h2>
<p>This is an example of <code>data-theme="e"</code> applied to the same element as <code>data-role="page"</code>, showing how the theme is inherited by widgets throughout the page.</p>
<div data-role="fieldcontain">
<label for="name-a">Text Input:</label>
<input type="text" name="name" id="name-a" value="" />
</div>
<div data-role="fieldcontain">
<label for="switch-a">Flip switch:</label>
<select name="switch-a" id="switch-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider-a">Slider:</label>
<input type="range" name="slider" id="slider-a" value="0" min="0" max="100" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6a" id="checkbox-6a" class="custom" />
<label for="checkbox-6a">b</label>
<input type="checkbox" name="checkbox-7a" id="checkbox-7a" class="custom" />
<label for="checkbox-7a"><em>i</em></label>
<input type="checkbox" name="checkbox-8a" id="checkbox-8a" class="custom" />
<label for="checkbox-8a">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1a" value="choice-1" />
<label for="radio-choice-1a">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2a" value="choice-2" />
<label for="radio-choice-2a">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3a" value="choice-3" />
<label for="radio-choice-3a">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4a" value="choice-4" />
<label for="radio-choice-4a">Lizard</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="select-choice-a" class="select">Choose shipping method:</label>
<select name="select-choice-a" id="select-choice-a">
<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>
</div>
<h2>Collapsible Sets</h2>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
</div>
</div>
<h2>Inset List</h2>
<ul data-role="listview" data-inset="true">
<li><a href="index.html">Inbox <span class="ui-li-count" >12</span></a></li>
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="e">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="e" data-dividertheme="e">
<li data-role="list-divider">Pages &amp; Dialogs</li>
<li><a href="../page-anatomy.html">Anatomy of a page</a></li>
<li><a href="../page-template.html" data-ajax="false">Single page template</a></li>
<li><a href="../multipage-template.html" data-ajax="false">Multi-page template</a></li>
<li><a href="../page-titles.html">Page titles</a></li>
<li><a href="../page-links.html">Linking pages</a></li>
<li><a href="../page-transitions.html" data-ajax="false">Page transitions</a></li>
<li><a href="../page-dialogs.html">Dialogs</a></li>
<li><a href="../page-cache.html">Prefetching &amp; caching pages</a></li>
<li><a href="../page-navmodel.html">Ajax, hashes &amp; history</a></li>
<li><a href="../page-dynamic.html">Dynamically Injecting Pages</a></li>
<li><a href="../page-scripting.html">Scripting pages</a></li>
<li data-theme="a"><a href="../pages-themes.html">Theming pages</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="e">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

4
docs/pages/phonegap.html
View file

@ -26,9 +26,9 @@
<h2>Building PhoneGap apps with jQuery Mobile</h2>
<p><a href="http://phonegap.com/" rel="external">PhoneGap</a> is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores. Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView (a chromeless browser, referred to hereafter as a webview). PhoneGap commonly used in conjunction with to jQuery Mobile so we wanted to offer a few things to keep in mind to avoid common issues. </p>
<p><a href="http://phonegap.com/" rel="external">PhoneGap</a> is an HTML5 app platform that allows developers to author native applications with web technologies and get access to APIs and app stores. Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView (a chromeless browser, referred to hereafter as a webview). Since PhoneGap is frequently used in conjunction with jQuery Mobile, we wanted to offer a few tips and recommendations to help you get staretd. </p>
<p>First, your initial application document is loaded by the PhoneGap application by a file:// URL. This means that if you want to pull in pages from your company's remote server (phone home) you will have to refer to them with absolute URLs to your server. Because your document originates from a file:// URL, loading pages or assets from your remote server is considered a cross-domain request. </p>
<p>The initial application document is loaded by the PhoneGap application by a local file:// URL. This means that if you want to pull in pages from your company's remote server (phone home) you will have to refer to them with absolute URLs to your server. Because your document originates from a file:// URL, loading pages or assets from your remote server is considered a cross-domain request that can be blocked in certain scenarios. </p>
<p>Your ability to access cross-domain pages from within a Phone Gap jQuery Mobile application is controlled by two key things: <code>$.support.cors</code> and <code>$.mobile.allowCrossDomainPages</code>, and can also be influenced by the white list feature in later builds of PhoneGap.</p>

40
docs/toolbars/api-bars.html
View file

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Toolbars API</title>
<link rel="stylesheet" href="../../css/themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script src="../../js/jquery.js"></script>
<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="../_assets/js/jqm-docs.js"></script>
<script src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Toolbar API</h1>
</div><!-- /header -->
<div data-role="content">
<h2>Dependencies</h2>
<p>To be documented</p>
<h2>Options</h2>
<p>To be documented</p>
<h2>Methods</h2>
<p>To be documented</p>
<h2>Known Issues</h2>
<p>To be documented</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

2
docs/toolbars/docs-bars.html
View file

@ -32,6 +32,8 @@
</ul>
<p>It's very common to have a horizontal navigation or tab bar inside the header and/or footer; jQuery Mobile includes a <a href="docs-navbar.html"><strong>navbar widget </strong></a> that turns an unordered list of links into a horizontal button bar, which works well in these instances.</p>
<p>View the <a href="../api/data-attributes.html">data- attribute reference</a> to see all the possible attributes you can add to toolbars.</p>
<h2>Toolbar positioning options</h2>

4
js/jquery.mobile.listview.filter.js
View file

@ -45,7 +45,7 @@ $( ":jqmData(role='listview')" ).live( "listviewcreate", function() {
if ( val.length < lastval.length || change.length != ( val.length - lastval.length ) ) {
// Removed chars or pasted something totaly different, check all items
// Removed chars or pasted something totally different, check all items
listItems = list.children();
} else {
@ -75,7 +75,7 @@ $( ":jqmData(role='listview')" ).live( "listviewcreate", function() {
item.toggleClass( "ui-filter-hidequeue" , true );
} else {
// There"s a shown item in the bucket
// There's a shown item in the bucket
childItems = true;
}
}

6
js/jquery.mobile.listview.js
View file

@ -11,7 +11,7 @@ var listCountPerPage = {};
$.widget( "mobile.listview", $.mobile.widget, {
options: {
theme: "c",
theme: null,
countTheme: "c",
headerTheme: "b",
dividerTheme: "b",
@ -161,6 +161,10 @@ $.widget( "mobile.listview", $.mobile.widget, {
if ( counter ) {
$list.find( ".ui-li-dec" ).remove();
}
if ( !o.theme ) {
o.theme = $.mobile.getInheritedTheme( this.element, "c" );
}
for ( var pos = 0, numli = li.length; pos < numli; pos++ ) {
item = li.eq( pos );

3
js/jquery.mobile.page.sections.js
View file

@ -15,6 +15,7 @@ $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", functi
var $page = $( this ),
o = $page.data( "page" ).options,
pageRole = $page.jqmData( "role" ),
pageTheme = o.theme;
$( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this ).each(function() {
@ -73,7 +74,7 @@ $( ":jqmData(role='page'), :jqmData(role='dialog')" ).live( "pagecreate", functi
});
} else if ( role === "content" ) {
if ( contentTheme ) {
if ( contentTheme && pageRole === "dialog" ) {
$this.addClass( "ui-body-" + ( contentTheme ) );
}

4
tests/speed/stats/index.php
View file

@ -15,8 +15,8 @@
FROM stats
WHERE (agent_full like \'%Mobile%\' or agent_full like \'%mobile%\')
and agent like :agent and point like :data_point
GROUP BY agent, agent_version, pathname, point, strftime(\'%Y-%m-%d\', time)
ORDER BY time;
GROUP BY agent, agent_version, pathname, point, time
ORDER BY agent, agent_version, time;
');
$st->execute(array(

6
tests/speed/stats/visualize/visualize.js
View file

@ -20,15 +20,15 @@
$.get("../", searchMap, function(data) {
$.each(data, function( i, avg ) {
var tablename = avg.point + " " + avg.agent + " " + avg.pathname + " " + avg.agent_version,
$table = $( "table > caption:contains(" + tablename + ")");
var tablename = avg.point + " " + avg.agent + " " + avg.agent_version + " " + avg.pathname,
$table = $( "table > caption:contains(" + tablename + ")").parent();
if( !$table.length ) {
$table = $( "<table></table>", {
"data-pathname": avg.pathname,
"data-point": avg.point,
"data-agent": avg.agent,
"data-agent": avg.agent_version
"data-agent-version": avg.agent_version
});
$table.append( "<caption>" + tablename + "</caption>");