2

我使用jQuery Mobile ThemeRoller为我正在开发的新移动网站创建主题。一般来说，主题效果很好，但在我的应用程序中没有使用 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。

4

1 回答 1

6

您可以将该data-dividertheme="a"属性添加到您的data-role="listview"元素，以强制将特定样本用于分隔列表项。默认情况下，如果您listview设置为 theme a，那么分隔线将设置为 theme b，因此您必须强制 list-dividers 成为正确的主题，或者您必须牢记这一点来构建您的主题。

    <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

于 2012-04-16T17:31:25.347 回答