Skip to content

Commit 03be101

Browse files
committed
updated widget entries (a to popup) to match the new template
1 parent e8c5b3a commit 03be101

File tree

11 files changed

+190
-178
lines changed

11 files changed

+190
-178
lines changed

entries/footer.xml

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,23 +49,26 @@
4949
<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:
5050
<iframe src="/resources/footer/example4.html" style="width:100%;height:90px;border:0px"></iframe></p>
5151

52-
5352
<h3>Fixed &amp; Persistent footers</h3>
5453
<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>
5554
<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>
5655
</longdesc>
5756
<added>1.0</added>
5857
<example>
5958
<desc>A basic example of a footer</desc>
60-
<html><![CDATA[<div data-role="header">
59+
<html><![CDATA[
60+
<div data-role="page" id="page1">
61+
<div data-role="header">
6162
<h1>jQuery Mobile Example</h1>
6263
</div>
6364
<div data-role="content">
6465
<p>Some content here</p>
6566
</div>
6667
<div data-role="footer">
6768
<h4>Footer content</h4>
68-
</div> ]]></html>
69+
</div>
70+
</div>
71+
]]></html>
6972
</example>
7073
<category slug="widgets"/>
7174
</entry>

entries/grid-layout.xml

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,16 +109,21 @@
109109
</methods>
110110
<example>
111111
<desc>A basic example of grid layout</desc>
112-
<html><![CDATA[<div data-role="header">
112+
<html><![CDATA[
113+
<div data-role="page" id="page1">
114+
<div data-role="header">
113115
<h1>Grid Layout Example</h1>
114116
</div>
115117
<div data-role="content">
116-
<fieldset class="ui-grid-a">
117118
<div class="ui-grid-a">
118-
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
119-
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
120-
</div><!-- /grid-a -->
121-
</div>]]></html>
119+
<div class="ui-grid-a">
120+
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
121+
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
122+
</div><!-- /grid-a -->
123+
</div>
124+
</div>
125+
</div>
126+
]]></html>
122127
</example>
123128
<category slug="misc"/>
124129
</entry>

entries/header.xml

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,12 +108,16 @@ If you're doing this programmatically, set this option inside the mobileinit eve
108108
<added>1.0</added>
109109
<example>
110110
<desc>A basic example of a header</desc>
111-
<html><![CDATA[<div data-role="header">
111+
<html><![CDATA[
112+
<div data-role="page" id="page1">
113+
<div data-role="header">
112114
<h1>Page Title</h1>
113115
</div>
114116
<div data-role="content">
115117
<p>Some content here</p>
116-
</div> ]]></html>
118+
</div>
119+
</div>
120+
]]></html>
117121
</example>
118122
<category slug="widgets"/>
119123
</entry>

