libs/js/jquery-mobile-1.1.0/js/jquery.mobile.collapsible.js

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