Skip to content

Commit 17facff

Browse files
author
scottjehl
committed
docs updates
1 parent d498e20 commit 17facff

File tree

7 files changed

+187
-6
lines changed

7 files changed

+187
-6
lines changed

docs/events.html renamed to docs/api/events.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>jQuery Mobile Docs - Events</title>
6-
<link rel="stylesheet" href="../themes/default" />
7-
<script type="text/javascript" src="../js/"></script>
6+
<link rel="stylesheet" href="../../themes/default" />
7+
<script type="text/javascript" src="../../js/"></script>
88
</head>
99
<body>
1010

@@ -63,8 +63,13 @@ <h3>Page initialization events</h3>
6363

6464
<p>Note that by binding to <code>pagebeforecreate</code> and returning <code>false</code>, you can prevent the page plugin from making its manipulations.</p>
6565

66+
<div class="ui-body ui-body-e">
67+
<p><strong>Note on Page IDs: </strong> Page elements in jQuery Mobile utilize the <code>ID</code> attribute for storing the location from which they came. When you place an <code>ID</code> attribute on a page that is brought into jQuery Mobile's single-page environment through Ajax, jQuery Mobile wraps that page with a new "page" <code>div</code> element, preserving any CSS references to your <code>ID</code>. However, this means that your <code>ID</code> attribute is no longer on the "page" element, so you must keep this in mind when binding to page events (<code>pagebeforecreate</code>, <code>pagecreate</code>, etc). To avoid issues, try using a class if possible. </p>
68+
</div>
69+
70+
6671
<h3>Animation Events</h3>
67-
<p>Currently, jQuery Mobile exposes the <code>animationComplete</code> event, which you can utilize after adding or removing a class that applies a CSS transition.</p>
72+
<p>jQuery Mobile exposes the <code>animationComplete</code> plugin, which you can utilize after adding or removing a class that applies a CSS transition.</p>
6873

6974
</div><!-- /content -->
7075

‎docs/api/global-settings.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>jQuery Mobile Docs - Configurable Default Settings</title>
6+
<link rel="stylesheet" href="../../themes/default" />
7+
<script type="text/javascript" src="../../js/"></script>
8+
</head>
9+
<body>
10+
11+
<div data-role="page">
12+
13+
<div data-role="header">
14+
<h1>Configurable Default Settings</h1>
15+
</div><!-- /header -->
16+
17+
<div data-role="content" data-theme="c">
18+
<p>The following defaults are configurable via the <code>$.mobile</code> object:</p>
19+
20+
<dl>
21+
<dt>subPageUrlKey (<em>string</em>, default: "ui-page"):</dt>
22+
<dd>The url parameter used for referencing widget-generated sub-pages (such as those generated by nested listviews). Translates to to <em>example.html<strong>&ui-page=</strong>subpageIdentifier</em>. The hash segment before &ui-page= is used by the framework for making an Ajax request to the URL where the sub-page exists.</dd>
23+
24+
<dt>nonHistorySelectors (<em>string</em>, default: "dialog"):</dt>
25+
<dd>Anchor links with a data-rel attribute value, or pages with a data-role value, that match these selectors will not be trackable in history (they won't update the location.hash and won't be bookmarkable).</dd>
26+
27+
28+
<dt>activePageClass (<em>string</em>, default: "ui-page-active"):</dt>
29+
<dd>The class assigned to page currently in view, and during transitions</dd>
30+
31+
32+
<dt>activeBtnClass (<em>string</em>, default: "ui-page-active"):</dt>
33+
<dd>The class used for "active" button state, from CSS framework.</dd>
34+
35+
<dt>ajaxLinksEnabled (<em>boolean</em>, default: true):</dt>
36+
<dd>jQuery Mobile will automatically handle link clicks through Ajax, when possible.</dd>
37+
38+
<dt>ajaxFormsEnabled (<em>boolean</em>, default: true):</dt>
39+
<dd>jQuery Mobile will automatically handle form submissions through Ajax, when possible.</dd>
40+
41+
42+
<dt>transitions (<em>array</em>, default: ['slide', 'slideup', 'slidedown', 'pop', 'flip', 'fade']):</dt>
43+
<dd>Available CSS transitions in the CSS.</dd>
44+
45+
46+
<dt>defaultTransition (<em>string</em>, default: 'slide'):</dt>
47+
<dd>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</dd>
48+
49+
<dt>loadingMessage (<em>string</em>, default: "loading"):</dt>
50+
<dd>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</dd>
51+
52+
<dt>metaViewportContent (<em>string</em>, default: "width=device-width, minimum-scale=1, maximum-scale=1"):</dt>
53+
<dd>Configure the auto-generated meta viewport tag's content attribute. If false, no meta tag will be appended to the DOM.</dd>
54+
55+
<dt>headExtras (<em>markup string or jQuery object</em>, default: null):</dt>
56+
<dd> Additional markup to prepend to head element.</dd>
57+
58+
<dt>gradeA (<em>function that returns a boolean</em>, default: a function returning the value of $.support.mediaquery):</dt>
59+
<dd>Any support conditions that must be met in order to proceed.</dd>
60+
61+
62+
</dl>
63+
64+
65+
<p>Visit the <a href="globalconfig.html">Configuring Default Settings</a> page for instructions on configuring these properties.</p>
66+
67+
</div><!-- /content -->
68+
</div><!-- /page -->
69+
70+
</body>
71+
</html>

