jQuery 移动列表分隔符使用错误的色板

jQuery Mobile list divider using the wrong swatch?

本文关键字：错误 移动 列表 分隔符 jQuery      更新时间：2023-09-26

我已经使用jQuery Mobile ThemeRoller为我正在开发的新移动网站创建了一个主题。一般来说，主题运行良好，但 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 错误吗？

使用 jqm 1.1.0

和 jquery 1.7.0。

可以将 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

相关文章：