Jquery mobile 面板内的JQuery Mobile listview
我试图在一个面板中使用可折叠项的列表视图,但得到了奇怪的结果。具体来说,这是我使用的最小代码。请注意,列表视图中的所有内容都来自JQuery移动示例,因此我希望它能够开箱即用Jquery mobile 面板内的JQuery Mobile listview,jquery-mobile,jquery-mobile-listview,jquery-mobile-collapsible,jquery-mobile-panel,Jquery Mobile,Jquery Mobile Listview,Jquery Mobile Collapsible,Jquery Mobile Panel,我试图在一个面板中使用可折叠项的列表视图,但得到了奇怪的结果。具体来说,这是我使用的最小代码。请注意,列表视图中的所有内容都来自JQuery移动示例,因此我希望它能够开箱即用 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <title>Test</title> <meta name="viewport" content="width=device-widt
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<h1></h1>
<div data-role="page" id="mainpage">
<div data-role="panel" id="leftpanel" data-position="left" data-display="push">
<!-- panel content goes here -->
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one-tab" data-ajax="false">one</a></li>
<li><a href="#two-tab" data-ajax="false">two</a></li>
</ul>
</div>
<div id="one-tab" class="ui-body-d ui-content">
Empty one!
</div>
<div id="two-tab" class="ui-body-d ui-content">
<ul data-role="listview" data-inset="true" data-shadow="false">
<li data-role="collapsible" data-iconpos="right" data-inset="false">
<h2>Birds</h2>
<ul data-role="listview" data-theme="b">
<li><a href=“#">Condor</a></li>
<li><a href="#">Eagle</a></li>
<li><a href="#">Sparrow</a></li>
</ul>
</li>
<li><a href="#">Humans</a></li>
<li data-role="collapsible" data-iconpos="right" data-inset="false">
<h2>Fish</h2>
<ul data-role="listview" data-theme="b">
<li><a href="#">Salmon</a></li>
<li><a href="#">Pollock</a></li>
<li><a href="#">Trout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="mainheader" data-role="header" data-position="fixed">
<a href="#leftpanel" data-role="button" data-iconpos="notext" data-icon="bars"></a>
<h1>Main page</h1>
</div>
Main page
</div>
</body>
</html>
测验
空的!
-
鸟
-
鱼
主页
主页
我得到的是
这可能并不完全正确。我做错了什么?您将列表视图和可折叠文件混合在一起,而jQM并不是专门用来处理这些问题的。但是,您可以使用一些CSS使其看起来“正确”
<ul id="tabTwoList" data-role="listview" data-inset="true" data-shadow="false">
<li>
<div data-role="collapsible" data-inset="false" data-iconpos="right">
<h2>Birds</h2>
<ul data-role="listview" data-theme="b">
<li><a href="#">Condor</a></li>
<li><a href="#">Eagle</a></li>
<li><a href="#">Sparrow</a></li>
</ul>
</div>
</li>
<li><a href="#">Humans</a></li>
<li>
<div data-role="collapsible" data-inset="false" data-iconpos="right">
<h2>Fish</h2>
<ul data-role="listview" data-theme="b">
<li><a href="#">Salmon</a></li>
<li><a href="#">Pollock</a></li>
<li><a href="#">Trout</a></li>
</ul>
</div>
</li>
</ul>
工作
太好了,非常感谢。所以基本上我错过了CSS风格我猜…
#tabTwoList li.ui-li-static {
padding-top: 0;
padding-bottom: 0;
}
#tabTwoList li .ui-collapsible-heading {
margin-top: 0;
margin-bottom: 0;
}
#tabTwoList li .ui-collapsible-heading-toggle {
border: 0;
}