mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-01 19:34:42 +00:00
Merge pull request #1961 from rwldrn/jquery.mobile.forms.checkboxradio.js
jQuery core style guide conformance: jquery.mobile.forms.checkboxradio.js
This commit is contained in:
Ghislain Seguin
commit
80804c4818
1 changed files with 74 additions and 60 deletions
|
|
@ -4,37 +4,41 @@
|
|||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
(function($, undefined ) {
|
||||
|
||||
(function( $, undefined ) {
|
||||
|
||||
$.widget( "mobile.checkboxradio", $.mobile.widget, {
|
||||
options: {
|
||||
theme: null
|
||||
},
|
||||
_create: function(){
|
||||
_create: function() {
|
||||
var self = this,
|
||||
input = this.element,
|
||||
//NOTE: Windows Phone could not find the label through a selector
|
||||
//filter works though.
|
||||
label = input.closest("form,fieldset,:jqmData(role='page')").find("label").filter('[for="' + input[0].id + '"]'),
|
||||
// NOTE: Windows Phone could not find the label through a selector
|
||||
// filter works though.
|
||||
label = input.closest( "form,fieldset,:jqmData(role='page')" ).find( "label" ).filter( "[for='" + input[ 0 ].id + "']"),
|
||||
inputtype = input.attr( "type" ),
|
||||
checkedState = inputtype + "-on",
|
||||
uncheckedState = inputtype + "-off",
|
||||
icon = input.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedState,
|
||||
activeBtn = icon ? "" : " " + $.mobile.activeBtnClass,
|
||||
checkedClass = "ui-"+ checkedState + activeBtn,
|
||||
uncheckedClass = "ui-"+ uncheckedState,
|
||||
checkedClass = "ui-" + checkedState + activeBtn,
|
||||
uncheckedClass = "ui-" + uncheckedState,
|
||||
checkedicon = "ui-icon-" + checkedState,
|
||||
uncheckedicon = "ui-icon-" + uncheckedState;
|
||||
|
||||
if ( inputtype != "checkbox" && inputtype != "radio" ) { return; }
|
||||
if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
|
||||
return;
|
||||
}
|
||||
|
||||
//expose for other methods
|
||||
$.extend( this,{
|
||||
label : label,
|
||||
inputtype : inputtype,
|
||||
checkedClass : checkedClass,
|
||||
uncheckedClass : uncheckedClass,
|
||||
checkedicon : checkedicon,
|
||||
uncheckedicon : uncheckedicon
|
||||
// Expose for other methods
|
||||
$.extend( this, {
|
||||
label: label,
|
||||
inputtype: inputtype,
|
||||
checkedClass: checkedClass,
|
||||
uncheckedClass: uncheckedClass,
|
||||
checkedicon: checkedicon,
|
||||
uncheckedicon: uncheckedicon
|
||||
});
|
||||
|
||||
// If there's no selected theme...
|
||||
|
|
@ -42,37 +46,37 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
|
|||
this.options.theme = this.element.jqmData( "theme" );
|
||||
}
|
||||
|
||||
label
|
||||
.buttonMarkup({
|
||||
theme: this.options.theme,
|
||||
icon: icon,
|
||||
shadow: false
|
||||
});
|
||||
label.buttonMarkup({
|
||||
theme: this.options.theme,
|
||||
icon: icon,
|
||||
shadow: false
|
||||
});
|
||||
|
||||
// wrap the input + label in a div
|
||||
input
|
||||
.add( label )
|
||||
.wrapAll( "<div class='ui-" + inputtype +"'></div>" );
|
||||
// Wrap the input + label in a div
|
||||
input.add( label )
|
||||
.wrapAll( "<div class='ui-" + inputtype + "'></div>" );
|
||||
|
||||
label.bind({
|
||||
vmouseover: function() {
|
||||
if( $(this).parent().is('.ui-disabled') ){ return false; }
|
||||
if ( $( this ).parent().is( ".ui-disabled" ) ) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
vclick: function( event ){
|
||||
if ( input.is( ":disabled" ) ){
|
||||
vclick: function( event ) {
|
||||
if ( input.is( ":disabled" ) ) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
self._cacheVals();
|
||||
|
||||
input.prop( "checked", inputtype === "radio" && true || !(input.prop("checked")) );
|
||||
|
||||
// input set for common radio buttons will contain all the radio
|
||||
input.prop( "checked", inputtype === "radio" && true || !input.prop( "checked" ) );
|
||||
|
||||
// Input set for common radio buttons will contain all the radio
|
||||
// buttons, but will not for checkboxes. clearing the checked status
|
||||
// of other radios ensures the active button state is applied properly
|
||||
self._getInputSet().not(input).prop('checked', false);
|
||||
self._getInputSet().not( input ).prop( "checked", false );
|
||||
|
||||
self._updateAll();
|
||||
return false;
|
||||
|
|
@ -82,18 +86,24 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
|
|||
|
||||
input
|
||||
.bind({
|
||||
vmousedown: function(){
|
||||
vmousedown: function() {
|
||||
this._cacheVals();
|
||||
},
|
||||
|
||||
vclick: function(){
|
||||
// adds checked attribute to checked input when keyboard is used
|
||||
if ($(this).is(":checked")) {
|
||||
$(this).prop( "checked", true);
|
||||
self._getInputSet().not($(this)).prop('checked', false);
|
||||
} else {
|
||||
$(this).prop("checked", false);
|
||||
}
|
||||
vclick: function() {
|
||||
|
||||
var $this = $(this);
|
||||
|
||||
// Adds checked attribute to checked input when keyboard is used
|
||||
if ( $this.is( ":checked" ) ) {
|
||||
|
||||
$this.prop( "checked", true);
|
||||
self._getInputSet().not($this).prop( "checked", false );
|
||||
} else {
|
||||
|
||||
$this.prop( "checked", false );
|
||||
}
|
||||
|
||||
self._updateAll();
|
||||
},
|
||||
|
||||
|
|
@ -107,62 +117,66 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
|
|||
});
|
||||
|
||||
this.refresh();
|
||||
|
||||
},
|
||||
|
||||
_cacheVals: function(){
|
||||
this._getInputSet().each(function(){
|
||||
$(this).jqmData("cacheVal", $(this).is(":checked") );
|
||||
_cacheVals: function() {
|
||||
this._getInputSet().each(function() {
|
||||
var $this = $(this);
|
||||
|
||||
$this.jqmData( "cacheVal", $this.is( ":checked" ) );
|
||||
});
|
||||
},
|
||||
|
||||
//returns either a set of radios with the same name attribute, or a single checkbox
|
||||
_getInputSet: function(){
|
||||
_getInputSet: function() {
|
||||
return this.element.closest( "form,fieldset,:jqmData(role='page')" )
|
||||
.find( "input[name='"+ this.element.attr( "name" ) +"'][type='"+ this.inputtype +"']" );
|
||||
},
|
||||
|
||||
_updateAll: function(){
|
||||
_updateAll: function() {
|
||||
var self = this;
|
||||
|
||||
this._getInputSet().each(function(){
|
||||
if( $(this).is(":checked") || self.inputtype === "checkbox" ){
|
||||
$(this).trigger("change");
|
||||
this._getInputSet().each(function() {
|
||||
var $this = $(this);
|
||||
|
||||
if ( $this.is( ":checked" ) || self.inputtype === "checkbox" ) {
|
||||
$this.trigger( "change" );
|
||||
}
|
||||
})
|
||||
.checkboxradio( "refresh" );
|
||||
},
|
||||
|
||||
refresh: function( ){
|
||||
refresh: function() {
|
||||
var input = this.element,
|
||||
label = this.label,
|
||||
icon = label.find( ".ui-icon" );
|
||||
|
||||
// input[0].checked expando doesn't always report the proper value
|
||||
// for checked='checked'
|
||||
if ( $(input[0]).prop('checked') ) {
|
||||
if ( $( input[ 0 ] ).prop( "checked" ) ) {
|
||||
|
||||
label.addClass( this.checkedClass ).removeClass( this.uncheckedClass );
|
||||
icon.addClass( this.checkedicon ).removeClass( this.uncheckedicon );
|
||||
|
||||
} else {
|
||||
|
||||
label.removeClass( this.checkedClass ).addClass( this.uncheckedClass );
|
||||
icon.removeClass( this.checkedicon ).addClass( this.uncheckedicon );
|
||||
}
|
||||
|
||||
if( input.is( ":disabled" ) ){
|
||||
if ( input.is( ":disabled" ) ) {
|
||||
this.disable();
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.enable();
|
||||
}
|
||||
},
|
||||
|
||||
disable: function(){
|
||||
this.element.prop("disabled",true).parent().addClass("ui-disabled");
|
||||
disable: function() {
|
||||
this.element.prop( "disabled", true ).parent().addClass( "ui-disabled" );
|
||||
},
|
||||
|
||||
enable: function(){
|
||||
this.element.prop("disabled",false).parent().removeClass("ui-disabled");
|
||||
enable: function() {
|
||||
this.element.prop( "disabled", false ).parent().removeClass( "ui-disabled" );
|
||||
}
|
||||
});
|
||||
})( jQuery );
|
||||
|
|
|
|||
Loading…
Reference in a new issue