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

Added links to the data- attribute reference to key pages, removed old API pages

Browse source
This commit is contained in:
toddparker 2011-11-13 21:13:53 -05:00
parent e86b10ea55
commit 94defe7caf
15 changed files with 15 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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>

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

@ -33,7 +33,7 @@
<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 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. </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>

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>

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

@ -23,7 +23,7 @@
<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. 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>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>

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>

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>