Sunday, 15 August 2010

jQuery ListView autodividers add id to each section -



jQuery ListView autodividers add id to each section -

i'm using jquery listview display list names of customers grouped first character, here code:

<html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>my phonebook</h2> <ul data-role="listview" data-autodividers="true" data-inset="true"> <li><a href="#">adele</a></li> <li><a href="#">agnes</a></li> <li><a href="#">albert</a></li> <li><a href="#">billy</a></li> <li><a href="#">bob</a></li> <li><a href="#">calvin</a></li> <li><a href="#">cameron</a></li> <li><a href="#">chloe</a></li> <li><a href="#">christina</a></li> <li><a href="#">diana</a></li> <li><a href="#">gabriel</a></li> <li><a href="#">glen</a></li> <li><a href="#">ralph</a></li> <li><a href="#">valarie</a></li> </ul> </div> </div> </body> </html>

i able navigate each of these sections, method doesn't add together automatically id each section, possible add together id programmatically each section (like id=a, id=g etc.) ?

use below jquery code before give id ul (here gave "list_ul")

<ul data-role="listview" data-autodividers="true" data-inset="true" id="list_ui">

code:

$( document ).on( "pageinit", "#pageone", function( event ) { var arr1 = []; $("#list_ul").find('.ui-li-divider').each(function() { arr1.push($( ).text()); }); var i=0; $('.ui-li-divider').each(function() { $( ).attr( "id",arr1[i++]); }); homecoming false; });

jquery jquery-mobile

No comments:

Post a Comment