Bootstarp风格的toggle效果分享

2024-10-09 23:42:47

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

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

基于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 基础教程之表单部分实例代码

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

Bootstarp风格的toggle效果分享

相关推荐

随机推荐