浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery高级页面组件 2017-01-07

人气59520

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

安装

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

$ bower install titatoggle                
              

使用方法

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

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

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

原生Bootstrap checkbox组件结构如下:

<div class="checkbox">
  <label>
    <input type="checkbox">default Bootstrap 3
  </label>
</div>                
              

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

<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

查看演示
下载资源:47
下载资源
错误提交:

格式:zip 大小:58.87KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2192.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于Bootstrap3的纯CSS滑动开关按钮组件

我当前G币余额:0 已下载次数:47

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有15 评论)

1 2