Skip to content

Commit 64e0b7f

Browse files
arschmitzarschmitz
committed
Demos: add quicklink panels to accordians, autocomplete, buttons, checkbox, collapsibles, and controlgroups
1 parent 827050a commit 64e0b7f

File tree

10 files changed

+18
-57
lines changed

10 files changed

+18
-57
lines changed

‎docs/demos/_assets/js/h2widget.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
this.element.find(".jqm-quicklink-panel").panel().find("ul").listview();
4747
}
4848
$.each(h2dictionary,function(id,text){
49-
self.element.find(".jqm-quicklink-panel ul").append("<li><a href='"+id+"'>"+text+"</a></li>");
49+
self.element.find(".jqm-quicklink-panel ul").append("<li><a href='#"+id+"'>"+text+"</a></li>");
5050
});
5151
self.element.find(".jqm-quicklink-panel ul").listview("refresh");
5252

‎docs/demos/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script src="../../js/jquery.js"></script>
1212
<script src="_assets/js/"></script>
1313
<script src="../../js/"></script>
14+
<script src="_assets/js/h2widget.js"></script>
1415
</head>
1516
<body>
1617
<div data-role="page" class="jqm-demos jqm-demos-home">

‎docs/demos/widgets/accordions/index.html‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,10 @@
1111
<script src="../../../../js/jquery.js"></script>
1212
<script src="../../_assets/js/"></script>
1313
<script src="../../../../js/"></script>
14+
<script src="../../_assets/js/h2widget.js"></script>
1415
</head>
1516
<body>
16-
<div data-role="page" class="jqm-demos">
17-
18-
<div data-role="panel" id="accordion-sections" class="jqm-nav-panel" data-position="right" data-display="overlay" data-theme="c">
19-
20-
<ul data-role="listview" data-inset="false" data-theme="d" data-divider-theme="d" class="jqm-list">
21-
<li class="jqm-list-header">Jump to section</li>
22-
<li><a href="#accordion-markup" data-ajax="false">Markup</a></li>
23-
<li><a href="#accordion-inline" data-ajax="false">Inline</a></li>
24-
<li><a href="#accordion-mini" data-ajax="false">Mini</a></li>
25-
<li><a href="#accordion-icons" data-ajax="false">Icons</a></li>
26-
<li><a href="#accordion-icon-position" data-ajax="false">Icon position</a></li>
27-
<li><a href="#accordion-corners" data-ajax="false">Corners</a></li>
28-
<li><a href="#accordion-theme" data-ajax="false">Theme</a></li>
29-
</ul>
30-
</div>
17+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
3118

3219
<div data-role="header" class="jqm-header" data-theme="f">
3320
<h1>jQuery Mobile</h1>
@@ -41,7 +28,6 @@ <h1>Accordions <a href="http://api.jquerymobile.com/collapsible-set/" data-ajax=
4128

4229

4330
<p class="jqm-intro">An accordion is created in jQuery Mobile by grouping a series of individual collapsibles into set.
44-
<a href="#accordion-sections" class="jqm-sections-link">Jump to section <span class="ui-icon ui-icon-bars">&nbsp;</span></a>
4531
</p>
4632

4733

