Question

我已经使用jQuery Mobile ThemeRoller为我正在制作的新移动网站创建主题。一般来说，主题效果很好，但是在我的应用程序中没有使用ThemeRoller中显示的list-divider。

以下是说明问题的屏幕截图：

ThemeRoller problem 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错误吗？

使用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

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

1 个答案: