1

我对 jquerymobile 很陌生。我正在做一个示例，我试图在其中显示一个列表视图，这是我的代码。

<!doctype html>
<html>
<head>

<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css"/>

<script type="text/javascript" charset="UTF-8" src="jquery.js"></script>
<script type="text/javascript" charset="UTF-8" src="jquery.mobile-1.2.0.min.js"></script>

</head>

<body bgcolor="#e8e8e8">


<div data-role="page" id="emplist-page">

<div data-role="header" data-theme="b">
<h1>Employee Details</h1>
</div>

<div data-role="content">

<ul data-role="listview" id="emplist" data-theme="d">
<li data-role="divider">Names</li>
<li data-icon="arrow-r" >Surendra</li>
<li data-icon="arrow-r" >Bala</li>
</ul>

</div>

<div data-role="footer" data-theme="b" data-position="fixed">
<h1>@2012</h1>
</div>

</div>

</body>
</html>

在此，我没有得到列表视图的功能，例如分隔符作为分隔符不可见，并且箭头图标对于列表项不可见。

这是我得到的输出。

在此处输入图像描述

我也添加了图像文件夹。

我该怎么办 ？

提前致谢。

4

2 回答 2

2

您的 li 元素必须有一个子标签，只有这样箭头才会可见，然后您才能使用data-icon属性或data-split-icon属性来查看 li 图标。如果标签不应该像链接一样使用href="#"。

像这样：

        <ul data-role="listview" data-theme="a">
            <li><a href="#">item1</a></li>
            <li><a href="#">item1</a></li>
            <li><a href="#">item1</a></li>
        </ul>

可以在此处找到有关此的更多信息。

看看这个例子：http: //jsfiddle.net/Gajotres/Defxd/

现在看看没有标签：http: //jsfiddle.net/Gajotres/LwfJ6/

此外，如果您刚刚开始查看此链接，它是 jQM 的备忘单。

于 2013-01-04T08:04:57.633 回答
0

这里有很多列表视图的示例，例如基本链接列表、嵌套、编号、拆分按钮、列表分隔符、计数气泡等。请查看下面的 url。

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-ul.html

于 2013-10-14T15:14:03.150 回答