/* * jQuery Mobile Framework : listview plugin * Copyright (c) jQuery Project * Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. * Note: Code is in draft form and is subject to change */ (function( $ ) { $.fn.listview = function( options ) { return this.each(function() { var $this = $( this ); function data( type, defaultValue ) { var attr = "data-" + type, value = $this.attr( attr ); return value === undefined ? defaultValue : value; } //split these to be able to reference o.theme var o = $.extend({ theme: data( "theme", "f" ) }, options ); o = $.extend({ countTheme: data( "count-theme", o.theme ), headerTheme: "b", groupingTheme: data( "grouping-theme", "b" ), splitTheme: data( "split-theme", "b" ), inset: data( "inset", "false" ) === "true" }, o); //if it's a nested list, chunk it into ui-page items, recurse through them and call listview on each individual ul $( $this.find( "ul" ).get().reverse() ).each(function( i ) { var parent = $( this ).parent(), title = parent.contents()[ 0 ].nodeValue, theme = $( this ).attr( "[data-theme]" ) !== undefined ? $( this ).attr( "data-theme" ) : o.theme, countTheme = $( this ).attr( "[data-count-theme]" ) !== undefined ? $( this ).attr( "data-count-theme" ) : o.countTheme; $( this ).wrap( "
" ) .parent() .before( "

" + title + "

Back
" ) .parent() .attr({ id: "ui-listview-" + i, "data-theme": theme, "data-count-theme": countTheme }) .appendTo( "body" ) .fixHeaderFooter() .find( ".ui-header a.ui-back" ) .buttonMarkup() .click(function() { history.go(-1); return false; }); parent.html( "" + title + "" ); }).listview(); //create listview markup $this .addClass( "ui-listview" ) .find( "li" ) .each(function() { var $li = $( this ); if ( $li.is( ":has(img)" ) ) { $li.addClass( "ui-li-has-thumb" ); } if ( $li.is( ":has(.ui-li-aside)" ) ) { var aside = $li.find('.ui-li-aside'); aside.prependTo(aside.parent()); //shift aside to front for css float } $li.addClass( "ui-li" ); if( $li.find('a').length ){ $li .buttonMarkup({ wrapperEls: "div", shadow: false, corners: false, iconPos: "right", icon: "arrow-r", theme: o.theme }) .find( "a" ).eq( 0 ) .addClass( "ui-link-inherit" ); } else{ $li.addClass( "ui-li-grouping ui-btn ui-body-" + o.groupingTheme ); } }); if ( o.inset ) { $this .addClass( "ui-listview-inset" ) .controlgroup({ shadow: true }); } $this .find( "li" ).each(function() { //for split buttons $( this ).find( "a" ).eq( 1 ).each(function() { $( this ) .attr( "title", $( this ).text() ) .addClass( "ui-li-link-alt" ) .empty() .buttonMarkup({ shadow: false, corners: false, theme: o.theme }) .find( ".ui-btn-inner" ) .append( $( "" ).buttonMarkup({ shadow: true, corners: true, theme: o.splitTheme, iconPos: "notext", icon: "arrow-r" } ) ); //fix corners if ( o.inset ) { var closestLi = $( this ).closest( "li" ); if ( closestLi.is( "li:first-child" ) ) { $( this ).addClass( "ui-corner-tr" ); } else if ( closestLi.is( "li:last-child" ) ) { $( this ).addClass( "ui-corner-br" ); } } }); }) .find( "img") .addClass( "ui-li-thumb" ); if ( o.inset ) { $this .find( "img" ) .filter( "li:first-child img" ) .addClass( "ui-corner-tl" ) .end() .filter( "li:last-child img" ) .addClass( "ui-corner-bl" ) .end(); } $this .find( ".ui-li-count" ) .addClass( "ui-btn-up-" + o.countTheme + " ui-btn-corner-all" ) .end() .find( ":header" ) .addClass( "ui-li-heading" ) .end() .find( "p,ul,dl" ) .addClass( "ui-li-desc" ); //tapping the whole LI triggers ajaxClick on the first link $this.find( "li:not(.ui-li-grouping)" ).live( "tap", function() { $( this ).find( "a:first" ).ajaxClick(); }); }); }; })( jQuery );