persistent listview in Jquery Mobile -


in jquery mobile can have navbar has class of persistent makes nav button chosen highlight in different colour. indicates user he/she located within menu. possible have same effect on listview? trying when user selects anchor within list stays highlighted. if user goes same list user can see option in list selected.

here's working example: http://jsfiddle.net/gajotres/wa7qz/

i think want. unfortunately there isn't jquery mobile built in functionality has done manually.

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 ); } 

Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -