Bootstarp风格的toggle效果分享
内容摘要
最近在写项目的时候想要一个这样的效果,
我知道这个效果在 flat-ui中有, 但是我又不想引用一整个flat-ui;
这个效果依赖html5的transition, 所以浏览器兼容成问题;
我知道这个效果在 flat-ui中有, 但是我又不想引用一整个flat-ui;
这个效果依赖html5的transition, 所以浏览器兼容成问题;
文章正文
最近在写项目的时候想要一个这样的效果,
我知道这个效果在 flat-ui中有, 但是我又不想引用一整个flat-ui;
这个效果依赖html5的transition, 所以浏览器兼容成问题;
从flat-ui中把这个效果的js和html,以及css给拨离出来;
整体的代码如下:
运行下面代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <!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;
代码注释