You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: entries/footer.xml
+6-3Lines changed: 6 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -49,23 +49,26 @@
49
49
<p>Form elements and other content can also be added to toolbars. Here is an example of a select menu inside a footer bar. We recommend using mini-sized form elements in toolbars by adding the <code>data-mini="true"</code> attribute:
<p>In situations where the footer is a global navigation element, you may want it to appear fixed so it doesn't scroll out of view. It's also possible to make a fixed toolbar persistent so it appears to not move between page transitions. This can be accomplished by using the persistent footer feature included in jQuery Mobile.</p>
55
54
<p>To make a footer persistent 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. <strong>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.</strong></p>
<p><strong>Style note on non-inset lists</strong>: all standard, non-inset lists have a -15px margin to negate the 15px of padding on the content area to make lists extend to the edges of the screen. If you add other widgets above or below a list, the negative margin may make these elements overlap so you'll need to add additional spacing in your custom CSS.</p>
21
+
<p><strong>Style note on non-inset lists</strong>: all standard, non-inset lists have a -15px margin to negate the 15px of padding on the content area to make lists extend to the edges of the screen. If you add other widgets above or below a list, the negative margin may make these elements overlap so you'll need to add additional spacing in your custom CSS.</p>
22
22
23
23
<h3>Nested lists</h3>
24
24
<p>By nesting child <code>ul</code> or <code>ol</code> inside list items, you can create nested lists. When a list item with a child list is clicked, the framework will show a new page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation. Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework. Note that the page of each nested listview is created when the parent page loads and for each nested page the page-events will trigger. Please also note that the title of subpages will contain the text of the first element in the parent list item including its elements. So make sure to use a single element for the list item caption and put other elements like count bubbles behind that caption as shown in the demo below.</p>
Copy file name to clipboardExpand all lines: entries/loader.xml
+57-56Lines changed: 57 additions & 56 deletions
Original file line number
Diff line number
Diff line change
@@ -9,29 +9,25 @@
9
9
<p>The page loading widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. It can also be displayed manually for custom loading actions using the <code>$.mobile.loading</code> helper method (See the global method docs).</p>
10
10
<p>To configure the loading dialog globally the following settings can be defined on its prototype during the <code>mobileinit</code> event.</p> Below are the defaults:
<p>These settings will be overridden by the deprecated settings to preserve backward compatibility. Once the deprecated settings are removed these defaults will only be superseded by the method params object described in the global method docs under <code>$.mobile.loading</code>.</p>
24
22
25
-
<pre>
26
-
<code>
27
-
$.mobile.loading( "show", {
28
-
text: "foo",
29
-
textVisible: true,
30
-
theme: "z",
31
-
html: ""
32
-
});
33
-
</code>
34
-
</pre>
23
+
<pre><code>
24
+
$.mobile.loading( "show", {
25
+
text: "foo",
26
+
textVisible: true,
27
+
theme: "z",
28
+
html: ""
29
+
});
30
+
</code></pre>
35
31
</longdesc>
36
32
<added>1.2</added>
37
33
<options>
@@ -103,50 +99,55 @@
103
99
<desc><pclass="ui-body ui-body-e"><strong>Deprecated</strong> in 1.2 - use <code>$.mobile.loading( "show" )</code> instead, see examples above</p>
104
100
Show the page loading message, which is configurable via $.mobile.loadingMessage.
105
101
<pre><code>
106
-
//cue the page loader
107
-
$.mobile.showPageLoadingMsg();
102
+
//cue the page loader
103
+
$.mobile.showPageLoadingMsg();
108
104
109
-
//use theme swatch "b", a custom message, and no spinner
110
-
$.mobile.showPageLoadingMsg( "b", "This is only a test", true );
105
+
//use theme swatch "b", a custom message, and no spinner
106
+
$.mobile.showPageLoadingMsg( "b", "This is only a test", true );
<p>If you want to add a navbar to the top of the page, you can still have a page title and buttons. Just add the navbar container inside the header block, right after the title and buttons in the source order.
<p>If you want to add a navbar to the bottom of the page so it acts more like a tab bar, simply wrap the navbar in a container with a <code>data-role="footer"</code></p>
<p>You can add any of the popular icon libraries like Glyphish to achieve the iOS style tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:</p>
Copy file name to clipboardExpand all lines: entries/page.xml
+7-3Lines changed: 7 additions & 3 deletions
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@
6
6
<longdesc>
7
7
<p>The page widget is responsible for managing a single item in jQuery Mobile's page-based architecture. It is designed to support either single page widgets within a HTML document, or multiple local internal linked page widgets within a HTML document.</p>
8
8
9
-
<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>
9
+
<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>
10
10
11
11
<p><strong>Caveat:</strong> Documents containing multiple pages cause Internet Explorer 7 to exhibit incorrect behavior when its "Back" button is pressed. In particular, if the user navigates between several of the pages internal to the document that has been loaded and then clicks the "Back" button to return to the start page, there will be occasions when clicking the "Back" button does not cause a return to the previous page. However, clicking the "Back" button enough times will eventually return the user through the performed navigation sequence back to the start page.</p>
12
12
<p>Thus, if Internet Explorer 7 represents a significant proportion of the targeted user base, we recommended that pages be organized as individual HTML documents containing single page widgets, rather than as a single HTML document containing multiple internal pages.</p>
0 commit comments