libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.forms.checkboxradio.js

   1 /*
   2 * "checkboxradio" plugin
   3 */
   4
   5 (function( $, undefined ) {
   6
   7 $.widget( "mobile.checkboxradio", $.mobile.widget, {
   8         options: {
   9                 theme: null,
  10                 initSelector: "input[type='checkbox'],input[type='radio']"
  11         },
  12         _create: function() {
  13                 var self = this,
  14                         input = this.element,
  15                         // NOTE: Windows Phone could not find the label through a selector
  16                         // filter works though.
  17                         label = input.closest( "form,fieldset,:jqmData(role='page')" ).find( "label[for='" + input[ 0 ].id + "']"),
  18                         inputtype = input.attr( "type" ),
  19                         checkedState = inputtype + "-on",
  20                         uncheckedState = inputtype + "-off",
  21                         icon = input.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedState,
  22                         activeBtn = icon ? "" : " " + $.mobile.activeBtnClass,
  23                         checkedClass = "ui-" + checkedState + activeBtn,
  24                         uncheckedClass = "ui-" + uncheckedState,
  25                         checkedicon = "ui-icon-" + checkedState,
  26                         uncheckedicon = "ui-icon-" + uncheckedState;
  27
  28                 if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
  29                         return;
  30                 }
  31
  32                 // Expose for other methods
  33                 $.extend( this, {
  34                         label: label,
  35                         inputtype: inputtype,
  36                         checkedClass: checkedClass,
  37                         uncheckedClass: uncheckedClass,
  38                         checkedicon: checkedicon,
  39                         uncheckedicon: uncheckedicon
  40                 });
  41
  42                 // If there's no selected theme...
  43                 if( !this.options.theme ) {
  44                         this.options.theme = this.element.jqmData( "theme" );
  45                 }
  46
  47                 label.buttonMarkup({
  48                         theme: this.options.theme,
  49                         icon: icon,
  50                         shadow: false
  51                 });
  52
  53                 // Wrap the input + label in a div
  54                 input.add( label )
  55                         .wrapAll( "<div class='ui-" + inputtype + "'></div>" );
  56
  57                 label.bind({
  58                         vmouseover: function( event ) {
  59                                 if ( $( this ).parent().is( ".ui-disabled" ) ) {
  60                                         event.stopPropagation();
  61                                 }
  62                         },
  63
  64                         vclick: function( event ) {
  65                                 if ( input.is( ":disabled" ) ) {
  66                                         event.preventDefault();
  67                                         return;
  68                                 }
  69
  70                                 self._cacheVals();
  71
  72                                 input.prop( "checked", inputtype === "radio" && true || !input.prop( "checked" ) );
  73
  74                                 // trigger click handler's bound directly to the input as a substitute for
  75                                 // how label clicks behave normally in the browsers
  76                                 // TODO: it would be nice to let the browser's handle the clicks and pass them
  77                                 //       through to the associate input. we can swallow that click at the parent
  78                                 //       wrapper element level
  79                                 input.triggerHandler( 'click' );
  80
  81                                 // Input set for common radio buttons will contain all the radio
  82                                 // buttons, but will not for checkboxes. clearing the checked status
  83                                 // of other radios ensures the active button state is applied properly
  84                                 self._getInputSet().not( input ).prop( "checked", false );
  85
  86                                 self._updateAll();
  87                                 return false;
  88                         }
  89
  90                 });
  91
  92                 input
  93                         .bind({
  94                                 vmousedown: function() {
  95                                         self._cacheVals();
  96                                 },
  97
  98                                 vclick: function() {
  99                                         var $this = $(this);
 100
 101                                         // Adds checked attribute to checked input when keyboard is used
 102                                         if ( $this.is( ":checked" ) ) {
 103
 104                                                 $this.prop( "checked", true);
 105                                                 self._getInputSet().not($this).prop( "checked", false );
 106                                         } else {
 107
 108                                                 $this.prop( "checked", false );
 109                                         }
 110
 111                                         self._updateAll();
 112                                 },
 113
 114                                 focus: function() {
 115                                         label.addClass( "ui-focus" );
 116                                 },
 117
 118                                 blur: function() {
 119                                         label.removeClass( "ui-focus" );
 120                                 }
 121                         });
 122
 123                 this.refresh();
 124         },
 125
 126         _cacheVals: function() {
 127                 this._getInputSet().each(function() {
 128                         var $this = $(this);
 129
 130                         $this.jqmData( "cacheVal", $this.is( ":checked" ) );
 131                 });
 132         },
 133
 134         //returns either a set of radios with the same name attribute, or a single checkbox
 135         _getInputSet: function(){
 136                 if(this.inputtype == "checkbox") {
 137                         return this.element;
 138                 }
 139
 140                 return this.element.closest( "form,fieldset,:jqmData(role='page')" )
 141                         .find( "input[name='"+ this.element.attr( "name" ) +"'][type='"+ this.inputtype +"']" );
 142         },
 143
 144         _updateAll: function() {
 145                 var self = this;
 146
 147                 this._getInputSet().each(function() {
 148                         var $this = $(this);
 149
 150                         if ( $this.is( ":checked" ) || self.inputtype === "checkbox" ) {
 151                                 $this.trigger( "change" );
 152                         }
 153                 })
 154                 .checkboxradio( "refresh" );
 155         },
 156
 157         refresh: function() {
 158                 var input = this.element,
 159                         label = this.label,
 160                         icon = label.find( ".ui-icon" );
 161
 162                 // input[0].checked expando doesn't always report the proper value
 163                 // for checked='checked'
 164                 if ( $( input[ 0 ] ).prop( "checked" ) ) {
 165
 166                         label.addClass( this.checkedClass ).removeClass( this.uncheckedClass );
 167                         icon.addClass( this.checkedicon ).removeClass( this.uncheckedicon );
 168
 169                 } else {
 170
 171                         label.removeClass( this.checkedClass ).addClass( this.uncheckedClass );
 172                         icon.removeClass( this.checkedicon ).addClass( this.uncheckedicon );
 173                 }
 174
 175                 if ( input.is( ":disabled" ) ) {
 176                         this.disable();
 177                 } else {
 178                         this.enable();
 179                 }
 180         },
 181
 182         disable: function() {
 183                 this.element.prop( "disabled", true ).parent().addClass( "ui-disabled" );
 184         },
 185
 186         enable: function() {
 187                 this.element.prop( "disabled", false ).parent().removeClass( "ui-disabled" );
 188         }
 189 });
 190
 191 //auto self-init widgets
 192 $( document ).bind( "pagecreate create", function( e ){
 193         $.mobile.checkboxradio.prototype.enhanceWithin( e.target );
 194 });
 195
 196 })( jQuery );