1

In jquery mobile you can have a navbar which has a class of persistent which makes the nav button which is chosen to highlight in a different colour. this indicates to the user where he/she is located within the menu. Is it possible to have that same effect on a listview? What I am trying to do is when a user selects an anchor within the list it stays highlighted. So if the user goes back to the same list the user can see which option in the list was previously selected.

4

1 回答 1

1

这是一个工作示例：http: //jsfiddle.net/Gajotres/WA7qZ/

我想这就是你想要的。不幸的是，没有任何 jQuery Mobile 内置功能，因此必须手动完成。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>`enter code here`
    <link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
</head>
<body>
    <div data-role="page" id="profile">
        <div data-role="header" data-position="fixed">
          <h3>Example</h3>
        </div>
        <!-- /header -->
        <div data-role="content">
            <ul id="mylist" data-role="listview" data-inset="true">
                <li data-theme='a'><a id='a1' href='#' rel='external'>TEST 1</a></li>
                <li data-theme='a'><a id='a2' href='#' rel='external'>TEST 2</a></li>
            </ul>
        </div>
        <div id='divtest'>

        </div>
        <!--/content-->
        <div data-role="footer" data-position="fixed">
        </div>
        <!--/footer-->
    </div>
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <a href="#profile" class="ui-btn-left">Back</a>
            <h3>
                Second Page
            </h3>
        </div>

        <div data-role="content" class="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>     
</body>
</html>

Javascript：

$(document).live('pagebeforeshow','#profile', function(e,data){
    $(document).off('click', '#mylist li').on('click', '#mylist li',function(e) {
        setNewTheme('a', '#mylist li');
        setNewTheme('b', $(this));
        $.mobile.changePage("#second", {
            reloadPage: false,
            transition: "slide",
            reverse: false
        });        
    });      
});

function setNewTheme(newTheme, object) {
    $.mobile.activePage.find(object).removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e').addClass('ui-btn-up-' + newTheme ).attr('data-theme', newTheme );
}
于 2013-04-05T19:37:54.940 回答