entries/jQuery.mobile.activePage.xml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@
3535
<input type="button" value="Which Page is this?" class="myButton" data-inline="true"/> <br>
3636
<div class="myResult">The result will be displayed here</div>
3737
</div>
38-
</div>]]></html>
38+
</div>
39+
]]></html>
3940
<code><![CDATA[
4041
$(function() {
4142
$( ".myButton" ).on( "click", function() {

entries/listview.xml

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
&lt;/ul&gt;
1717
</code></pre>
1818

19-
<p><iframe src="/resources/listview/example1.html" style="width:100%;height:940px;border:0px"></iframe></p>
19+
<p><iframe src="/resources/listview/example1.html" style="width:100%;height:940px;border:0px"></iframe></p>
2020

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>
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>
2222

2323
<h3>Nested lists</h3>
2424
<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>
@@ -136,13 +136,10 @@ function( text, searchValue, item ) {
136136

137137
<p><iframe src="/resources/listview/example16.html" style="width:100%;height:1040px;border:0px"></iframe></p>
138138

139-
140139
<h3>Cities worldwide</h3>
141-
142140
<p>After you enter <strong>at least three characters</strong> the autocomplete function will show all possible matches.</p>
143141

144142
<h3>Calling the listview plugin</h3>
145-
146143
<p>You can directly call the listview plugin on any selector, just like any jQuery plugin:</p>
147144
<pre><code>
148145
$( "#mylist" ).listview();
@@ -277,8 +274,11 @@ $( document ).on( "mobileinit", function() {
277274
</method>
278275
</methods>
279276
<example>
277+
<height>260</height>
280278
<desc>A basic example of a listview</desc>
281-
<html><![CDATA[<div data-role="header">
279+
<html><![CDATA[
280+
<div data-role="page" id="page1">
281+
<div data-role="header">
282282
<h1>jQuery Mobile Example</h1>
283283
</div>
284284
<div data-role="content">
@@ -289,7 +289,9 @@ $( document ).on( "mobileinit", function() {
289289
<li><a href="index.html">Cadillac</a></li>
290290
<li><a href="index.html">Chrysler</a></li>
291291
</ul>
292-
</div>]]></html>
292+
</div>
293+
<div>
294+
]]></html>
293295
</example>
294296
<category slug="widgets"/>
295297
</entry>

entries/loader.xml

Lines changed: 57 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,25 @@
99
<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>
1010
<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:
1111

12-
<pre>
13-
<code>
14-
$( document ).on( "mobileinit", function() {
15-
$.mobile.loader.prototype.options.text = "loading";
16-
$.mobile.loader.prototype.options.textVisible = false;
17-
$.mobile.loader.prototype.options.theme = "a";
18-
$.mobile.loader.prototype.options.html = "";
19-
});
20-
</code>
21-
</pre>
12+
<pre><code>
13+
$( document ).on( "mobileinit", function() {
14+
$.mobile.loader.prototype.options.text = "loading";
15+
$.mobile.loader.prototype.options.textVisible = false;
16+
$.mobile.loader.prototype.options.theme = "a";
17+
$.mobile.loader.prototype.options.html = "";
18+
});
19+
</code></pre>
2220

2321
<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>
2422

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>
3531
</longdesc>
3632
<added>1.2</added>
3733
<options>
@@ -103,50 +99,55 @@
10399
<desc><p class="ui-body ui-body-e"><strong>Deprecated</strong> in 1.2 - use <code>$.mobile.loading( "show" )</code> instead, see examples above</p>
104100
Show the page loading message, which is configurable via $.mobile.loadingMessage.
105101
<pre><code>
106-
//cue the page loader
107-
$.mobile.showPageLoadingMsg();
102+
//cue the page loader
103+
$.mobile.showPageLoadingMsg();
108104

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 );
111107
</code></pre>
112108
</desc>
113109
</method>
114110
</methods>
115111
<example>
116-
<height>370</height>
112+
<height>410</height>
117113
<desc>Loader Examples</desc>
118-
<code><![CDATA[
119-
$(document).on( "click", ".show-page-loading-msg", function() {
120-
var $this = $( this ),
121-
theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
122-
msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
123-
textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
124-
textonly = !!$this.jqmData( "textonly" );
125-
html = $this.jqmData( "html" ) || "";
126-
$.mobile.loading( 'show', {
127-
text: msgText,
128-
textVisible: textVisible,
129-
theme: theme,
130-
textonly: textonly,
131-
html: html
132-
});
133-
})
134-
.on( "click", ".hide-page-loading-msg", function() {
135-
$.mobile.loading( "hide" );
136-
});
137-
]]></code>
138114
<html><![CDATA[
139-
<div data-role="controlgroup">
140-
<button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="false" data-msgtext="" data-icon="arrow-r" data-iconpos="right">Default loader</button>
141-
<button class="show-page-loading-msg" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Text only loader" data-icon="arrow-r" data-iconpos="right">Text only</button>
142-
<button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme a" data-icon="arrow-r" data-iconpos="right">Theme a</button>
143-
<button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme b" data-icon="arrow-r" data-iconpos="right">Theme b</button>
144-
<button class="show-page-loading-msg" data-theme="c" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme c" data-icon="arrow-r" data-iconpos="right">Theme c</button>
145-
<button class="show-page-loading-msg" data-theme="d" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme d" data-icon="arrow-r" data-iconpos="right">Theme d</button>
146-
<button class="show-page-loading-msg" data-theme="e" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme e" data-icon="arrow-r" data-iconpos="right">Theme e</button>
147-
<button class="show-page-loading-msg" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-icon="arrow-r" data-html="<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../_assets/images/jquery-logo.png' /><h2>is loading for you ...</h2></span>" data-iconpos="right">Custom HTML</button>
148-
<button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">Hide</button>
149-
</div> ]]></html>
115+
<div data-role="page" id="page1">
116+
<div data-role="content">
117+
<div data-role="controlgroup">
118+
<button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="false" data-msgtext="" data-icon="arrow-r" data-iconpos="right">Default loader</button>
119+
<button class="show-page-loading-msg" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Text only loader" data-icon="arrow-r" data-iconpos="right">Text only</button>
120+
<button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme a" data-icon="arrow-r" data-iconpos="right">Theme a</button>
121+
<button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme b" data-icon="arrow-r" data-iconpos="right">Theme b</button>
122+
<button class="show-page-loading-msg" data-theme="c" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme c" data-icon="arrow-r" data-iconpos="right">Theme c</button>
123+
<button class="show-page-loading-msg" data-theme="d" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme d" data-icon="arrow-r" data-iconpos="right">Theme d</button>
124+
<button class="show-page-loading-msg" data-theme="e" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme e" data-icon="arrow-r" data-iconpos="right">Theme e</button>
125+
<button class="show-page-loading-msg" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-icon="arrow-r" data-html="<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../_assets/images/jquery-logo.png' /><h2>is loading for you ...</h2></span>" data-iconpos="right">Custom HTML</button>
126+
<button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">Hide</button>
127+
</div>
128+
</div>
129+
</div>
130+
]]></html>
131+
<code><![CDATA[
132+
$(document).on( "click", ".show-page-loading-msg", function() {
133+
var $this = $( this ),
134+
theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
135+
msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
136+
textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
137+
textonly = !!$this.jqmData( "textonly" );
138+
html = $this.jqmData( "html" ) || "";
139+
$.mobile.loading( 'show', {
140+
text: msgText,
141+
textVisible: textVisible,
142+
theme: theme,
143+
textonly: textonly,
144+
html: html
145+
});
146+
})
147+
.on( "click", ".hide-page-loading-msg", function() {
148+
$.mobile.loading( "hide" );
149+
});
150+
]]></code>
150151
</example>
151152
<category slug="widgets"/>
152153
</entry>

entries/navbar.xml

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -38,29 +38,19 @@
3838
<p>Adding a fourth more item will automatically make each button 1/4 the width of the browser window:
3939
<iframe src="/resources/navbar/example3.html" style="width:100%;height:90px;border:0px"></iframe></p>
4040

41-
42-
4341
<p>The navbar maxes out with 5 items, each 1/5 the width of the browser window:
4442
<iframe src="/resources/navbar/example4.html" style="width:100%;height:90px;border:0px"></iframe></p>
4543

46-
47-
4844
<p>If more than 5 items are added, the navbar will simply wrap to multiple lines:
4945
<iframe src="/resources/navbar/example5.html" style="width:100%;height:90px;border:0px"></iframe></p>
5046

51-
52-
5347
<p>Navbars with 1 item will simply render as 100%.
5448
<iframe src="/resources/navbar/example6.html" style="width:100%;height:90px;border:0px"></iframe></p>
5549

56-
57-
5850
<h3>Navbars in headers</h3>
5951
<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.
6052
<iframe src="/resources/navbar/example7.html" style="width:100%;height:90px;border:0px"></iframe></p>
6153

62-
63-
6454
<h3>Navbars in footers</h3>
6555
<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>
6656

@@ -92,20 +82,13 @@
9282
<p>This will result in a bottom icon alignment:
9383
<iframe src="/resources/navbar/example10.html" style="width:100%;height:90px;border:0px"></iframe></p>
9484

95-
96-
9785
<p>The icon position can be set to <code>data-iconpos="left"</code>:
9886
<iframe src="/resources/navbar/example11.html" style="width:100%;height:90px;border:0px"></iframe></p>
9987

100-
101-
10288
<p>Or the icon position can be set to <code>data-iconpos="right"</code>:
10389
<iframe src="/resources/navbar/example12.html" style="width:100%;height:90px;border:0px"></iframe></p>
10490

105-
106-
10791
<h3>Using 3rd party icon sets</h3>
108-
10992
<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>
11093

11194
<iframe src="/resources/navbar/example13.html" style="width:100%;height:90px;border:0px"></iframe>
@@ -146,20 +129,24 @@ $( "div" ).navbar({
146129
</events>
147130
<example>
148131
<desc>A basic example of a navbar</desc>
149-
<html><![CDATA[<div data-role="header">
132+
<html><![CDATA[
133+
<div data-role="page" id="page1">
134+
<div data-role="header">
150135
<h1>jQuery Mobile Example</h1>
151136
</div>
152137
<div data-role="content">
153138
<p>Some Content here</p>
154139
</div>
155140
<div data-role="footer">
156-
<div data-role="navbar">
157-
<ul>
158-
<li><a href="#" class="ui-btn-active">One</a></li>
159-
<li><a href="#">Two</a></li>
160-
</ul>
161-
</div><!-- /navbar -->
162-
</div>]]></html>
141+
<div data-role="navbar">
142+
<ul>
143+
<li><a href="#" class="ui-btn-active">One</a></li>
144+
<li><a href="#">Two</a></li>
145+
</ul>
146+
</div><!-- /navbar -->
147+
</div>
148+
</div>
149+
]]></html>
163150
</example>
164151
<category slug="widgets"/>
165152
</entry>

entries/page.xml

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<longdesc>
77
<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>
88

9-
<p>The goal of this model is to allow developers to create websites using best practices &#8212; where ordinary links will "just work" without any special configuration &#8212; 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 &#8212; where ordinary links will "just work" without any special configuration &#8212; while creating a rich, native-like experience that can't be achieved with standard HTTP requests.</p>
1010

1111
<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>
1212
<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>
@@ -64,7 +64,9 @@
6464
</methods>
6565
<example>
6666
<desc>A basic example of a page.</desc>
67-
<html><![CDATA[<div data-role="header">
67+
<html><![CDATA[
68+
<div data-role="page" id="page1">
69+
<div data-role="header">
6870
<h1>Page header (optional): Example page</h1>
6971
</div>
7072
<div data-role="content">
@@ -73,7 +75,9 @@
7375
</div>
7476
<div data-role="footer">
7577
<h1>Page footer (optional)</h1>
76-
</div>]]></html>
78+
</div>
79+
</div>
80+
]]></html>
7781
</example>
7882
<category slug="widgets"/>
7983
</entry>

0 commit comments

Comments
 (0)