切换开关 参考
這里提供切換開關的一個方案，效果如圖：
這個效果的實質是checkbox。切換效果完美兼容IE8 / 9 / 10 / FF / Chrome / Safari...
代碼很簡單：
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><link rel="stylesheet" type="text/css" href="css/switch.css"/> </head> <body> <div class="switch"><form><input type="checkbox"/></form> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script src="js/switch.js"></script> </body> </html>
所需文件：
兩個JS / 一個CSS / 一個Image。
?
Image:
?
?
CSS:
?
.switch{ font:12px/16px Verdana;} .switch .tzCheckBox{background:url('../images/background.png') no-repeat right bottom;display:inline-block;min-width:60px;height:33px;white-space:nowrap;position:relative;cursor:pointer;margin-left:14px; }.switch .tzCheckBox.checked{background-position:top left;margin:0 14px 0 0; }.switch .tzCheckBox .tzCBContent{color: white;line-height: 31px;padding-right: 38px;text-align: right; }.switch .tzCheckBox.checked .tzCBContent{text-align:left;padding:0 0 0 38px; }.switch .tzCBPart{background:url('../images/background.png') no-repeat left bottom;width:14px;position:absolute;top:0;left:-14px;height:33px;overflow: hidden; }.switch .tzCheckBox.checked .tzCBPart{background-position:top right;left:auto;right:-14px; }
?
JS:
?
$(document).ready(function(){$('input[type=checkbox]').tzCheckbox({labels:['Enable','Disable']}); });(function($){$.fn.tzCheckbox = function(options){//默認是ON和OFF:options = $.extend({labels : ['ON','OFF']},options);return this.each(function(){var originalCheckBox = $(this),labels = [];// 檢查data-on和data-off屬性:if(originalCheckBox.data('on')){labels[0] = originalCheckBox.data('on');labels[1] = originalCheckBox.data('off');}else labels = options.labels;// 生成開關HTML代碼var checkBox = $('<span>',{className : 'tzCheckBox '+(this.checked?'checked':''),html: '<span class="tzCBContent">'+labels[this.checked?0:1]+'</span><span class="tzCBPart"></span>'});//插入開關代碼，并隱藏原始的checkbox checkBox.insertAfter(originalCheckBox.hide());checkBox.click(function(){checkBox.toggleClass('checked');var isChecked = checkBox.hasClass('checked');// 記錄開關變化至原始的checkbox中originalCheckBox.attr('checked',isChecked);checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);});// 監聽原始checkbox的改變，做開關模擬點擊originalCheckBox.bind('change',function(){checkBox.click();});});}; })(jQuery);
兄弟姐妹們，別忘js和css及image的路徑配置。
?
供你們和我自己參考，哈哈。
?
?
?
總結
- 上一篇： Java8 ~ Java17 新特性
- 下一篇： 时光相册 php,外一篇 趁着《时光相