‎docs/api/globalconfig.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>jQuery Mobile Docs - Configuring default settings</title>
6+
<link rel="stylesheet" href="../../themes/default" />
7+
<script type="text/javascript" src="../../js/"></script>
8+
</head>
9+
<body>
10+
11+
<div data-role="page">
12+
13+
<div data-role="header">
14+
<h1>Configuring Default Settings</h1>
15+
</div><!-- /header -->
16+
17+
<div data-role="content" data-theme="c">
18+
<h2>Working with jQuery Mobile's Auto-initialization</h2>
19+
<p>Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before document.ready event fires). These enhancements are applied based on jQuery Mobile's default configuration, which is designed to work with common scenarios, but may or may not match your particular needs. Fortunately, these settings are easy to configure.</p>
20+
21+
<h3>The mobileinit event</h3>
22+
<p>When the jQuery Mobile starts to execute, it triggers a <code>mobileinit</code> event on the <code>document</code> object, to which you can bind to apply overrides to jQuery Mobile's defaults.</p>
23+
24+
<pre>
25+
<code>
26+
$(document).bind("mobileinit", function(){
27+
//apply overrides here
28+
});
29+
</code>
30+
</pre>
31+
32+
<p>Because the <code>mobileinit</code> event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded. Thus, we recommend linking to your JavaScript files in the following order:</p>
33+
34+
<pre>
35+
<code>
36+
&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
37+
<strong>&lt;script src=&quot;custom-scripting.js&quot;&gt;&lt;/script&gt;</strong>
38+
&lt;script src=&quot;jquery-mobile.js&quot;&gt;&lt;/script&gt;
39+
</code>
40+
</pre>
41+
42+
<p>Within this event binding, you can configure defaults either by extending the <code>$.mobile</code> object using jQuery's <code>$.extend</code> method:</p>
43+
44+
<pre>
45+
<code>
46+
$(document).bind("mobileinit", function(){
47+
$.extend( $.mobile , {
48+
<strong>foo: bar</strong>
49+
});
50+
});
51+
</code>
52+
</pre>
53+
54+
<p>...or by setting them individually:</p>
55+
<pre>
56+
<code>
57+
$(document).live("mobileinit", function(){
58+
<strong>$.mobile.foo = bar;</strong>
59+
});
60+
</code>
61+
</pre>
62+
63+
<p>Visit the <a href="global-settings.html">Configurable Default Settings</a> page for information on the configurable defaults.</p>
64+
65+
</div><!-- /content -->
66+
</div><!-- /page -->
67+
68+
</body>
69+
</html>

‎docs/api/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>jQuery UI Mobile Framework - API</title>
6+
<link rel="stylesheet" href="../../themes/default" />
7+
<script type="text/javascript" src="../../js/"></script>
8+
</head>
9+
<body>
10+
<div data-role="page" data-theme="b">
11+
12+
<div data-role="header" data-position="inline">
13+
<h1>API</h1>
14+
</div>
15+
16+
<div data-role="content">
17+
18+
19+
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
20+
<li><a href="themes.html">Theme system</a></li>
21+
<li><a href="events.html">Events</a></li>
22+
<li><a href="globalconfig.html">Configuring Default Settings</a></li>
23+
<li><a href="global-settings.html">Available Default Settings</a></li>
24+
</ul>
25+
26+
</div>
27+
28+
</div>
29+
</body>
30+
</html>

docs/about/themes.html renamed to docs/api/themes.html

File renamed without changes.

‎docs/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ <h1>jQuery Mobile Docs</h1>
2323
<li><a href="content/index.html">Content formatting</a></li>
2424
<li><a href="forms/index.html">Form elements</a></li>
2525
<li><a href="lists/index.html">List views</a></li>
26-
<li><a href="events.html">Events</a></li>
2726
</ul>
2827

2928
</div>

‎index.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,14 @@ <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mob
2525
<li><a href="docs/about/features.html">Features</a></li>
2626
<li><a href="docs/about/accessibility.html">Accessibility</a></li>
2727
<li><a href="docs/about/platforms.html">Supported platforms</a></li>
28-
<li><a href="docs/about/themes.html">Theme system</a></li>
28+
</ul>
29+
30+
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
31+
<li data-role="list-divider">API</li>
32+
<li><a href="docs/api/themes.html">Theme system</a></li>
33+
<li><a href="docs/api/events.html">Events</a></li>
34+
<li><a href="docs/api/globalconfig.html">Configuring Default Settings</a></li>
35+
<li><a href="docs/api/global-settings.html">Available Default Settings</a></li>
2936
</ul>
3037

3138
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
@@ -36,7 +43,7 @@ <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mob
3643
<li><a href="docs/content/index.html">Content formatting</a></li>
3744
<li><a href="docs/forms/index.html">Form elements</a></li>
3845
<li><a href="docs/lists/index.html">List views</a></li>
39-
<li><a href="docs/events.html">Events</a></li>
46+
<li><a href="docs/api/events.html">Events</a></li>
4047
</ul>
4148

4249
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">

0 commit comments

Comments
 (0)