所选列表项的可视指示

Question

我是jQuery mobile的新手,甚至更新的knockout.js.现在,我将使用asp.net mvc4框架为移动设备开发一个网站.

本网站的大多数页面都有两个部分,一个是左侧部分,它将驱动页面,中间部分是结果部分.

现在,在左边的部分中,将会有一个农场列表,用户可以选择一个或多个农场.

挑战在于显示所选列表项目,其中一些视觉指示表明它们已被选中.因此,整个列表将在那里,用户选择的列表将与(选定的)或类似于列表项的实际文本一起显示.

有可能这样做吗？

Answer 1

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

这是基本的想法:

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

要更新所有按钮小部件,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/