博客

jQuery Mobile Listview splitTheme选项

  • Post category:jquery

jQuery Mobile Listview是一个可供用户快速找到特定内容的有用工具，其中的splitTheme选项能够让开发者自定义这个工具的外观以及交互功能。在这里，我们将会为您提供一个详细的攻略，展示splitTheme选项是怎样起作用的，并且包含两条示例供您参考。

1. splitTheme选项的理解

splitTheme的意思是“分离主题”/“分离样式”，它是仅在jQuery Mobile中使用的选项之一。在官方文档中的说明是：

splitTheme: string

将listview分裂为两部分的主题字符串，其中一部分的主题为a，另一部分的主题为b。

在Listview中使用分离主题，可以将一份列表项分成两个部分：左右两个大块分别显示不同内容，其中左侧一般为选项的标题，右侧则为选项的说明/描述等。而由于分离主题的支持与jQuery Mobile主题架构的统一性，因此开发者可以非常轻易地使用splitTheme。

在使用splitTheme的时候，需要设置两个主题，一个主题名字后跟“a”（例如“XXX-a”，字母“a”处的字符随意），一个则是后跟“b”的主题名字（如“XXX-b”）。设定了这两个主题之后，在ListView加载时，每个具有split和split-theme属性的li元素都会被自动的分成两个部分，其中左半部分使用第一个主题，右半部分使用第二个主题。

2. jQuery Mobile Listview splitTheme选项的使用示例

接下来，我们将为您提供两个使用splitTheme选项的示例。请参考这些示例，自己动手实践，体验splitTheme所带来的优秀交互体验。

示例一

下面是一个简单的分离主题示例，并且使用了data-inset属性：

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider" data-theme="a">标题 A</li>
    <li data-theme="a" data-split-icon="info" data-split-theme="a">
        <a href="#">
            <h2>西红柿</h2>
            <p class="ui-li-aside">28 元</p>
        </a>
        <a href="#"></a>
    </li>
    <li data-theme="a" data-split-icon="info" data-split-theme="a">
        <a href="#">
            <h2>黄瓜</h2>
            <p class="ui-li-aside">34 元</p>
        </a>
        <a href="#"></a>
    </li>
    <li data-role="list-divider" data-theme="b">标题 B</li>
    <li data-theme="b" data-split-icon="info" data-split-theme="b">
        <a href="#">
            <h2>土豆</h2>
            <p class="ui-li-aside">16 元</p>
        </a>
        <a href="#"></a>
    </li>
    <li data-theme="b" data-split-icon="info" data-split-theme="b">
        <a href="#">
            <h2>茄子</h2>
            <p class="ui-li-aside">25 元</p>
        </a>
        <a href="#"></a>
    </li>
</ul>

在这个示例中，左侧显示了各个选项的商品名，右侧则显示了商品的价格。而CSS中的样式则被分成了两个主题，并且正常地显示在了选项上。

示例二

以下示例演示了如何使用JavaScript生成一个分离主题的Listview，并且使用“disc”便于用户理清思路：

<div data-role="page">
    <div data-role="header">
        <h1>示例</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-split-icon="info" data-split-theme="a" data-inset="true" class="ui-listview-split ui-split-theme-a">
            <li data-role="list-divider" id="A" class="ui-li ui-li-divider ui-bar-a">标题 A</li>
        </ul>
        <script>
            var l = "ABCDEFGHIJKLMNOPQ".split("");
            for (var i = 0; i < l.length; i++) {
                var newItem = "<li><a href='#'>" + l[i] + "</a><a href='#'></a></li>";
                $("#A").after(newItem);
            }
        </script>
        <ul data-role="listview" data-split-icon="info" data-split-theme="b" data-inset="true" class="ui-listview-split ui-split-theme-b">
            <li data-role="list-divider" id="B" class="ui-li ui-li-divider ui-bar-b">标题 B</li>
        </ul>
        <script>
            for (var i = 0; i < l.length; i++) {
                if (i % 3 == 0) {
                    var newItem = "<li data-role='list-divider'>" + l[i] + "</li>";
                } else {
                    var newItem = "<li><a href='#'>" + l[i] + "</a><a href='#'></a></li>";
                }
                $("#B").after(newItem);
            }
        </script>
    </div>
</div>

正如上面的示例，使用了id为“A”的选项生成了两项内容，并且使用了id为“B”的选项生成了整个列表的剩余部分。各选项被正确地分成了两个部分，同时使用了字符“disc”将各项连接在了一起。

结论

splitTheme选项可以帮助开发者在Listview中增加标题信息，并且使得交互变得更加复杂。通过JS和CSS的集成，您可以轻易地生成各种分离主题的Listview，并为您的项目增加更优秀的视觉效果和交互功能。

Tags: