Skip to content

Commit 8ec70da

Browse files
arschmitzarschmitz
committed
Turn into an extension for this listview widget.
simplifies event bindings and makes dynamic lists possible also allows disableing of the feature via option setting fixes protocols in demo Fixes #2
1 parent f8eae09 commit 8ec70da

File tree

3 files changed

+79
-43
lines changed

3 files changed

+79
-43
lines changed

‎README.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
jquery-mobile-nestedlists
1+
jQuery-mobile-nestedlists
22
=========================
3+
this is an extension to the listview widget which
4+
restores jQuery mobile 1.3 nested listviews in jQuery mobile 1.4
35

4-
restores jquery mobile 1.3 nested listviews in jquery mobile 1.4
6+
to enable this behavior simply include the widget simply include this extension
7+
8+
to turn it off for a specific list set the childPages option to false;
59

610
Demo at https://rawgithub.com/arschmitz/jquery-mobile-nestedlists/master/index.html

‎index.html

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,23 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
8-
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
9-
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
8+
<script src="//code.jquery.com/jquery-1.10.1.js"></script>
9+
<script src="//code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
1010
<script src="jquery.mobile.nestedlists.js"></script>
1111
<style>
1212
#edit-with-js-bin { display: none !important; }
1313
</style>
14+
<script>
15+
$( document ).on( "click", "#injectList", function(){
16+
var list = "<ul><li>Item 1 i have a submenu" +
17+
"<ul><li>submenuitem</li><li>submenuitem2</li></ul>" +
18+
"<li>Item 2 i have no sub menu</li></ul>";
19+
$( "#content" ).append( $( list ).listview({
20+
childPages: true,
21+
inset: true
22+
}));
23+
});
24+
</script>
1425
</head>
1526
<body>
1627
<div data-role="page">
@@ -23,7 +34,7 @@ <h3>Nestedlists is a plugin and that allows several styles of nested lists</h3>
2334
<p> plugin and css available at <a href="https://github.com/arschmitz/jquery-mobile-nestedlists/">https://github.com/arschmitz/jquery-mobile-nestedlists/</a>
2435
</p>
2536
<br>
26-
<ul data-role="listview">
37+
<ul data-role="listview" data-child-pages="true">
2738
<li data-role="list-divider" data-theme="b"><h1>Seperate Page Sublists</h1></li>
2839
<li>
2940
<a href="#acura"><h1>Acura</h1>
@@ -44,7 +55,7 @@ <h3>Nestedlists is a plugin and that allows several styles of nested lists</h3>
4455
</li>
4556
<li >
4657
<h1>Audi</h1>
47-
<ul >
58+
<ul>
4859
<li>A6</li>
4960
<li>S6</li>
5061
<li>A7</li>
@@ -64,8 +75,7 @@ <h1>BMW</h1>
6475
</ul>
6576
</li>
6677
<li>
67-
<h1>Cadillac
68-
</h1>
78+
<h1>Cadillac</h1>
6979
<ul >
7080
<li>CTS</li>
7181
<li>ATS</li>
@@ -83,7 +93,7 @@ <h1>Lexus</h1>
8393
</li>
8494
<li>
8595
<h1>Mercedes</h1>
86-
<ul >
96+
<ul>
8797
<li>A-Class</li>
8898
<li>B-Class</li>
8999
<li>C-Class</li>
@@ -92,6 +102,8 @@ <h1>Mercedes</h1>
92102
</ul>
93103
</li>
94104
</ul>
105+
<br/><br/>
106+
<button id="injectList">Add Dynamic List</button>
95107
</div><!-- /content -->
96108
</div><!-- /page -->
97109
<div data-role="page" id="acura">

‎jquery.mobile.nestedlists.js

Lines changed: 54 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,61 @@
11
(function( $, window, undefined ) {
2-
$.mobile.document.on("pagecreate", "div", function(){
3-
$("ul>li>ul").css("display","none");
4-
$("ul>li>ul").parent().addClass("ui-btn ui-btn-icon-right ui-icon-carat-r");
5-
});
6-
$.mobile.document.on( "click", ".ui-listview>li", function(){
7-
if( $(this).children( "ul" ).length == 0 ) {
8-
return;
9-
}
10-
var newPage = $.mobile.nestedlists.page.clone().uniqueId(),
11-
nestedList = $( this ).children("ul").clone().attr( "data-" + $.mobile.ns + "role", "listview" ).css("display","block"),
12-
pageName = ( $( this.childNodes[0] ).text().replace(/^\s+|\s+$/g, '').length > 0 )? $( this.childNodes[0] ).text() : $( this.childNodes[1] ).text(),
13-
pageID = newPage.attr( "id" );
14-
15-
// Build new page
16-
newPage.append($.mobile.nestedlists.header.clone().find("h1").text(pageName).end())
17-
.append($.mobile.nestedlists.content.clone())
18-
.find("div.ui-content").append(nestedList);
19-
20-
$.mobile.pageContainer.append(newPage);
2+
$.widget( "mobile.listview", $.mobile.listview, {
3+
options: {
4+
childPages: true,
5+
page: "<div data-role='page'></div>",
6+
header: "<div data-role='header'><a href='#' data-rel='back'>Back</a><h1></h1></div>",
7+
content: "<div class='ui-content'></div>"
8+
},
9+
_create: function(){
10+
this._super();
11+
if( this.options.childPages ) {
12+
this._attachBindings();
13+
this.element.find( "ul" )
14+
.css( "display","none" )
15+
.parent()
16+
.addClass("ui-btn ui-btn-icon-right ui-icon-carat-r");
17+
}
18+
},
19+
_attachBindings: function() {
20+
this._on({
21+
"click": "_handleSubpageClick"
22+
});
23+
this._on( "body", {
24+
"pagechange": function(){
25+
if ( this.opening === true ) {
26+
this.open = true;
27+
this.opening = false;
28+
} else if ( this.open === true ) {
29+
this.newPage.remove();
30+
this.open = false;
31+
}
32+
}
33+
});
34+
},
35+
_handleSubpageClick: function( event ) {
36+
if( $(event.target).children( "ul" ).length == 0 ) {
37+
return;
38+
}
39+
this.opening = true;
40+
this.newPage = $( this.options.page ).uniqueId();
41+
this.nestedList = $( event.target ).children( "ul" )
42+
.clone().attr( "data-" + $.mobile.ns + "role", "listview" )
43+
.css( "display", "block" );
44+
this.pageName = (
45+
$( event.target.childNodes[0] ).text().replace(/^\s+|\s+$/g, '').length > 0 )?
46+
$( event.target.childNodes[0] ).text() : $( event.target.childNodes[1] ).text();
47+
this.pageID = this.newPage.attr( "id" );
2148

22-
$.mobile.changePage( "#" + pageID );
49+
// Build new page
50+
this.newPage.append(
51+
$( this.options.header ).find( "h1" ).text( this.pageName ).end()
52+
).append(
53+
$( this.options.content )
54+
).find( "div.ui-content" ).append( this.nestedList );
2355

24-
// Remove Nested Page
25-
$.mobile.document.one( "pagechange", function(){
26-
$.mobile.document.one( "pagechange", function(){
27-
$.mobile.document.one( "pagechange", function(){
28-
$(".nested-list-page").remove();
29-
});
30-
});
31-
});
32-
});
56+
$( "body" ).append( this.newPage );
3357

34-
$.extend( $.mobile, {
35-
nestedlists: {
36-
page: $("<div data-role='page'></div>"),
37-
header: $("<div data-role='header'><a href='#' data-rel='back'>Back</a><h1></h1></div>"),
38-
content: $("<div class='ui-content'></div>")
58+
$( "body" ).pagecontainer( "change", "#" + this.pageID );
3959
}
4060
});
4161
})( jQuery, this );

0 commit comments

Comments
 (0)