jQuery a+Switch 开关代码

依赖插件

jquery.min.js
jquery.actual.min.js https://github.com/dreamerslab/jquery.actual

 <input type="checkbox" name="" class="a-switch" data-on-name="启用" data-off-name="禁止" checked/>

input.a-switch {
	display: none;
}
.a-switch-container {
	display: inline-block;
	position: relative;
	height: 35px;
	border: 1px solid #46cd93;
	vertical-align: middle;
	cursor: pointer;
	overflow: hidden;
}
.a-switch-wrapper {
	height: 100%;
	font-size: 0;
	white-space: nowrap;
	-webkit-transition: margin-left .5s;
    transition: margin-left .5s;
}
.a-switch-handle-on,
.a-switch-handle-label,
.a-switch-handle-off {
	display: inline-block;
	padding: 0 12px;
	height: 100%;
	line-height: 33px;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
}
.a-switch-handle-on {
	background-color: #f2f2f3;
	color: #fff;
}
.a-switch-handle-label {
	background-color: #fff;
}
.a-switch-handle-off {
	background-color: #f5f5f5;
}
.a-switch-disabled {
	cursor: default;
}
.a-switch-disabled .a-switch-handle-on,
.a-switch-disabled .a-switch-handle-off {
    opacity: .5;
}
.a-switch-container.a-switch-sm {
	height: 27px;
}
.a-switch-container.a-switch-sm .a-switch-handle-on,
.a-switch-container.a-switch-sm .a-switch-handle-label,
.a-switch-container.a-switch-sm .a-switch-handle-off {
	padding: 0 6px;
	line-height: 25px;
	font-size: 12px;
}

jQuery.extend({
    aSwitch: function() {
    	$('input.a-switch').each(function () {
    		var _input = $(this),
    			name = _input.attr('name'),
    			onName = _input.attr('data-on-name'),
    			offName = _input.attr('data-off-name'),
    			onValue = _input.attr('data-on-value'),
    			offValue = _input.attr('data-off-value'),
				size = _input.attr('data-size'),
				callback = _input.attr('data-callback') ? _input.attr('data-callback').split('|') : '',
	    		checked = _input.prop('checked'),
	    		disabled = _input.prop('disabled');

	    	onValue = onValue ? onValue : 1;
	    	offValue = offValue ? offValue : 0;

	    	var _switch = $('\
					<div class="a-switch-container' + (disabled == true ? ' a-switch-disabled ' : ' ') + (checked == true ? 'a-switch-on' : 'a-switch-off') + (size ? ' a-switch-' + size : '') + '">\
						<div class="a-switch-wrapper">\
							<span class="a-switch-handle-on">' + (onName ? onName : 'ON') + '</span>\
							<span class="a-switch-handle-label"></span>\
							<span class="a-switch-handle-off">' + (offName ? offName : 'OFF') + '</span>\
							<input type="hidden" name="' + name + '" value="' + (checked == true ? onValue : offValue) + '"/>\
						</div>\
					</div>\
		    	');

            _input.before(_switch).remove();

	    	var onWidth = _switch.find('.a-switch-handle-on').actual('outerWidth', {absolute: true}),
	    		offWidth = _switch.find('.a-switch-handle-off').actual('outerWidth', {absolute: true}),
	    		spanWidth = onWidth >= offWidth ? onWidth : offWidth;

            _switch.css('width', spanWidth * 2 + 2).find('.a-switch-handle-on, .a-switch-handle-label, .a-switch-handle-off').css('width', spanWidth);

			if (checked == false) {
				_switch.find('.a-switch-wrapper').css({'margin-left': -spanWidth + 'px'})
			}

            _switch.on('click', function () {
	    		var _this = $(this),
					value = _this.hasClass('a-switch-on') ? offValue : onValue,
					checked =  _this.hasClass('a-switch-on') ? false : true,
					res = true;

				if ($.isArray(callback)) {
					res = eval(callback[0] + '(_this, callback, name, value, checked)');
				}

				if (res == true) {
	    			if (_this.hasClass('a-switch-on')) {
						_this.removeClass('a-switch-on').addClass('a-switch-off').find('.a-switch-wrapper').css('margin-left', -spanWidth + 'px').find('input[name="' + name + '"]').val(offValue);
					} else if (_this.hasClass('a-switch-off')) {
						_this.removeClass('a-switch-off').addClass('a-switch-on').find('.a-switch-wrapper').css('margin-left', '0px').find('input[name="' + name + '"]').val(onValue);
					}
				}
	    	})
    	})
    }
})