jquery - Listview 分隔符 JQuery Mobile

Question

我正在使用 Jquery Mobile Flat UI 主题。这很棒，但我想在每个 listview 之间添加一个分隔符。

这是列表视图：

我必须在 .css 文件中添加哪些代码？

Answer 1

如果您希望列表样式 css 分隔每个列表。

检查演示http://jsfiddle.net/2qgtA/1/

添加这个CSS。

ul li.ui-li {
    border-top:1px solid #ccc !important;
}
ul li.ui-li-divider{
    border-top:none !important;
}

Answer 2

解决方案 1

li只需在每个经典元素之前添加此listview元素：

例子：

<li data-role="list-divider">Some text here</li>

解决方案 2

data-autodividers="true"或者，如果您向列表视图ul元素添加属性，它可以自动完成。

例子：

<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    <li><a href="index.html">Adam Kinkaid</a></li>
    <li><a href="index.html">Alex Wickerham</a></li>
    <li><a href="index.html">Avery Johnson</a></li>
    <li><a href="index.html">Bob Cabot</a></li>
    <li><a href="index.html">Caleb Booth</a></li>
    <li><a href="index.html">Christopher Adams</a></li>
    <li><a href="index.html">Culver James</a></li>
</ul>

解决方案 3

工作示例：http: //jsfiddle.net/Gajotres/JHDsq/

$(document).on('pagecreate', '#index', function(){ 
    $( "#mylistview li" ).each(function() {        
        $(this).before('<li data-role="list-divider"></li>');
    });
});

此解决方案将为每个现有li元素添加一个分隔符。还要注意一个属性data-divider-theme="a"，它会创建黑色分隔符。

Answer 3

<ul data-role="listview">
  <li>Acura</li>
  <li>Audi</li>
  <li>BMW</li>
</ul>