mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-05 05:04:46 +00:00
caught a few more
This commit is contained in:
scottjehl
parent
77ac0f009a
commit
3cae8f8bf0
10 changed files with 25 additions and 25 deletions
|
|
@ -78,7 +78,7 @@
|
|||
<p>Checkboxes can also be used for grouped button sets where more than one button can be selected at once, such as the bold, italic and underline button group seen in word processors. To make a horizontal button set, add the <code> data-jq-type="horizontal"</code> to the <code>fieldset</code>.</p>
|
||||
|
||||
<code>
|
||||
<fieldset data-jq-role="controlgroup" <strong>data-type="horizontal"</strong> data-jq-role="fieldcontain">
|
||||
<fieldset data-jq-role="controlgroup" <strong>data-jq-type="horizontal"</strong> data-jq-role="fieldcontain">
|
||||
</code>
|
||||
|
||||
<p>The framework will float the labels so they sit side-by-side on a line, hide the checkbox icons and only round the left and right edges of the group.</p>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
<h2>Split button lists</h2>
|
||||
<p>In cases where there is more than one possible action per list item, a split button can be used to offer two independently clickable items -- the list item and a small arrow icon in the far right. To make a split list item, simply add a second link inside the <code>li</code> and the framework will add a vertical divider line, style the link as an icon-only arrow button, and sets the <code>title</code> attribute of the link to the text the link for accessibility. </p>
|
||||
<p>You can set the icon for the right split icon by specifying a <code>data-split-icon</code> attribute with the <a href="../buttons/buttons-themes.html">icon name</a> you want. The theme swatch color of the split button can be set by specifying a swatch letter in the <code>data-split-theme</code> attribute</p>
|
||||
<p>You can set the icon for the right split icon by specifying a <code>data-jq-split-icon</code> attribute with the <a href="../buttons/buttons-themes.html">icon name</a> you want. The theme swatch color of the split button can be set by specifying a swatch letter in the <code>data-jq-split-theme</code> attribute</p>
|
||||
|
||||
<a href="lists-split.html" data-jq-role="button" data-jq-icon="arrow-r" data-jq-iconpos="right">Split list example</a>
|
||||
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
|
||||
|
||||
<h2>Search filter</h2>
|
||||
<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. </p>
|
||||
<p>jQuery Mobile provides a very easy way to filter a list with a simple client-side search feature. To make a list filterable, simply add the <code>data-jq-filter="true"</code> attribute to the list. The framework will then append a search box above the list and add the behavior to filter out list items that don't contain the current search string as the user types. </p>
|
||||
|
||||
<a href="lists-search.html" data-jq-role="button" data-jq-icon="arrow-r" data-jq-iconpos="right">Search filter example</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@
|
|||
|
||||
<p>A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a <code> data-jq-role</code> of <code>"page"</code>. Each 'page' block needs a unique ID (<code>id="foo"</code>) that will be used to link internally between 'pages' (<code>href="#foo"</code>). When a link is clicked, the framework will look for an internal 'page' with the ID and transition it into view.</p>
|
||||
|
||||
<p>It's important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a <code>rel="external"</code> or <code>data-ajax="false"</code> to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts.</p>
|
||||
<p>It's important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a <code>rel="external"</code> or <code>data-jq-ajax="false"</code> to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts.</p>
|
||||
<p>For example, a link to a page containing multiple internal pages would look like this:</p>
|
||||
|
||||
<code><a href="multipage.html" rel="external">Multi-page link</a></code>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div data-jq-role="content">
|
||||
|
||||
<p>All standard HTML link types are supported in jQuery Mobile. To make the experience as polished as possible, any links to pages within the same domain will be automatically turned into Ajax requests and displayed with an animated page transition by the framework. </p>
|
||||
<p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax and will cause a full page refresh. If multiple "pages" are contained within a single HTML document, they can be linked by referencing the ID of the page as an anchor (#foo).</p>
|
||||
<p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-jq-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax and will cause a full page refresh. If multiple "pages" are contained within a single HTML document, they can be linked by referencing the ID of the page as an anchor (#foo).</p>
|
||||
<p>All other types of links like <code>mailto:</code> and <code>tel:</code> aren't impacted by the framework and will work as expected. Learn more about the <a href="docs-navmodel.html">linking and navigation model</a> in jQuery Mobile</p>
|
||||
|
||||
<ul data-jq-role="listview" data-jq-inset="true">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<li data-jq-role="list-divider">Links that will refresh the page</li>
|
||||
<li><a href="http://www.jquery.com">External domain</a></li>
|
||||
<li><a href="../../index.html" rel="external">Link with rel="external"</a></li>
|
||||
<li><a href="docs/pages/index.html" data-jq-ajax="false">link with [data-ajax="false"]</a></li>
|
||||
<li><a href="docs/pages/index.html" data-jq-ajax="false">link with [data-jq-ajax="false"]</a></li>
|
||||
<li><a href="../../index.html" target="foo">Link with target="foo"</a></li>
|
||||
<li data-jq-role="list-divider">Email links</li>
|
||||
<li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li>
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@
|
|||
|
||||
<h2>Footer bar structure</h2>
|
||||
|
||||
<p>The <code>footer</code> bar has the same basic structure as the header except it uses the <code>data-role</code> attribute value of <code>footer</code>. </p>
|
||||
<p>The <code>footer</code> bar has the same basic structure as the header except it uses the <code> data-jq-role</code> attribute value of <code>footer</code>. </p>
|
||||
|
||||
<div class="highlight">
|
||||
<pre>
|
||||
<span class="nt"><div</span> <span class="na">data-role=</span><span class="s">"footer"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na"> data-jq-role=</span><span class="s">"footer"</span><span class="nt">></span>
|
||||
<span class="nt"><h4></span>Footer content<span class="nt"></h4></span>
|
||||
<span class="nt"></div></span>
|
||||
</pre>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
<a href="index.html" data-jq-icon="arrow-d">Down</a>
|
||||
</div>
|
||||
|
||||
<p>To group buttons together into a button set, wrap the links in a wrapper with <code>data-role="controlgroup"</code> and <code>data-type="horizontal"</code> attributes.</p>
|
||||
<p>To group buttons together into a button set, wrap the links in a wrapper with <code> data-jq-role="controlgroup"</code> and <code>data-jq-type="horizontal"</code> attributes.</p>
|
||||
|
||||
<code><div data-jq-role="controlgroup" data-jq-type="horizontal"></code>
|
||||
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
<h2>Persistent footers</h2>
|
||||
<p>In situations where the footer is a global navigation element, you may want it to appear fixed in place between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile.</p>
|
||||
|
||||
<p>To make a footer stay in place between transitions, add the <code>data-id</code> attribute to the footer of all relevant pages and use the same <code>id</code> value for each. For example, by adding <code>data-id="myfooter"</code> to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. PLEASE NOTE: This effect will only work correctly if the header and footer toolbars are set to <code>data-position="fixed"</code> so they are in view during the transition.</p>
|
||||
<p>To make a footer stay in place between transitions, add the <code>data-id</code> attribute to the footer of all relevant pages and use the same <code>id</code> value for each. For example, by adding <code>data-id="myfooter"</code> to the current page and the target page, the framework will keep the footer anchors in the same spot during the page animation. PLEASE NOTE: This effect will only work correctly if the header and footer toolbars are set to <code>data-jq-position="fixed"</code> so they are in view during the transition.</p>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -42,16 +42,16 @@ $forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page" data-theme="a">
|
||||
<div data-jq-role="page" data-jq-theme="a">
|
||||
|
||||
<form action="" method="get" class="ui-body ui-body-a ">
|
||||
<label for="location">Change zip code:</label>
|
||||
<input type="search" name="location" id="location" value="<?=$location; ?>" placeholder="zip code..." data-theme="a" />
|
||||
<input type="submit" data-role="nojs" value="submit" />
|
||||
<input type="search" name="location" id="location" value="<?=$location; ?>" placeholder="zip code..." data-jq-theme="a" />
|
||||
<input type="submit" data-jq-role="nojs" value="submit" />
|
||||
</form>
|
||||
|
||||
|
||||
<div data-role="content">
|
||||
<div data-jq-role="content">
|
||||
<h1>Currently in <?=$information[0]->city['data']; ?>:</h1>
|
||||
<div class="current ui-body ui-bar-a ui-corner-all">
|
||||
|
||||
|
|
@ -64,8 +64,8 @@ $forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");
|
|||
</div>
|
||||
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-theme="a">
|
||||
<li data-role="list-divider">This week's forecast</li>
|
||||
<ul data-jq-role="listview" data-jq-inset="true" data-jq-theme="a">
|
||||
<li data-jq-role="list-divider">This week's forecast</li>
|
||||
<? foreach ($forecast_list as $forecast) : ?>
|
||||
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -648,7 +648,7 @@
|
|||
//if target attr is specified we mimic _blank... for now
|
||||
hasTarget = $this.is( "[target]" ),
|
||||
|
||||
//if data-ajax attr is set to false, use the default behavior of a link
|
||||
//if data-jq-ajax attr is set to false, use the default behavior of a link
|
||||
hasAjaxDisabled = $this.is( "[data-" + $.mobile.ns + "ajax='false']" );
|
||||
|
||||
//if there's a data-jq-rel=back attr, go back in history
|
||||
|
|
|
|||
|
|
@ -27,17 +27,17 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div data-role="page" data-theme="b" id="jqm-home">
|
||||
<div data-role="header">
|
||||
<div data-jq-role="page" data-jq-theme="b" id="jqm-home">
|
||||
<div data-jq-role="header">
|
||||
<h1>Event Logger</h1>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
<div data-jq-role="content">
|
||||
<p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
|
||||
|
||||
<a href="foo.html" data-role="button">Click me</a>
|
||||
<a href="foo.html" data-jq-role="button">Click me</a>
|
||||
|
||||
<ul data-role="listview" id="log">
|
||||
<ul data-jq-role="listview" id="log">
|
||||
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<ol id="qunit-tests">
|
||||
</ol>
|
||||
|
||||
<div data-role="page">
|
||||
<div data-jq-role="page">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -77,13 +77,13 @@
|
|||
</div>
|
||||
|
||||
<div id="ajax-diabled-form" data-jq-role="page">
|
||||
<form method="POST" id="non-ajax-form" action="/ajax-disabled-form" data-ajax="false">
|
||||
<form method="POST" id="non-ajax-form" action="/ajax-disabled-form" data-jq-ajax="false">
|
||||
</form>
|
||||
|
||||
<form method="POST" id="ajax-form" action="/ajax-diabled-form">
|
||||
</form>
|
||||
|
||||
<form method="POST" id="rand-ajax-form" action="/ajax-disabled-form" data-ajax="foo">
|
||||
<form method="POST" id="rand-ajax-form" action="/ajax-disabled-form" data-jq-ajax="foo">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue