问题描述
|
为了回应另一个用户，我已经升级了jQuery插件
iCheckBox
解决方法
更新：我对插件进行了更深入的研究，正在进行许多额外的工作，这是一个更苗条的版本，其功能相同，但工作量更少，并且可以在FF4中使用（没有其他CSS / animation插件）下面列出的答案）。
另外，我进行了一些调整-您现在可以在动画结束之前单击图像以将其切换回去，而无需等待动画完成以确定状态-而是使用复选框的状态（即也立即受到影响）。 API是相同的，只是在这里更改了插件的内部。
/*
* iCheckbox - Inspired Checkbox v0.1
*
* Convert a checkbox or multiple checkboxes into iphone style switches.
*
* This is based on the jQuery iphoneSwitch plugin by Daniel LaBare.
*
* Features:
* * Because checkboxes are used,this is compatable with having javascript off for form submission.
* * Affects only checkboxes.
* * Synchronizes the actual state of the checkbox for on or off status.
* * Completely self-contained for each checkbox.
* * Changes fire the onchange event of your checkbox.
* * Relies purely on css for styling... no passing anything but your slider image.
* * Because functionality is decoupled from CSS,you can assign custom CSS classes if you wish making it possible for multiple version per page.
* * Completely inline like a normal checkbox. No sliding-door-float madness.
*
* iphoneSwitch Author: Daniel LaBare
* iCheckbox Author: Bryn Mosher
* iphoneSwitch Date: 2/4/2008
* iCheckbox date: 2/26/2010-2/27/2010 (like most of you I\'m a nite owl :P)
*/
// convert the matched element into an iCheckbox if it is a checkbox input
jQuery.fn.iCheckbox = function(start_state,options) {
if(this.length == 0 || this[0].type != \'checkbox\') return this;
// define default settings
var settings = jQuery.extend( {
// switch_container_src is the outer frame image of the slider
// you assign the actual slider image via css
switch_container_src: \'images/iphone_switch_container.gif\',// The height of your slider
switch_height: 27,// The width of your slider
switch_width: 94,// switch_speed is the speed of the slider animation.
// Warning: Your onchange() even won\'t be fired until the end of this!
switch_speed: 150,// How far your actual slider image has to move to change to the \"off\" state.
// This can be either positive or negative based on the layout of your image.
// The \"on\" state expects this image to have backgroundPosition: 0px.
switch_swing: -53,// CSS class of the container if you wish.
class_container: \'iCheckbox_container\',// CSS class of the switch.
// This should have your actual \"on\"/\"off\" image set as its background-image.
class_switch: \'iCheckbox_switch\',// CSS class of the checkbox if you wish it shown.
class_checkbox: \'iCheckbox_checkbox\',checkbox_hide: true,// animate off function
iCheckToggle: function (elem,atime,animOnly) {
var img = jQuery(elem).siblings(\'img\');
atime = typeof(atime) == \'number\' ? atime : settings.switch_speed;
img.stop(true).animate({ backgroundPositionX: (elem.checked ? \'0\' : settings.switch_swing) + \'px\' },{
duraton: parseInt(atime) > 0 ? atime : 1,easing: \'linear\',step: function(cur,opt){
img.css(\"background-position\",opt.now + \"px 0px\");
}
});
},},options);
// set initial state
this.prop(\'checked\',start_state == \'on\');
// create the switch
return this.each(function() {
// make the container
var container = jQuery(this).wrap($(\'<span />\').addClass(settings.class_container)).parent();
// make the switch image based on starting state
jQuery(\'<img class=\"\'+settings.class_switch+\'\" src=\"\'+settings.switch_container_src+\'\" />\')
.appendTo(container);
// sync the checkbox to initial state
// must have a positive time for the initial event to fire
settings.iCheckToggle(this,1);
// bind clicking on the image
jQuery(this).siblings(\'.\'+settings.class_switch).click(function (e) {
jQuery(this).siblings(\'input\').click();
}).end()
// assign the class to it
.addClass(settings.class_checkbox)
// finally hide the checkbox after everything else is declared - we do this for syntax checking
.toggle(!settings.checkbox_hide)
// bind clicking on a visible checkbox
.change(function (e) {
settings.iCheckToggle(this,settings.switch_speed,true );
});
});
};
backgroundProperty
backgroundPropertyX
.animate({backgroundPosition: settings.switch_swing+\'px 0\'},\'linear\')
.animate({backgroundPosition: \'0 0\'},\'linear\')