mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-23 01:10:25 +00:00
85 lines
2.3 KiB
JavaScript
85 lines
2.3 KiB
JavaScript
/*
|
|
* jQuery Mobile Framework : "customCheckboxRadio" plugin (based on code from Filament Group,Inc)
|
|
* 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(jQuery){
|
|
|
|
jQuery.fn.customCheckboxRadio = function( options ) {
|
|
return this.each(function() {
|
|
var input = jQuery( this ),
|
|
type = input.attr( "type" );
|
|
|
|
if ( type === "checkbox" || type === "radio" ) {
|
|
var o = jQuery.extend({
|
|
theme: input.data( "theme" ),
|
|
icon: input.data( "icon" ) || !input.parents( "[data-type='horizontal']" ).length,
|
|
checkedicon: "ui-icon-" + type + "-on",
|
|
uncheckedicon: "ui-icon-" + type + "-off"
|
|
}, options );
|
|
|
|
// get the associated label using the input's id
|
|
var label = jQuery("label[for='" + input.attr( "id" ) + "']")
|
|
.buttonMarkup({
|
|
iconpos: o.icon ? "left" : "",
|
|
theme: o.theme,
|
|
icon: o.icon ? o.uncheckedicon : null,
|
|
shadow: false
|
|
});
|
|
|
|
var icon = label.find( ".ui-icon" );
|
|
|
|
// wrap the input + label in a div
|
|
input
|
|
.add( label )
|
|
.wrapAll( "<div class='ui-" + type +"'></div>" );
|
|
|
|
// necessary for browsers that don't support the :hover pseudo class on labels
|
|
label.bind({
|
|
mousedown: function() {
|
|
label.data( "state", input.attr( "checked" ) );
|
|
},
|
|
click: function() {
|
|
setTimeout(function() {
|
|
if ( input.attr( "checked" ) === label.data( "state" ) ) {
|
|
input.trigger( "click" );
|
|
}
|
|
}, 1);
|
|
}
|
|
});
|
|
|
|
//bind custom event, trigger it, bind click,focus,blur events
|
|
input
|
|
.bind({
|
|
updateState: function() {
|
|
if ( this.checked ) {
|
|
label.addClass( "ui-btn-active" );
|
|
icon.addClass( o.checkedicon );
|
|
icon.removeClass( o.uncheckedicon );
|
|
|
|
} else {
|
|
label.removeClass( "ui-btn-active" );
|
|
icon.removeClass( o.checkedicon );
|
|
icon.addClass( o.uncheckedicon );
|
|
}
|
|
},
|
|
|
|
click: function() {
|
|
jQuery( "input[name='" + input.attr( "name" ) + "']" ).trigger( "updateState" );
|
|
},
|
|
|
|
focus: function() {
|
|
label.addClass( "ui-focus" );
|
|
},
|
|
|
|
blur: function() {
|
|
label.removeClass( "ui-focus" );
|
|
}
|
|
})
|
|
.trigger( "updateState" );
|
|
}
|
|
});
|
|
};
|
|
|
|
})(jQuery);
|