基于Bootstrap3的纯CSS滑动开关按钮组件

bootstrap 纯css3 滑动按钮 2015-08-16

控件介绍
TiTatoggle是一款基于Bootstrap3的纯CSS滑动开关按钮组件。该滑动按钮组件没有使用Javascript,它的HTML结构和原生的Bootstrap checkbox组件结构基本相同,使用起来非常方便。它还提供了多种主题样式:IOS样式和Material样式等。
浏览器兼容

支持IE9+

演示下载 1392
使用方法

安装

可以通过Bower来安装该滑动按钮组件。

1
$ bower install titatoggle               

使用方法

使用该Bootstrap3滑动开关按钮组件除了引入Bootstrap相关文件之外,只需要引入titatoggle-dist.css文件即可。

1
<link href="css/titatoggle-dist.css" rel="stylesheet">               
HTML结构

该滑动开关组件的HTML结构和原生Bootstrap checkbox组件结构基本相同。

原生Bootstrap checkbox组件结构如下:

1
2
3
4
5
<div class="checkbox">
  <label>
    <input type="checkbox">default Bootstrap 3
  </label>
</div>               

Ti-Ta-Toggle的HTML结构只需要在原生HTML结构上添加.checkbox-slider--TYPE class,以及在<input>后面添加一个<span>元素即可。

1
2
3
4
5
<div class="checkbox checkbox-slider--default">
  <label>
    <input type="checkbox"><span>TiTaToggle</span>
  </label>
</div>               

应用举例

默认的滑动按钮样式:

带文本的滑动按钮样式:

iOS样式的滑动按钮:

Material样式的滑动按钮:

更详细的示例是使用方法请参考Demo。

浏览器兼容

  • Internet Explorer 9
  • FireFox
  • Safari
  • Chrome
  • Safari Ios
  • Stock Android browser 4.2
  • Chrome Android

本文转载请注明出处:http://www.zhuiye.com/detail_1781.html