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

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

Browse source
This commit is contained in:
Todd Parker 2010-10-15 10:44:38 -04:00
commit 69bc97fe6a
15 changed files with 4395 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Makefile
View file

@ -17,7 +17,6 @@ FILES = js/jquery.ui.widget.js \
js/jquery.mobile.forms.checkboxradio.js \
js/jquery.mobile.forms.textinput.js \
js/jquery.mobile.forms.select.js \
js/jquery.mobile.forms.ajaxform.js \
js/jquery.mobile.buttonMarkup.js \
js/jquery.mobile.forms.button.js \
js/jquery.mobile.forms.slider.js \

4314
design/mobile-logo.ai Normal file
View file

File diff suppressed because one or more lines are too long

5
docs/_assets/css/jqm-docs.css Normal file
View file

@ -0,0 +1,5 @@
.ui-mobile #jqm-home { background: #e5e5e5 url(../images/jqm-sitebg.png) top center fixed 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; }
.ui-mobile #jqm-version { text-indent: -99999px; background: url(../images/version.png) top right no-repeat; width: 119px; height: 122px; overflow: hidden; position: absolute; top: 0; right: 0; }

BIN
docs/_assets/images/jqm-sitebg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.2 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
docs/_assets/images/version.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

15
docs/_assets/js/jqm-docs.js Normal file
View file

@ -0,0 +1,15 @@
//set up the theme switcher on the homepage
$(function(){
var lvli = $('#jqm-home ul:eq(2) li:eq(1)');
lvli
.clone()
.find('a:eq(0)')
.attr('href', '#')
.text('Theme switcher')
.click(function(){
$.themeswitcher();
return false;
})
.end()
.insertBefore(lvli);
});

8
docs/pages/docs-dialogs.html
View file

@ -15,7 +15,7 @@
<div data-role="content" class="ui-body">
<p>Any page can be presented as a dialog by adding the <code>data-rel="dialog"</code> attribute to the page you're linking to. The framework will add styles to make the page look like a modal dialog by adding rounded corners and margins around the page along with a dark background behind the "dialog".</p>
<p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.</p>
<p>
<code>
&lt;a href=&quot;foo.html&quot; data-rel=&quot;dialog&quot;&gt;Open dialog&lt;/a&gt;
@ -27,7 +27,7 @@
<h2>Transitions</h2>
<p>The dialog will still open with the standard slide transition so to make it feel more dialog-like. You can specify any page transition you want on the dialog by adding the <code>data-transition</code> attribute to the link. We recommend adding a transition of pop, slideup or flip for dialogs.</p>
<p>Since the dialog is a standard "page", it will open with the standard slide transition that's applied to all pages. And like all pages, you can specify any page transition you want on the dialog by adding the <code>data-transition</code> attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slideup" or "flip".</p>
<code>
&lt;a href=&quot;foo.html&quot; data-rel=&quot;dialog&quot; data-transition=&quot;pop&quot;&gt;Open dialog&lt;/a&gt;
@ -41,10 +41,10 @@
<h2>Styling</h2>
<p>Dialogs can be styled with different themes, just like any page. Here is a different dialog design:</p>
<a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Alternate swatch colors</a>
<a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>
<p>By removing the header, dialogs can be can used to offer multiple buttons, more like a control sheet</p>
<p>And dialogs can be can used more like a control sheet to offer multiple buttons by removing the header:</p>
<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slideup">Share photos...</a>

18
docs/pages/docs-links.html
View file

