libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.collapsible.js

   1 /*
   2 * "collapsible" plugin
   3 */
   4
   5 (function( $, undefined ) {
   6
   7 $.widget( "mobile.collapsible", $.mobile.widget, {
   8         options: {
   9                 expandCueText: " click to expand contents",
  10                 collapseCueText: " click to collapse contents",
  11                 collapsed: true,
  12                 heading: "h1,h2,h3,h4,h5,h6,legend",
  13                 theme: null,
  14                 contentTheme: null,
  15                 iconTheme: "d",
  16                 initSelector: ":jqmData(role='collapsible')"
  17         },
  18         _create: function() {
  19
  20                 var $el = this.element,
  21                         o = this.options,
  22                         collapsible = $el.addClass( "ui-collapsible" ),
  23                         collapsibleHeading = $el.children( o.heading ).first(),
  24                         collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
  25                         collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
  26                         collapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
  27
  28                 // Replace collapsibleHeading if it's a legend
  29                 if ( collapsibleHeading.is( "legend" ) ) {
  30                         collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
  31                         collapsibleHeading.next().remove();
  32                 }
  33
  34                 // If we are in a collapsible set
  35                 if ( collapsibleSet.length ) {
  36                         // Inherit the theme from collapsible-set
  37                         if ( !o.theme ) {
  38                                 o.theme = collapsibleSet.jqmData( "theme" );
  39                         }
  40                         // Inherit the content-theme from collapsible-set
  41                         if ( !o.contentTheme ) {
  42                                 o.contentTheme = collapsibleSet.jqmData( "content-theme" );
  43                         }
  44                 }
  45
  46                 collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
  47
  48                 collapsibleHeading
  49                         //drop heading in before content
  50                         .insertBefore( collapsibleContent )
  51                         //modify markup & attributes
  52                         .addClass( "ui-collapsible-heading" )
  53                         .append( "<span class='ui-collapsible-heading-status'></span>" )
  54                         .wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
  55                         .find( "a" )
  56                                 .first()
  57                                 .buttonMarkup({
  58                                         shadow: false,
  59                                         corners: false,
  60                                         iconPos: "left",
  61                                         icon: "plus",
  62                                         theme: o.theme
  63                                 });
  64
  65                 if ( !collapsibleSet.length ) {
  66                         collapsibleHeading
  67                                 .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
  68                                         .addClass( "ui-corner-top ui-corner-bottom" );
  69                 } else {
  70                         // If we are in a collapsible set
  71
  72                         // Initialize the collapsible set if it's not already initialized
  73                         if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
  74
  75                                 collapsibleSet
  76                                         .jqmData( "collapsiblebound", true )
  77                                         .bind( "expand", function( event ) {
  78
  79                                                 $( event.target )
  80                                                         .closest( ".ui-collapsible" )
  81                                                         .siblings( ".ui-collapsible" )
  82                                                         .trigger( "collapse" );
  83
  84                                         });
  85                         }
  86
  87                         collapsiblesInSet.first()
  88                                 .find( "a" )
  89                                         .first()
  90                                         .addClass( "ui-corner-top" )
  91                                                 .find( ".ui-btn-inner" )
  92                                                         .addClass( "ui-corner-top" );
  93
  94                         collapsiblesInSet.last()
  95                                 .jqmData( "collapsible-last", true )
  96                                 .find( "a" )
  97                                         .first()
  98                                         .addClass( "ui-corner-bottom" )
  99                                                 .find( ".ui-btn-inner" )
 100                                                         .addClass( "ui-corner-bottom" );
 101
 102
 103                         if ( collapsible.jqmData( "collapsible-last" ) ) {
 104                                 collapsibleHeading
 105                                         .find( "a" ).first().add ( collapsibleHeading.find( ".ui-btn-inner" ) )
 106                                                 .addClass( "ui-corner-bottom" );
 107                         }
 108                 }
 109
 110                 //events
 111                 collapsible
 112                         .bind( "expand collapse", function( event ) {
 113                                 if ( !event.isDefaultPrevented() ) {
 114
 115                                         event.preventDefault();
 116
 117                                         var $this = $( this ),
 118                                                 isCollapse = ( event.type === "collapse" ),
 119                                             contentTheme = o.contentTheme;
 120
 121                                         collapsibleHeading
 122                                                 .toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
 123                                                 .find( ".ui-collapsible-heading-status" )
 124                                                         .text( isCollapse ? o.expandCueText : o.collapseCueText )
 125                                                 .end()
 126                                                 .find( ".ui-icon" )
 127                                                         .toggleClass( "ui-icon-minus", !isCollapse )
 128                                                         .toggleClass( "ui-icon-plus", isCollapse );
 129
 130                                         $this.toggleClass( "ui-collapsible-collapsed", isCollapse );
 131                                         collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
 132
 133                                         if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
 134                                                 collapsibleHeading
 135                                                         .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
 136                                                         .toggleClass( "ui-corner-bottom", isCollapse );
 137                                                 collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
 138                                         }
 139                                         collapsibleContent.trigger( "updatelayout" );
 140                                 }
 141                         })
 142                         .trigger( o.collapsed ? "collapse" : "expand" );
 143
 144                 collapsibleHeading
 145                         .bind( "click", function( event ) {
 146
 147                                 var type = collapsibleHeading.is( ".ui-collapsible-heading-collapsed" ) ?
 148                                                                                 "expand" : "collapse";
 149
 150                                 collapsible.trigger( type );
 151
 152                                 event.preventDefault();
 153                         });
 154         }
 155 });
 156
 157 //auto self-init widgets
 158 $( document ).bind( "pagecreate create", function( e ){
 159         $( $.mobile.collapsible.prototype.options.initSelector, e.target ).collapsible();
 160 });
 161
 162 })( jQuery );