‎docs/demos/widgets/autocomplete/autocomplete-remote.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script src="../../../../js/jquery.js"></script>
1212
<script src="../../_assets/js/"></script>
1313
<script src="../../../../js/"></script>
14+
<script src="../../_assets/js/h2widget.js"></script>
1415
<script>
1516
$( document ).on( "pageinit", "#myPage", function() {
1617
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
@@ -49,7 +50,7 @@
4950
</style>
5051
</head>
5152
<body>
52-
<div data-role="page" class="jqm-demos" id="myPage">
53+
<div data-role="page" class="jqm-demos" id="myPage" data-quicklinks="true">
5354

5455
<div data-role="header" class="jqm-header" data-theme="f">
5556
<h1>Remote Autocomplete</h1>

‎docs/demos/widgets/autocomplete/index.html‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,10 @@
1111
<script src="../../../../js/jquery.js"></script>
1212
<script src="../../_assets/js/"></script>
1313
<script src="../../../../js/"></script>
14+
<script src="../../_assets/js/h2widget.js"></script>
1415
</head>
1516
<body>
16-
<div data-role="page" class="jqm-demos">
17-
18-
<div data-role="panel" id="autocomplete-sections" class="jqm-nav-panel" data-position="right" data-display="overlay" data-theme="c">
19-
20-
<ul data-role="listview" data-inset="false" data-theme="d" data-divider-theme="d" class="jqm-list">
21-
<li class="jqm-list-header">Jump to section</li>
22-
<li><a href="#autocomplete-remote" data-ajax="false">Remote data</a></li>
23-
<li><a href="#autocomplete-local" data-ajax="false">Local data</a></li>
24-
<li><a href="#autocomplete-filtertext" data-ajax="false">Providing richer content</a></li>
25-
</ul>
26-
</div>
17+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
2718

2819
<div data-role="header" class="jqm-header" data-theme="f">
2920
<h1>jQuery Mobile</h1>
@@ -37,7 +28,6 @@ <h1>Autocomplete <a href="http://api.jquerymobile.com/listview/#option-filter" d
3728

3829

3930
<p class="jqm-intro">An autocomplete widget backed by either local or remote data can be created by leveraging the listview filter feature.
40-
<a href="#autocomplete-sections" class="jqm-sections-link">Jump to section <span class="ui-icon ui-icon-bars">&nbsp;</span></a>
4131
</p>
4232

4333

‎docs/demos/widgets/buttons/buttons-grids.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@
1111
<script src="../../../../js/jquery.js"></script>
1212
<script src="../../_assets/js/"></script>
1313
<script src="../../../../js/"></script>
14+
<script src="../../_assets/js/h2widget.js"></script>
1415
<style>
1516
.mygrid > div {
1617
text-align: center;
1718
}
1819
</style>
1920
</head>
2021
<body>
21-
<div data-role="page" class="jqm-demos">
22+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
2223

2324
<div data-role="header" class="jqm-header" data-theme="f">
2425
<h1>Buttons in grids</h1>

‎docs/demos/widgets/checkbox/index.html‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,10 @@
1111
<script src="../../../../js/jquery.js"></script>
1212
<script src="../../_assets/js/"></script>
1313
<script src="../../../../js/"></script>
14+
<script src="../../_assets/js/h2widget.js"></script>
1415
</head>
15-
<div data-role="page" class="jqm-demos">
16+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
1617

17-
<div data-role="panel" id="check-sections" class="jqm-nav-panel" data-position="right" data-display="overlay" data-theme="c">
18-
19-
<ul data-role="listview" data-inset="false" data-theme="d" data-divider-theme="d" class="jqm-list">
20-
<li class="jqm-list-header">Jump to section</li>
21-
<li><a href="#check-markup" data-ajax="false">Basic markup</a></li>
22-
<li><a href="#check-mini" data-ajax="false">Mini</a></li>
23-
<li><a href="#check-vert" data-ajax="false">Vertical group</a></li>
24-
<li><a href="#check-horiz" data-ajax="false">Horizontal group</a></li>
25-
<li><a href="#check-iconpos" data-ajax="false">Icon position</a></li>
26-
<li><a href="#check-theme" data-ajax="false">Theme</a></li>
27-
</ul>
28-
</div>
2918

3019
<div data-role="header" class="jqm-header" data-theme="f">
3120
<h1>jQuery Mobile</h1>
@@ -38,7 +27,6 @@ <h1>jQuery Mobile</h1>
3827
<h1>Checkboxes <a href="http://api.jquerymobile.com/checkboxradio/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>
3928

4029
<p class="jqm-intro">Checkboxes are used to provide a list of options where more than one can be selected.
41-
<a href="#check-sections" class="jqm-sections-link">Jump to section <span class="ui-icon ui-icon-bars">&nbsp;</span></a>
4230
</p>
4331

4432

‎docs/demos/widgets/collapsibles/index.html‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,14 @@
1111
<script src="../../../../js/jquery.js"></script>
1212
<script src="../../_assets/js/"></script>
1313
<script src="../../../../js/"></script>
14+
<script src="../../_assets/js/h2widget.js"></script>
1415
<style>
1516
#demo-borders .ui-collapsible .ui-collapsible-heading .ui-btn { border-top-width: 1px !important; }
1617
</style>
1718
</head>
1819
<body>
19-
<div data-role="page" class="jqm-demos">
20+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
2021

21-
<div data-role="panel" id="collapsible-sections" class="jqm-nav-panel" data-position="right" data-display="overlay" data-theme="c">
22-
<p>To be generated via JS.</p>
23-
</div>
2422

2523
<div data-role="header" class="jqm-header" data-theme="f">
2624
<h1>jQuery Mobile</h1>
@@ -34,7 +32,6 @@ <h1>Collapsibles <a href="http://api.jquerymobile.com/collapsible/" data-ajax="f
3432

3533

3634
<p class="jqm-intro">Collapsibles are simple widgets that allow you to expand or collapse content when tapped and are useful in mobile to provide a compact presentation of content.
37-
<a href="#collapsible-sections" class="jqm-sections-link">Jump to section <span class="ui-icon ui-icon-bars">&nbsp;</span></a>
3835
</p>
3936

4037
<h2>Basic collapsible</h2>

‎docs/demos/widgets/controlgroups/index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,10 @@
1111
<script src="../../../../js/jquery.js"></script>
1212
<script src="../../_assets/js/"></script>
1313
<script src="../../../../js/"></script>
14+
<script src="../../_assets/js/h2widget.js"></script>
1415
</head>
1516
<body>
16-
<div data-role="page" class="jqm-demos">
17-
18-
<div data-role="panel" id="collapsible-sections" class="jqm-nav-panel" data-position="right" data-display="overlay" data-theme="c">
19-
<p>To be generated via JS.</p>
20-
</div>
17+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
2118

2219
<div data-role="header" class="jqm-header" data-theme="f">
2320
<h1>jQuery Mobile</h1>
@@ -31,7 +28,6 @@ <h1>Controlgroup <a href="http://api.jquerymobile.com/controlgroup/" data-ajax="
3128

3229

3330
<p class="jqm-intro">Controlgroups are used to visually group a set of buttons to form a single block that looks contained like a navigation component.
34-
<a href="#collapsible-sections" class="jqm-sections-link">Jump to section <span class="ui-icon ui-icon-bars">&nbsp;</span></a>
3531
</p>
3632

3733
<h2>Controlgroup vertical</h2>

‎docs/demos/widgets/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
1111
<script src="../../../js/jquery.js"></script>
1212
<script src="../_assets/js/"></script>
13-
<script src="../../../js/"></script>
13+
<script src="../../../js/"></script>
14+
<script src="../_assets/js/h2widget.js"></script>
1415
</head>
1516
<body>
1617
<div data-role="page" class="jqm-demos jqm-demos-index">

0 commit comments

Comments
 (0)