最近在寫項目的時候想要一個這樣的效果,
我知道這個效果在 flat-ui中有, 但是我又不想引用一整個flat-ui;
這個效果依賴html5的transition, 所以浏覽器兼容成問題;
從flat-ui中把這個效果的js和html,以及css給撥離出來;
整體的代碼如下:
運行下面代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> </head> <body> <h1> toggle的demo </h1> <style> .toggle { background-color: #8AB9E3; border-radius: 60px; color: white; height: 29px; margin: 5px 12px 12px 0; overflow: hidden; *zoom: 1; display: inline-block; zoom: 1; *display: inline; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; -webkit-box-sizing: initial } .toggle:before, .toggle:after { display: table; content: ""; } .toggle:after { clear: both; } .toggle.toggle-off { background-color: #cbd2d8; } .toggle.toggle-off .toggle-radio { /*background-image: url("../images/icon-off.png")*/; background-position: 0 0; color: white; left: 0; margin-left: 0.5px; margin-right: -13px; z-index: 1; } .toggle.toggle-off .toggle-radio:first-child { left: -120%; } .toggle .toggle-radio { /*background: url("../images/icon-on.png") right top no-repeat;*/ color: #0275d8; display: block; font-weight: 700; height: 21px; left: 120%; margin-left: -13px; padding: 5px 32px 3px; position: relative; text-align: center; z-index: 2; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; } .toggle .toggle-radio:first-child { margin-bottom: -29px; left: 0; } .toggle input { display: none; position: absolute; outline: none !important; display: block\9; opacity: 0.01; filter: alpha(opacity=1); zoom: 1; } .toggle.toggle-icon { border-radius: 6px 7px 7px 6px; } .toggle.toggle-icon.toggle-off { border-radius: 7px 6px 6px 7px; } .toggle.toggle-icon.toggle-off .toggle-radio { /*background-image: url("../images/block-off.png");*/ background-position: 0 0; } .toggle.toggle-icon .toggle-radio { /*background-image: url("../images/block-on.png");*/ background-position: 62px 0; border-radius: 6px; min-width: 27px; text-align: right; } .toggle.toggle-icon .toggle-radio:first-child { text-align: left; } </style> <div class="toggle pull-left"> <label class="toggle-radio" for="toggleOption2">ON</label> <input type="radio" name="toggleOptions" id="toggleOption1" value="option1" checked="checked"> <label class="toggle-radio" for="toggleOption1">OFF</label> <input type="radio" name="toggleOptions" id="toggleOption2" value="option2"> </div> <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script> <script> //toggle插件的js代碼 var toggleHandler = function(toggle) { var toggle = toggle; var radio = $(toggle).find("input"); var checkToggleState = function() { if (radio.eq(0).is(":checked")) { $(toggle).removeClass("toggle-off"); } else { $(toggle).addClass("toggle-off"); } }; checkToggleState(); radio.eq(0).click(function() { $(toggle).toggleClass("toggle-off"); }); radio.eq(1).click(function() { $(toggle).toggleClass("toggle-off"); }); }; $(".toggle").each(function(index, toggle) { toggleHandler(toggle); }); </script> </body> </html>
整體的效果是依賴於jQuery, 當用戶點擊了label按鈕會觸發input的click事件, 然後判斷給父級添加不同的classname;