这是一款ios样式开关按钮jQuery插件。该插件可以将复选按钮和单选按钮转换为ios样式的开关按钮。
使用方法
在页面中引入jquery和jquery.switcher.js文件,以及样式文件switcher.css。
<link href="css/switcher.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/jquery.switcher.js"></script>
HTML结构
HTML结构如下。
<h2>Checkboxes</h2> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> </div> <h2>Radio Buttons</h2> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> </div>
CSS样式
你可以创建自己的开关按钮样式。
.ui-switcher { background-color: #bdc1c2; display: inline-block; height: 20px; width: 48px; border-radius: 10px; box-sizing: border-box; vertical-align: middle; position: relative; cursor: pointer; transition: border-color 0.25s; margin: -2px 4px 0 0; box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15); } .ui-switcher:before { font-family: sans-serif; font-size: 10px; font-weight: 400; color: #ffffff; line-height: 1; display: inline-block; position: absolute; top: 6px; height: 12px; width: 20px; text-align: center; } .ui-switcher:after { background-color: #ffffff; content: '\0020'; display: inline-block; position: absolute; top: 2px; height: 16px; width: 16px; border-radius: 50%; transition: left 0.25s; }
初始化插件
在页面DOM元素加完毕之后,通过下面的方法来初始化该插件。
$(function(){ $.switcher(); });
你也可以在指定的复选按钮和单选按钮上初始化插件。
$.switcher('input[type=checkbox]'); $.switcher('input[type=radio]');
该ios样式开关按钮jQuery插件的github地址为:https://github.com/zellien/switcher
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!