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

This commit is contained in:
Todd Parker 2010-10-15 20:00:28 -04:00
commit b7b2c44a67
19 changed files with 86 additions and 59 deletions

View file

@ -1,4 +1,4 @@
.ui-mobile #jqm-home { background: #e5e5e5 url(../images/jqm-sitebg.png) top center fixed repeat-x; }
.ui-mobile #jqm-home { background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
.ui-mobile #jqm-homeheader { padding: 55px 25px 0; text-align: center }
.ui-mobile #jqm-homeheader h1 { margin: 0 0 10px; }
.ui-mobile #jqm-homeheader p { margin: 0; }

View file

@ -1,6 +1,6 @@
//set up the theme switcher on the homepage
$('div').live('pagecreate',function(){
if( !$(this).is('.ui-dialog')){
if( !$(this).is('.ui-dialog,.ui-navbar-expanded')){
$('<a href="#">Switch theme</a>')
.buttonMarkup({
'icon':'gear',

View file

@ -16,10 +16,10 @@
<div data-role="content">
<p>jQuerys mobile strategy can be summarized simply: Delivering top-of-the-line JavaScript and a unified User Interface across the most-used smartphone web browsers with a future focus on tablet form factors.</p>
<p>jQuerys mobile strategy can be summarized simply: Delivering top-of-the-line JavaScript in a unified User Interface that works across the most-used smartphone web browsers and tablet form factors.</p>
<p>The critical difference with our approach is the wide variety of mobile browsers were targeting with jQuery Mobile. Weve been working hard at bringing jQuery support to all mobile browsers that are sufficiently-capable and have at least a nominal amount of market share. In this way were treating mobile web browsers exactly how we treat desktop web browsers.</p>
<p>All pages in jQuery Mobile are built with clean, semantic HTML to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies progressive enhancement techniques to unobtrusively transform the page into a rich, interactive experience that leverages the power of jQuery and CSS. Accessibility features such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
<p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms were targeting</a> with jQuery Mobile. Weve been working hard at bringing jQuery support to all mobile browsers that are sufficiently-capable and have at least a nominal amount of market share. In this way, were treating mobile web browsers exactly how we treat desktop web browsers.</p>
<p>To make this broad support possible, all pages in jQuery Mobile are built on a foundation of <strong>clean, semantic HTML</strong> to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies <strong>progressive enhancement techniques</strong> to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. <strong>Accessibility features</strong> such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
<img src="../_assets/images/ipad-palm.png" alt="Smartphone and tablet designs" style="max-width:100%; margin-top:20px;">

View file

@ -24,7 +24,7 @@
<li>Themes include multiple <strong>color "swatches"</strong> &mdash; each consisting of a header bar, content body, and button states that can be freely mixed and matched to create visual texture &mdash; to make richer designs possible</li>
<li><strong>Open-ended theming</strong> allows for up to 26 unique swatches per theme, to add almost unlimited variety to designs</li>
<li>All backgrounds now use <strong>CSS3 gradients</strong> to dramatically reduce file size and number of server requests</li>
<li>A <strong>simplified icon set</strong> includes only the icons most commonly used for mobile, in either black or white, to reduce image weight</li>
<li>A <strong>simplified icon set</strong> including those most commonly used for mobile, in a sprite to reduce image weight</li>
</ul>

View file

@ -9,20 +9,22 @@
<div data-role="page" data-fullscreen="true">
<div data-role="header">
<div data-role="header" data-position="fixed">
<h1>Fullscreen fixed header</h1>
</div>
<div data-role="content">
<img src="images/photo-run.jpeg" width="640" height="480" alt="Photo Run">
<p class="ui-body">This is a demonstrates the "fullscreen" toolbar mode. It works just like the default <a href="bars-fixed.html">"fixed" toolbar mode</a> except that the toolbars aren't shown at the top and bottom of the page and only appear when the page is clicked. This is useful for immersive apps like photo or video viewers where you want the content to full when whole screen and toolbars can be summoned to appear by tapping the screen. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content so not all content will be accessible with the toolbars open, just like in this situation.</p>
<p>This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively &mdash; a common scenario for photo, image or video viewers.</p>
<p>To enable this toolbar feature type, you apply a <code>data-fullscreen="true"</code> attribute to the <code>div</code> contain that has the attribute <code>data-role="page"</code>, and the <code>data-position="fixed"</code> attribute to both the header and footer <code>div</code> elements. Keep in mind that the toolbars in this mode will sit <strong>over</strong> page conten,t so not all content will be accessible with the toolbars open, just as shown in this demo.</p>
</div>
<div data-role="footer">
<div data-role="footer" data-position="fixed">
<h1>Fullscreen fixed footer</h1>
</div>

View file

@ -19,12 +19,12 @@
<p>In jQuery Mobile, there are two standard types of toolbars: Headers and Footers. </p>
<p>The <a href="docs-headers.html"><strong>Header bar </strong></a> serves as the page title and is usually the first element inside each <a href="../pages/docs-pages.html">mobile page</a> and typically contains a page title and up to two buttons.</p>
<ul> <li>The <a href="docs-headers.html"><strong>Header bar </strong></a> serves as the page title, is usually the first element inside each <a href="../pages/docs-pages.html">mobile page</a>, and typically contains a page title and up to two buttons.</li>
<p>The <a href="docs-footers.html"><strong>Footer bar</strong></a> is usually the last element inside each mobile page and tend to be more freeform than headers in terms of content and functionality but typically contain combinations of text and buttons.</p>
<li>The <a href="docs-footers.html"><strong>Footer bar</strong></a> is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.</li>
</ul>
<p>Inside the header and footer bars, it's common to have a horizontal list of links that serve as a navigation or tab bar. jQuery Mobile includes a <a href="docs-navbar.html"><strong>nav bar</strong></a> widget that turns a list of links into a horizontal navigation bar.</p>
<p>It's very common to have a horizontal navigation or tab bar inside the header an/or footer; jQuery Mobile includes a <a href="navbar.html"><strong>nav bar widget </strong></a> that turns an unordered list of links into a horizontal button bar, which works well in these instances.</p>
<h2>Toolbar positioning options</h2>

View file

@ -10,13 +10,16 @@
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Fixed Header</h1>
<h1>Fixed Footer Demo</h1>
<a href="../forms/forms-all.html" data-rel="dialog" data-transition="pop" data-icon="gear" class="ui-btn-right">Options</a>
</div>
<div data-role="content">
<ul data-role="listview">
<h2>Fixed footer navigation bar</h2>
<p>This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the footer remain fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same <code>data-id</code> attribute. </p>
<ul data-role="listview">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Audi</a></li>
<li><a href="index.html">BMW</a></li>
@ -41,8 +44,6 @@
<li><a href="index.html">Volvo</a></li>
</ul>
<h2>Demo description</h2>
<p>This is a demo of a persistent footer - click the tabs below. The footer on this page should stick when transitioning to the next page, because they have the same data-id attributes. </p>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">

View file

@ -15,7 +15,7 @@
<div data-role="content">
<p>Toolbars are used for headers, footers and utility bars throughout a mobile app so jQuery Mobile provides a standard set of bars and navigation tools to cover most standard scenarios.</p>
<p>Toolbars are used for headers, footers and utility bars throughout a mobile app, so jQuery Mobile provides a standard set of bars and navigation tools to cover most standard scenarios.</p>
<ul data-role="listview" data-inset="true">

View file

@ -50,7 +50,7 @@ $.widget( "mobile.page", $.mobile.widget, {
}
//auto-add back btn on pages beyond first view
if ( $.mobile.addBackBtn && role === "header" && $.mobile.urlStack.length > 1 && !leftbtn && !$this.data( "noBackBtn" ) ) {
if ( $.mobile.addBackBtn && role === "header" && ($.mobile.urlStack.length > 1 || $('.ui-page').length > 1) && !leftbtn && !$this.data( "noBackBtn" ) ) {
$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>Back</a>" )
.tap(function() {
history.back();

View file

@ -10,7 +10,7 @@
.ui-mobile a img, .ui-mobile fieldset { border: 0; }
/* responsive page widths */
.ui-mobile body { margin: 0; overflow-x: hidden; -webkit-backface-visibility:hidden; -webkit-user-select: none; -webkit-text-size-adjust: none; min-height: 100%; }
.ui-mobile body { margin: 0; overflow-x: hidden; -webkit-backface-visibility:hidden; -webkit-text-size-adjust: none; min-height: 100%; }
/*orientations from js are available */
.portrait { }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

View file

@ -17,7 +17,7 @@
border: 1px solid #BD610D;
background: #FF6700;
color: #fff;
text-shadow: 0 -1px 1px #94440F;
text-shadow: 0 -1px 0px #94440F;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #FF8700),
color-stop(1, #FF6700));
@ -55,7 +55,7 @@
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a {
text-shadow: 0 -1px 1px #94440F;
text-shadow: 0 -1px 0px #94440F;
cursor: pointer;
font-weight: bold;
text-decoration: none;
@ -80,7 +80,7 @@
border: 1px solid #222;
background: #444;
color: #ddd;
text-shadow: 0 -1px 1px #000;
text-shadow: 0 -1px 0px #000;
background-image: -webkit-gradient(linear, center top, center bottom,
color-stop(0, #333),
color-stop(5%, #333),
@ -114,7 +114,7 @@
border: 1px solid #222;
background: #FF8700;
color: #fff;
text-shadow: 0 -1px 1px #111;
text-shadow: 0 -1px 0px #111;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #555555),
color-stop(1, #333333));
@ -156,7 +156,7 @@
.ui-btn-up-b,
.ui-btn-hover-b,
.ui-btn-down-b {
text-shadow: 0 -1px 1px #111;
text-shadow: 0 -1px 0px #111;
cursor: pointer;
font-weight: bold;
text-decoration: none;
@ -170,18 +170,18 @@
font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-b .ui-link-inherit {
color: #fff;
color: #fff;
}
.ui-bar-b .ui-link {
color: #7cc4e7;
color: #7cc4e7;
font-weight: bold;
}
.ui-body-b {
font-weight: normal;
border: 1px solid #999;
background: #e5e5e5;
color: #666;
text-shadow: 0 1px 0 #fff;
border: 1px solid #999;
background: #e5e5e5;
color: #666;
text-shadow: 0 1px 0px #fff;
background-image: url(images/texture_05.png);
/*
background-image: -webkit-gradient(linear,left top,left bottom,
@ -208,7 +208,7 @@
border: 1px solid #ccc;
background: #e5e5e5;
color: #111;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #eee),
color-stop(1, #e5e5e5));
@ -227,7 +227,7 @@
cursor: pointer;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
}
.ui-btn-up-c {
border: 1px solid #ccc;
@ -265,7 +265,7 @@
.ui-body-c {
border: 1px solid #ddd;
color: #333333;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
background: #fff;
background-image: url(images/texture_075.png);
}
@ -295,7 +295,7 @@
border: 1px solid #ccc;
background: #cbcbcb;
color: #666;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
background-image: -webkit-gradient(linear, center top, center bottom,
color-stop(0, #ddd),
color-stop(5%, #ccc),
@ -358,7 +358,7 @@
cursor: pointer;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
}
.ui-body-d,
.ui-body-d input,
@ -373,7 +373,7 @@
.ui-body-d {
border: 1px solid #aaa;
color: #666;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
background: #ddd;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #fff),
@ -404,7 +404,7 @@
border: 1px solid #999;
background: #eee;
color: #000;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #fff),
color-stop(.5, #ccc),
@ -429,7 +429,7 @@
border: 1px solid #999;
background: #f5f5f5;
color: #333;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #f5f5f5),
color-stop(.5, #ccc),
@ -441,7 +441,7 @@
border: 1px solid #777;
background: #fff;
color: #333;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #fff),
color-stop(.5, #ddd),
@ -467,14 +467,14 @@
cursor: pointer;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
}
.ui-body-e {
font-weight: normal;
border: 1px solid #aaa;
background: #ccc;
color: #111;
text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 0px #fff;
background-image: url(images/texture_075.png);
}
.ui-body-e,
@ -504,7 +504,7 @@ a.ui-link-inherit {
border: 1px solid #155678;
background: #4596ce;
color: #fff;
text-shadow: 0 -1px 1px #145072;
text-shadow: 0 -1px 0px #145072;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #66a4da),
color-stop(1, #1a70b9));
@ -536,27 +536,51 @@ a.ui-link-inherit {
/* Icons
----------------------------------*/
.ui-icon { background-position: 50% 50%; background-repeat: no-repeat; background-color: #fff; background-color: rgba(0,0,0,.4); -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }
/*icons with no bg needed*/
/* .ui-icon { background-position: 50% 50%; background-repeat: no-repeat; background-color: #fff; background-color: rgba(0,0,0,.4); -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; } */
.ui-icon { background-image: url(images/icons-18-white.png); background-repeat: no-repeat; background-color: #666; background-color: rgba(0,0,0,.4); -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }
.ui-icon-disc { background-color: #666; background-color: rgba(0,0,0,.3); -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }
/* alt color */
.ui-icon-black { background-image: url(images/icons-18-black.png); }
.ui-icon-black-disc { background-color: #fff; background-color: rgba(255,255,255,.3); -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }
/* retina */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
.ui-icon { background-image: url(images/icons-36-white.png); background-size: 558px 18px; }
.ui-icon-black { background-image: url(images/icons-36-black.png); }
}
/*plus minus*/
.ui-icon-plus { background-position: -0 0; }
.ui-icon-minus { background-position: -36px 0; }
/* delete/close */
.ui-icon-delete { background-position: -72px 0; }
/*arrows*/
.ui-icon-arrow-r { background-position: -108px 0; }
.ui-icon-arrow-l { background-position: -144px 0; }
.ui-icon-arrow-u { background-position: -180px 0; }
.ui-icon-arrow-d { background-position: -216px 0; }
.ui-icon-check { background-position: -252px 0; }
.ui-icon-gear { background-position: -288px 0; }
.ui-icon-refresh { background-position: -324px 0; }
.ui-icon-forward { background-position: -360px 0; }
.ui-icon-back { background-position: -396px 0; }
.ui-icon-grid { background-position: -432px 0; }
.ui-icon-star { background-position: -468px 0; }
.ui-icon-alert { background-position: -504px 0; }
.ui-icon-info { background-position: -540px 0; }
/*checks,radios*/
.ui-icon-checkbox-off,
.ui-icon-checkbox-on,
.ui-icon-radio-off,
.ui-icon-radio-on { background-color: transparent; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
/*arrows*/
.ui-icon-arrow-u { background-image: url(images/icon-arrow-white-up.png); }
.ui-icon-arrow-r { background-image: url(images/icon-arrow-white-right.png); }
.ui-icon-arrow-d { background-image: url(images/icon-arrow-white-down.png); }
.ui-icon-arrow-l { background-image: url(images/icon-arrow-white-left.png); }
/*plus minus*/
.ui-icon-plus { background-image: url(images/icon-plus-white.png); }
.ui-icon-minus { background-image: url(images/icon-minus-white.png); }
/* delete/close */
.ui-icon-delete { background-image: url(images/icon-delete.png); }
/*checks,radios*/
.ui-icon-checkbox-off { background-image: url(images/form-check-off.png); }
.ui-icon-checkbox-on { background-image: url(images/form-check-on.png); }
.ui-icon-radio-off { background-image: url(images/form-radio-off.png); }