mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-02 22:00:24 +00:00
Merge branch 'master' of https://github.com/jquery/jquery-mobile
This commit is contained in:
Kin Blas
commit
0927ddfe3e
10 changed files with 63 additions and 55 deletions
|
|
@ -94,6 +94,9 @@ $(document).bind("mobileinit", function(){
|
|||
|
||||
<dt>ajaxFormsEnabled (<strong>deprecated</strong> <em>boolean</em>, default: true):</dt>
|
||||
<dd>jQuery Mobile will automatically handle form submissions through Ajax, when possible.</dd>
|
||||
|
||||
<dt>hashListeningEnabled (<em>boolean</em>, default: true):</dt>
|
||||
<dd>jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself, or simply to use simple deep-links within a document that scroll to a particular ID.</dd>
|
||||
|
||||
<dt>defaultTransition (<em>string</em>, default: 'slide'):</dt>
|
||||
<dd>Set the default transition for page changes that use Ajax. The default transition for dialog presentation is 'pop'. Set to 'none' for no transitions by default.</dd>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<li>String, url to transition to (<code>"about/us.html"</code>)</li>
|
||||
<li>jQuery object (<code>$("#about")</code>)</li>
|
||||
<li>Array specifying two page references [from,to] for transitioning from a known page. From is otherwise assumed to be the current page in view (or $.mobile.activePage ).</li>
|
||||
<li>Object for sending form data. (<code>{to: url, data: serialized form data, type: "get" or "post"}</code></li>
|
||||
<li>Object for sending form data. (<code>{url: url, data: serialized form data, type: "get" or "post"}</code></li>
|
||||
</ul>
|
||||
</dd>
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
<p>Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example). </p>
|
||||
|
||||
<p>The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called <code>ui-grid</code>. </p>
|
||||
|
||||
<p>There are two preset configurations layouts — two-column (using the <code>class</code> of <code>ui-grid-a</code>), and three-column (using the <code>class</code> of <code>ui-grid-b</code>) — that can be used in any situation that requires columns. Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.</p>
|
||||
|
||||
<h2>Two column grids</h2>
|
||||
|
|
@ -47,7 +48,7 @@
|
|||
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
|
||||
</div><!-- /grid-a -->
|
||||
|
||||
<p>As you see above, by default grid blocks have no styles for appearance; they simply present content side-by-side.</p>
|
||||
<p>As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.</p>
|
||||
|
||||
<p>Grid classes can be applied to any container. In this next example, we add <code>ui-grid-a</code> to a <code>fieldset</code>, and apply the <code>ui-block</code> classes to the two buttons inside to stretch them each to 50% of the screen width:</p>
|
||||
|
||||
|
|
@ -64,7 +65,7 @@
|
|||
</fieldset>
|
||||
|
||||
|
||||
<p>And, grid blocks can adopt presentation styles from the <a href="../themes/index.html">theming system</a> — by adding a height and color swatch reference to the grid blocks, we can achieve this style appearance:</p>
|
||||
<p>Theme classes (not data-theme attributes) from the <a href="../themes/index.html">theming system</a> can be added to an element, including grids. On the blocks below, we're adding two classes: <code>ui-bar</code> to add the default bar padding and <code>ui-bar-e</code> to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline <code>style="height:120px"</code> attribute is also added to each grid to set each to a standard height. </p>
|
||||
|
||||
<div class="ui-grid-a">
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">Block A</div></div>
|
||||
|
|
@ -72,7 +73,7 @@
|
|||
</div><!-- /grid-a -->
|
||||
|
||||
<h2>Three-column grids</h2>
|
||||
<p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%).</p>
|
||||
<p>The other grid layout configuration uses <code>class=ui-grid-b</code> on the parent, and 3 child container elements, each with its respective <code>ui-block-a/b/c</code> class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
|
||||
|
||||
<pre><code>
|
||||
<div class="ui-grid-b">
|
||||
|
|
@ -100,7 +101,7 @@
|
|||
|
||||
<h2>Four-column grids</h2>
|
||||
|
||||
<p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block.</p>
|
||||
<p>A four-column, 25/25/25/25% grid is created by specifying <code>class=ui-grid-c</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
|
||||
|
||||
<div class="ui-grid-c">
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
|
||||
|
|
@ -110,7 +111,7 @@
|
|||
</div><!-- /grid-c -->
|
||||
|
||||
<h2>Five-column grids</h2>
|
||||
<p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fourth block.</p>
|
||||
<p>A five-column, 20/20/20/20/20% grid is created by specifying <code>class=ui-grid-d</code> on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.</p>
|
||||
|
||||
<div class="ui-grid-d">
|
||||
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:120px">A</div></div>
|
||||
|
|
|
|||
|
|
@ -60,13 +60,13 @@
|
|||
|
||||
<h2>Theming dividers</h2>
|
||||
|
||||
<p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-dividertheme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.</p>
|
||||
<p>The theme for <strong>list dividers</strong> can be set by adding the <code>data-divider-theme</code> to the list and specifying a swatch letter. Here is an example of the same list above with swatch "d" set on the dividers.</p>
|
||||
|
||||
<code>
|
||||
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
|
||||
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
|
||||
</code>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="c">
|
||||
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e">
|
||||
<li data-role="list-divider">Divider</li>
|
||||
<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>
|
||||
|
|
@ -75,13 +75,13 @@
|
|||
|
||||
<h2>Theming count bubbles</h2>
|
||||
|
||||
<p>The theme for <strong>count bubbles</strong> can be set by adding the <code>data-counttheme</code> to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.</p>
|
||||
<p>The theme for <strong>count bubbles</strong> can be set by adding the <code>data-count-theme</code> to the list and specifying a swatch letter. Here is an example with swatch "e" set on the dividers.</p>
|
||||
|
||||
<code>
|
||||
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
|
||||
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
|
||||
</code>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="d" data-counttheme="e">
|
||||
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
|
||||
<li data-role="list-divider">Divider</li>
|
||||
<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>
|
||||
|
|
@ -95,15 +95,16 @@
|
|||
<code>
|
||||
<li data-icon="info"><a href="#">Notices</a></li>
|
||||
<li data-icon="alert"><a href="#">Alerts</a></li>
|
||||
<li data-icon="false"><a href="#">All Notifications</a></li>
|
||||
<li data-icon="false"><a href="#">No icon</a></li>
|
||||
</code>
|
||||
</pre>
|
||||
<ul data-role="listview" data-inset="true" data-icon="false">
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li data-role="list-divider">Divider</li>
|
||||
<li data-icon="info">Notices</a></a></li>
|
||||
<li data-icon="alert">Alerts</a></a></li>
|
||||
<li data-icon="false">All Notifications</a></a></li>
|
||||
<li data-icon="info"><a href="#">Notices</a></li>
|
||||
<li data-icon="alert"><a href="#">Alerts</a></li>
|
||||
<li data-icon="false"><a href="#">No icon</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2>Theming split buttons</h2>
|
||||
|
||||
|
|
@ -125,14 +126,15 @@
|
|||
</ul>
|
||||
|
||||
<code>
|
||||
<ul data-role="listview" data-inset="true" data-splittheme="a">
|
||||
<ul data-role="listview" data-inset="true" data-split-theme="a">
|
||||
</code>
|
||||
<p>To specify the color swatch for the icon button on the right, add the <code>data-splittheme</code> to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a <code> data-theme</code> attribute to specific links (see second list item).</p>
|
||||
<ul data-role="listview" data-inset="true" data-splittheme="a">
|
||||
<p>To specify the color swatch for the icon button on the right, add the <code>data-split-theme</code> to the list and specify a swatch letter. This attribute can also be added to individual split inside list items by adding a <code> data-theme</code> attribute to specific links (see second list item).</p>
|
||||
<ul data-role="listview" data-inset="true" data-split-theme="a">
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p></a>
|
||||
<p>Broken Bells</p>
|
||||
</a>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li><a href="index.html">
|
||||
|
|
@ -144,27 +146,29 @@
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<p>The icon for the split theme can set at the list level by adding the <code>data-spliticon</code> to the list and specifying a <a href="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code> data-icon</code> attribute to specific links (see second list item).</p>
|
||||
<p>The icon for the split theme can set at the list level by adding the <code>data-split-icon</code> to the list and specifying a <a href="../buttons/buttons-icons.html">standard icon</a>. This attribute can also be added to individual split inside list items by adding a <code> data-icon</code> attribute to specific links (see second list item).</p>
|
||||
|
||||
<code>
|
||||
<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">
|
||||
<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete">
|
||||
</code>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-splittheme="a" data-spliticon="plus">
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p></a>
|
||||
<a href="index.html" data-theme="e" data-icon="delete">Purchase album</a>
|
||||
</li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p></a>
|
||||
<a href="index.html" data-theme="e" data-icon="delete">Purchase album</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul data-role="listview" data-inset="true" data-split-theme="d" data-split-icon="delete" >
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-bb.jpg" />
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p>
|
||||
</a>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li><a href="index.html">
|
||||
<img src="images/album-hc.jpg" />
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
</a>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h2>Examples of all basic list swatches</h2>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
|
||||
<p>A single HTML document can contain multiple 'pages' that are loaded together by stacking multiple divs with a <code> data-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 that contains 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 conflicts in the hash between these two modes.</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>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
|
||||
<title>Page Title</title>
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
|
||||
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
|
||||
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
|
||||
<link rel="stylesheet" href="../../themes/default/" />
|
||||
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
|
||||
<script type="text/javascript" src="../../js/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../js/"></script>
|
||||
<script type="text/javascript" src="docs/docs.js"></script>
|
||||
<body>
|
||||
|
||||
<!-- Start of first page -->
|
||||
|
|
@ -40,6 +42,7 @@
|
|||
<h2>Bar</h2>
|
||||
<p>I'm the bar page.</p>
|
||||
<p><a href="#foo" data-direction="reverse">Back to foo</a></p>
|
||||
<p>Or view an <a href="link-formats.html">external page</a> from here!</p>
|
||||
</div><!-- /content -->
|
||||
|
||||
<div data-role="footer">
|
||||
|
|
|
|||
|
|
@ -109,9 +109,9 @@ $.fixedToolbars = (function(){
|
|||
prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" );
|
||||
var prevFooterMatches = prevFooter.jqmData( "id" ) === id;
|
||||
|
||||
if( prevFooterMatches ){
|
||||
if( id && prevFooterMatches ){
|
||||
stickyFooter = footer;
|
||||
setTop( stickyFooter.removeClass("fade").appendTo( $.mobile.pageContainer ) );
|
||||
setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -122,9 +122,9 @@ $.fixedToolbars = (function(){
|
|||
if( stickyFooter && stickyFooter.length ){
|
||||
|
||||
setTimeout(function(){
|
||||
setTop( stickyFooter.appendTo( $this ) );
|
||||
setTop( stickyFooter.appendTo( $this ).addClass("fade") );
|
||||
stickyFooter = null;
|
||||
},400);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
$.fixedToolbars.show(true, this);
|
||||
|
|
|
|||
|
|
@ -102,8 +102,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
|
|||
|
||||
_updateAll: function(){
|
||||
this._getInputSet().each(function(){
|
||||
var dVal = $(this).jqmData("cacheVal");
|
||||
if( dVal && dVal !== $(this).is(":checked") || this.inputtype === "checkbox" ){
|
||||
if( $(this).is(":checked") || this.inputtype === "checkbox" ){
|
||||
$(this).trigger("change");
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -577,12 +577,13 @@
|
|||
//rewrite src and href attrs to use a base url
|
||||
if( !$.support.dynamicBaseTag ){
|
||||
var newPath = path.get( fileUrl );
|
||||
to.find('[src],link[href],a[rel="external"],a:jqmData(ajax="none")').each(function(){
|
||||
to.find( "[src], link[href], a[rel='external'], :jqmData(ajax='false'), a[target]" ).each(function(){
|
||||
var thisAttr = $(this).is('[href]') ? 'href' : 'src',
|
||||
thisUrl = $(this).attr(thisAttr);
|
||||
|
||||
|
||||
//if full path exists and is same, chop it - helps IE out
|
||||
thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );
|
||||
thisUrl = thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' );
|
||||
|
||||
if( !/^(\w+:|#|\/)/.test(thisUrl) ){
|
||||
$(this).attr(thisAttr, newPath + thisUrl);
|
||||
|
|
|
|||
|
|
@ -17,11 +17,8 @@
|
|||
// the traditional mouse environment, should multiple handlers be registered
|
||||
// on the same element for different events.
|
||||
//
|
||||
// The current version simply adds mBind and mUnbind to the $.fn space,
|
||||
// but we're considering other methods for making this easier. One alternative
|
||||
// would be to allow users to use virtual mouse event names, such as
|
||||
// "vmousedown", "vmouseup", etc, to triggerVirtualEvent the traditional jQuery special/custom
|
||||
// event api, which would then triggerVirtualEvent this same code.
|
||||
// The current version exposes the following virtual events to jQuery bind methods:
|
||||
// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"
|
||||
|
||||
(function($, window, document, undefined) {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue