jQuery Mobile - 嵌套列表视图
描述
包含嵌套列表视图扩展以允许在 jQuery Mobile 中进行嵌套响应，并将特定列表的 childpages 选项设置为 false。 jQuery Mobile 1.3 恢复了 jQuery Mobile 1.4 中的嵌套列表视图扩展。
示例
下面的例子演示了嵌套在 jQuery Mobile 中的 listview 的使用。
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
(function( $, window, undefined ) {
$.widget( "mobile.listview", $.mobile.listview, {
options: {
childPages: true,
page: "<div data-role = 'page'></div>",
header: "<div data-role = 'header'><a href = '#'
data-rel = 'back'>Back</a><h1></h1></div>",
content: "<div class = 'ui-content'></div>"
},
_create: function() {
this._super();
if( this.options.childPages ) {
this._setupChildren();
}
},
_setupChildren: function() {
this._attachBindings();
this.element.find( "ul" )
.css( "display","none" )
.parent()
.addClass("ui-btn ui-btn-icon-right ui-icon-carat-r");
},
_attachBindings: function() {
this._on ({
"click": "_handleSubpageClick"
});
this._on( "body", {
"pagechange": function() {
if ( this.opening === true ) {
this.open = true;
this.opening = false;
} else if ( this.open === true ) {
this.newPage.remove();
this.open = false;
}
}
});
},
_handleSubpageClick: function( event ) {
if( $(event.target).closest( "li" ).children( "ul" ).length == 0 ) {
return;
}
this.opening = true;
this.newPage = $( this.options.page ).uniqueId();
this.nestedList = $( event.target ).children( "ul" )
.clone().attr( "data-" + $.mobile.ns + "role", "listview" )
.css( "display", "block" );
this.pageName = (
$( event.target.childNodes[0] ).text().replace(/^\s+|\s+$/g, '').length > 0 )?
$( event.target.childNodes[0] ).text() : $( event.target.childNodes[1] ).text();
this.pageID = this.newPage.attr( "id" );
// Build new page
this.newPage.append (
$( this.options.header ).find( "h1" ).text( this.pageName ).end()
)
.append (
$( this.options.content )
)
.find( "div.ui-content" ).append( this.nestedList );
$( "body" ).append( this.newPage );
$( "body" ).pagecontainer( "change", "#" + this.pageID );
}
});
})( jQuery, this );
</script>
</head>
<body>
<ul data-role = "listview" data-inset = "true">
<li data-role = "list-divider">State Names</li>
<li>
Karnataka
<ul>
<li>Bangalore</li>
<li>Belgaum</li>
<li>Hubli</li>
<li>Mangalore</li>
<li>Dharwad</li>
</ul>
</li>
<li>
Maharashtra
<ul>
<li>Mumbai</li>
<li>Pune</li>
<li>Satara</li>
<li>Sangali</li>
<li>Thane</li>
</ul>
</li>
<li>
Tamil Nadu
<ul>
<li>Chennai</li>
<li>Coimbator</li>
<li>Madurai</li>
<li>Vellore</li>
<li>Ooty</li>
</ul>
</li>
</ul>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 listview_nested_lists.html 文件。
将此 HTML 文件打开为 http://localhost/listview_nested_lists.html，将显示以下输出。
