Listview分隔符JQuery Mobile

Question

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

这是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>