@ -15,13 +15,15 @@
<div data-role="content">
<p>jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can just link up your pages and assets as you normally would and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. When Ajax isn't possible -- such as a non-same-domain url, or if specified using certain attributes on the link -- a normal http request is used instead.</p>
<p>jQuery Mobile is designed to work with simple page linking conventions. Essentially, you can link pages and assets as you normally would, and jQuery Mobile will automatically handle page requests in a single-page model, using Ajax when possible. When Ajax isn't possible (such as a non-same-domain url, or if specified using certain attributes on the link), a normal http request is used instead.</p>
<p>The goal of this model is to allow developers to create websites using best practices where ordinary links will "just work" without any special configuration, while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
<p>The goal of this model is to allow developers to create websites using best practices &mdash; where ordinary links will "just work" without any special configuration &mdash; while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
<h2>External page linking</h2>
<p>jQuery Mobile automates the process of building Ajax powered site and applications. By default, when you click on link that points to an external page (ex. products.html), the framework will parse the link's <code>href</code> to formulate an Ajax request (Hijax) and displays the loading spinner.</p>
<p>jQuery Mobile automates the process of building Ajax powered site and applications. </p>
<p>By default, when you click on link that points to an external page (ex. products.html), the framework will parse the link's <code>href</code> to formulate an Ajax request (Hijax) and displays the loading spinner.</p>
<p>If the Ajax request is successful, the new page content is added to the DOM, the <code>mobilize()</code> function runs, then the new page is animated into view with a page transition.</p>
@ -29,11 +31,11 @@
<h2>Local, internal linked "pages"</h2>
<p>A single HTML document can contain either a single 'page' or, by stacking multiple divs with a <code>data-role</code> of <code>"page"</code>, multiple 'pages' can be assembled and loaded together. This allows you to build a small site or application within a single HTML document.jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p>
<p>A single HTML document can contain either a single 'page' or multiple 'pages' can be assembled and loaded together by stacking multiple divs with a <code>data-role</code> of <code>"page"</code>. This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.</p>
<p>If a link points to an anchor (#foo), the framework will looks for a page with that ID. If it finds a page in the HTML document, it will transition the new page into view.</p>
<p>If a link points to an anchor (<code>#foo</code>), the framework will looks for a page with that ID. If it finds a page in the HTML document, it will transition the new page into view.</p>
<p>Here is an example of a 2 "page" site built with two jQuery Mobile divs navigated by linking to an ID placed on each page wrapper. Note that the IDs on the page wrappers are only needed to support the internal page linking and are optional if each page is a separate HTML document.</p>
<p>Here is an example of a 2 "page" site built with two jQuery Mobile divs navigated by linking to an ID placed on each page wrapper. Note that the IDs on the page wrappers are only needed to support the internal page linking, and are optional if each page is a separate HTML document.</p>
<pre>
<div class="highlight">
@ -56,9 +58,9 @@
</div>
</pre>
<p>You can seamlessly navigate between local, internal "pages" and external pages in jQuery UI. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking. </p>
<p>You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking. </p>
<p>Please note that since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (index.html#foo) on a page in jQuery Mobile because the framework will look for a 'page' with and ID of #foo instead of the native behavior of scrolling to the content with that ID.</p>
<p>PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (index.html#foo) on a page in jQuery Mobile, because the framework will look for a 'page' with and ID of #foo instead of the native behavior of scrolling to the content with that ID.</p>
<p>Learn more about the technical details of the <a href="docs-navmodel.html">Ajax, hashes and history</a> in jQuery mobile.</p>

2
docs/pages/docs-transitions.html
View file

@ -17,7 +17,7 @@
<h2>Page transitions</h2>
<p>The jQuery Mobile framework includes a set of CSS-based transitions that can be applied to any object or page change event. By default, when navigating to a new page, the framework applies the right to left slide transition effect. When via the Back button, the slide transition direction is reversed.</p>
<p>The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.</p>
<p>To set a custom transition effect, add the <code>data-transition</code> attribute to the link. Possible values include: </p>

93
index.html
View file

@ -3,60 +3,53 @@
<head>
<title>jQuery UI Mobile Framework - Documentation</title>
<link rel="stylesheet" href="themes/default" />
<script type="text/javascript" src="js/all"></script>
<link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
<script src="js/all"></script>
<script src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script type="text/javascript">
$(function(){
$('#themeswitcher').click(function(){
$.themeswitcher();
return false;
});
});
</script>
<script src="docs/_assets/js/jqm-docs.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="a" data-position="inline">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<div data-role="page" data-theme="b" id="jqm-home">
<div id="jqm-homeheader">
<h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" width="235" height="61" /></h1>
<p>A Touch-Optimized Web Framework for Smartphones &amp; Tablets</p>
<p id="jqm-version">Alpha Release</p>
</div>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Overview</li>
<li><a href="docs/about/intro.html">Introduction to jQuery Mobile</a></li>
<li><a href="docs/about/features.html">Features</a></li>
<li><a href="docs/about/accessibility.html">Accessibility</a></li>
<li><a href="docs/about/platforms.html">Supported platforms</a></li>
<li><a href="docs/about/themes.html">Theme system</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Components</li>
<li><a href="docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="docs/toolbars/index.html">Toolbars</a></li>
<li><a href="docs/buttons/index.html">Buttons</a></li>
<li><a href="docs/content/index.html">Content formatting</a></li>
<li><a href="docs/forms/index.html">Form elements</a></li>
<li><a href="docs/lists/index.html">List views</a></li>
<li><a href="docs/events.html">Events</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Demos</li>
<li id="themeswitcher"><a href="#">Theme switcher</a></li>
<li><a href="experiments/api-viewer/index.html">jQuery API browser</a></li>
<li><a href="experiments/photos/_photo1.html">Photo viewer</a></li>
<li><a href="experiments/converter/index.html">Converter</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Experiments</li>
<li><a href="experiments/ui-datepicker">Date picker styling</a></li>
</ul>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Overview</li>
<li><a href="docs/about/intro.html">Introduction to jQuery Mobile</a></li>
<li><a href="docs/about/features.html">Features</a></li>
<li><a href="docs/about/accessibility.html">Accessibility</a></li>
<li><a href="docs/about/platforms.html">Supported platforms</a></li>
<li><a href="docs/about/themes.html">Theme system</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Components</li>
<li><a href="docs/pages/index.html">Pages &amp; dialogs</a></li>
<li><a href="docs/toolbars/index.html">Toolbars</a></li>
<li><a href="docs/buttons/index.html">Buttons</a></li>
<li><a href="docs/content/index.html">Content formatting</a></li>
<li><a href="docs/forms/index.html">Form elements</a></li>
<li><a href="docs/lists/index.html">List views</a></li>
<li><a href="docs/events.html">Events</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Demos</li>
<li><a href="experiments/api-viewer/index.html">jQuery API browser</a></li>
<li><a href="experiments/photos/_photo1.html">Photo viewer</a></li>
<li><a href="experiments/converter/index.html">Converter</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Experiments</li>
<li><a href="experiments/ui-datepicker">Date picker styling</a></li>
</ul>
</div>
</div>
</body>
</html>

2
js/jquery.mobile.fieldContain.js
View file

@ -9,6 +9,6 @@ $.fn.fieldcontain = function(options){
var o = $.extend({
theme: 'c'
},options);
return $(this).addClass('ui-field-contain ui-body ui-body-'+o.theme);
return $(this).addClass('ui-field-contain ui-body ui-br');
};
})(jQuery);

1
js/manifest.php
View file

@ -12,7 +12,6 @@ $elements = array(
'jquery.mobile.forms.checkboxradio.js',
'jquery.mobile.forms.textinput.js',
'jquery.mobile.forms.select.js',
'jquery.mobile.forms.ajaxform.js',
'jquery.mobile.buttonMarkup.js',
'jquery.mobile.forms.button.js',
'jquery.mobile.forms.slider.js',

2
themes/default/jquery.mobile.forms.fieldcontain.css
View file

@ -3,7 +3,7 @@
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.ui-field-contain { background: none; padding: 1.5em 0; margin: 0; border-left-width: 0; border-right-width: 0; border-bottom-width: 0; }
.ui-field-contain { background: none; padding: 1.5em 0; margin: 0; border-bottom-width: 1px; overflow: visible; }
.ui-field-contain:first-child { border-top-width: 0; }
@media screen and (max-width: 480px){
.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }

1
themes/default/jquery.mobile.theme.css
View file

@ -18,6 +18,7 @@
.ui-body-a, .ui-body-a input, .ui-body-a select, .ui-body-a textarea, .ui-body-a button { font-family: Helvetica, Arial, sans-serif; }
.ui-body-a .ui-link-inherit { color: #fff; }
.ui-body-a .ui-link { color: #2489CE; font-weight: bold; }
.ui-br { border-bottom: 1px solid rgba(130,130,130,.3); }
.ui-btn-up-a { border: 1px solid #222; background: #333333; font-weight: bold; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px #000; text-decoration: none; background-image: -moz-linear-gradient(top, #555555, #333333); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #555555),color-stop(1, #333333)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333')"; }
.ui-btn-up-a a.ui-link-inherit { color: #fff; }