jQuery Mobile列表分隔符使用错误的样本？

Question

我已经使用jQuery Mobile ThemeRoller为我正在开发的新移动网站创建主题.通常,主题效果很好,但是在我的应用程序中没有使用ThemeRoller中显示的list-divider.

这是一个说明问题的屏幕截图:

ThemeRoller问题http://img.skitch.com/20120416-8fbfbu41abrci1ym8uthatfi4e.png

相关页面的相关HTML是:

<div id="schedule" data-role="page" data-theme="a">
    <div data-role="content" data-theme="a">
        <ul data-role="listview">
            <li data-role="list-divider">8:00 am</li>
            <li><a href="#session">Welcome &amp; Keynote</a></li>
            <li data-role="list-divider">9:00 am</li>
            <li><a href="#session">Session title displayed here</a></li>
        </ul>
    </div>
</div>

我甚至尝试添加一些我在ThemeRoller标记中找到的东西:

<li data-role="list-divider" data-swatch="a" class="ui-bar-a" data-form="ui-bar-a">8:00 am</li>

这没有效果.无论我做什么,似乎都把课程设置为ui-bar-b.我可以在Chrome中实时编辑HTML并更改ui-bar-b为ui-bar-a,它看起来就像我期望的那样.

难道我做错了什么？这可能是一个jqm bug吗？

使用jqm 1.1.0和jquery 1.7.0.

Answer 1

您可以将data-dividertheme="a"属性添加到data-role="listview"元素以强制将特定样例用于分隔符列表项.默认情况下,如果您listview设置为主题a,则分隔符将设置为主题b,因此您必须强制列表分隔符为正确的主题,或者您必须在构建主题时考虑到这一点.

    <ul data-role="listview" data-dividertheme="a">
        <li data-role="list-divider">8:00 am</li>
        <li><a href="#session">Welcome &amp; Keynote</a></li>
        <li data-role="list-divider">9:00 am</li>
        <li><a href="#session">Session title displayed here</a></li>
    </ul>

这是一个演示:http://jsfiddle.net/8aZpQ/(这个演示强制主题e为分隔线)

以下是此文档:http://jquerymobile.com/demos/1.1.0/docs/lists/docs-lists.html