jquery-mobile - 选定列表项的视觉指示

Question

我对 jQuery mobile 非常陌生，甚至对 knockout.js 也很陌生。现在，我要使用 asp.net mvc4 框架为移动设备开发一个网站。

本网站的大部分页面都有两个部分，一个狭窄的左侧部分将驱动页面，而中间部分是结果部分。

现在，在左侧窄部分中，将有一个农场列表，用户可以选择一个或多个农场。

挑战是显示选定的列表项，并带有一些视觉指示，表明它们已被选中。因此，整个列表将在那里，用户选择的列表将显示为 (selected) 或与列表项的实际文本类似的内容。

有可能这样做吗？

Answer 1

您可以将.ui-btn-active类添加到任何按钮小部件以将active状态应用于按钮。

这是基本思想：

    <ul data-role="listview">
        <li>
            <a class="ui-btn-active" href="#">Active</a>
        </li>
        ...
    </ul>

要更新 a 中的所有按钮小部件，listview您可以执行以下操作：

$('ul').find('a').on('click', function () {
    $(this).closest('ul').find('a').removeClass('ui-btn-active');
    $(this).addClass('ui-btn-active');
});​

这是一个演示：http: //jsfiddle.net/Fg2TX/2/