Bootstarp风格的toggle效果分享

最近在写项目的时候想要一个这样的效果,

我知道这个效果在 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;

(0)

相关推荐

  • Bootstarp基本模版学习教程

    今天开始学习bootstrap发现官方的文档其实写的真的太棒啦,非常的清晰易懂. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

  • Bootstarp 基础教程之表单部分实例代码

    参考:BootStrap中的表单大全 bootstrap 表单部分,具体代码如下所示: <div class="container"> <form action="#" method="post"> <fieldset> <legend>用户登陆</legend> <div class="form-group"> <label>用户名:<

  • 基于BootStarp的Dailog

    BootStrip简介 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架. Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的M

  • Bootstarp风格的toggle效果分享

    最近在写项目的时候想要一个这样的效果, 我知道这个效果在 flat-ui中有, 但是我又不想引用一整个flat-ui; 这个效果依赖html5的transition, 所以浏览器兼容成问题: 从flat-ui中把这个效果的js和html,以及css给拨离出来: 整体的代码如下: 运行下面代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></ti

  • Javascript实现div的toggle效果实例分析

    本文实例讲述了Javascript实现div的toggle效果.分享给大家供大家参考.具体分析如下: <script type="text/javascript" language="javascript"> function $(obj) { return document.getElementById(obj); } function ToggleDiv() { this.ToggleId='silder'; //被伸缩的对象ID this.Pare

  • Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7)

    虽然Android给我们提供了众多组件,但是使用起来都不是很方便,我们开发的APK都有自己的风格,如果使用了系统自带的组件,总是觉得和应用的主题不着边际并且看起来也不顺心,那我们就需要自定义了,为了方便大家对自定义组件的学习,我接下来准备了几遍有关自定义的Dialog的文章,希望对大家有帮助. 在开发APK中最常见的估计就数弹出对话框了,这种对话框按照按钮数量来分大致是三种:一个按钮,两个按钮,三个按钮.现在要讲的就是按照按钮数量分为以上三类吧(当然了可以有更多的按钮,只要你愿意). 自定义Di

  • 基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享

    前言:前段时间一直都好忙也就好久没有写些东西了,最近手上的事刚好告些段落了,把以前空写的写插件都拿出来分享下吧,希望对大家有些帮助,也希望有高手能帮忙指点下我的写不足和错误,一直以来自己写的东西都是在用,性能方面个人只能尽量靠近问题还很多--真心求指点:插件简介:执行渐隐等动画效果,可以这个插件为一个附加插件 可以配合前面我发的一个弹出层 等等之类的东西用增加js展示的趣味性,使用方法:在下面的js代码里面前面写了,大家可以看看直接复制粘贴就可以用了有问题可以联系我</pJS代码如下 展示方式可

  • js实现省市级联效果分享

    本文实例为大家分享了js实现省市级联效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> var shengArr =new Array(); shengArr[&qu

  • 使用three.js实现炫酷的酸性风格3D页面效果

    本文内容主要介绍,通过使用React+three.js技术栈,加载3D模型.添加3D文字.增加动画.点击交互等,配合样式设计,实现充满设计感的

  • 用JS实现一个TreeMenu效果分享

    今天学的一点小东西和大家分享一下. 类似TreeMenu控件. 不废话直接代码: 复制代码 代码如下: <script language="javascript"> function control() {//定义函数 if (sMenus3.innerHTML == "+") {//判断展开状态 ulMenu3.style.display = "block";//如果是"+"号 则可以展开 sMenus3.inn

  • jquery实现瀑布流效果分享

    使用jquery实现瀑布流效果,大家参考使用吧,运行后可以看到效果,代码中的JQ引入一定要换成自己的才好 复制代码 代码如下: <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>AJAX</title> <link rel="stylesheet" href="boot

  • Android常用进度条效果分享

    先看看效果: activity_main.xml主页布局就2个button,分别弹出不同效果的2个进度条 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layou

  • jquery制作居中遮罩层效果分享

    复制代码 代码如下: <!DOCTYPE HTML><html lang=zh-cn><head><meta charset=utf-8><title>遮罩演练</title><link href="../css/component2.css" rel="Stylesheet"/><script src="../js/jquery-1.11.0.min.js"

随机推荐