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

　　

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

            overflow: hidden;

            *zoom: ;

            display: inline-block;

            zoom: ;

            *display: inline;

            -webkit-transition: .25s;

            -moz-transition: .25s;

            -o-transition: .25s;

            transition: .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:  ;

            color: white;

            left: ;

            margin-left: .5px;

            margin-right: -13px;

            z-index: ;

        }

        .toggle.toggle-off .toggle-radio:first-child {

            left: -%;

        }

        .toggle .toggle-radio {

            /*background: url("../images/icon-on.png") right top no-repeat;*/

            color: #0275d8;

            display: block;

            font-weight: ;

            height: 21px;

            left: %;

            margin-left: -13px;

            padding: 5px 32px 3px;

            position: relative;

            text-align: center;

            z-index: ;

            -webkit-transition: .25s;

            -moz-transition: .25s;

            -o-transition: .25s;

            transition: .25s;

            -webkit-backface-visibility: hidden;

        }

        .toggle .toggle-radio:first-child {

            margin-bottom: -29px;

            left: ;

        }

        .toggle input {

            display: none;

            position: absolute;

            outline: none !important;

            display: block\;

            opacity: 0.01;

            filter: alpha(opacity=);

            zoom: ;

        }

        .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:  ;

        }

        .toggle.toggle-icon .toggle-radio {

            /*background-image: url("../images/block-on.png");*/

            background-position: 62px ;

            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().is(":checked")) {

                    $(toggle).removeClass("toggle-off");

                } else {

                    $(toggle).addClass("toggle-off");

                }

            };

            checkToggleState();

            radio.eq().click(function() {

                $(toggle).toggleClass("toggle-off");

            });

            radio.eq().click(function() {

                $(toggle).toggleClass("toggle-off");

            });

        };

        $(".toggle").each(function(index, toggle) {

            toggleHandler(toggle);

        });

    </script>

</body>

</html>

　　整体的效果是依赖于jQuery， 当用户点击了label按钮会触发input的click事件， 然后判断给父级添加不同的classname；

　　相关：

　　　　flat-ui

作者： NONO
出处：http://www.cnblogs.com/diligenceday/

QQ：287101329

bootstarp风格的toggle效果分享的更多相关文章

  1. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  2. 只用css3实现菜单的toggle效果

    一.原理: 使用label与input来实现,label和复选框是有关联的,label的for属性对应的是input的id,所以点击label时,它就会勾选或取消复选框. 如果我们需要让菜单默认显示, ...

  3. 手动实现jQuery的toggle()效果

    有时候我们希望实现toggle()切换效果,但是切换的同时需要完成一些其他要做的事情.所以我们需要对jQuery的toggle()函数进行改造. 下面好test2()函数就是一个实现toggle效果的 ...

  4. 前端每日实战：156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...

  5. 工作需求——JQ小效果分享下

    一.文字索引效果展示: html布局代码 <ul class="n_areaList"> <li> <h5>当前选择区域</h5> ...

  6. js惊奇效果分享，和排序算法

    分享地址:http://www.cnblogs.com/lhb25/p/8-amazing-codepen-demos.html 排序算法分享地址:http://www.w3cplus.com/js/ ...

  7. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  8. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  9. 分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

随机推荐

  1. GTAC 2015将于11月10号和11号召开

    今年的GTAC注册已经结束,将会在11月10号和11号在Google马萨诸塞州剑桥办公室召开.大家可以关注https://developers.google.com/google-test-autom ...

  2. POJ 1556 The Doors【最短路+线段相交】

    思路:暴力判断每个点连成的线段是否被墙挡住,构建图.求最短路. 思路很简单,但是实现比较复杂,模版一定要可靠. #include<stdio.h> #include<string.h ...

  3. AC日记——紧急措施 openjudge 1.7 22

    22:紧急措施 总时间限制:  1000ms 内存限制:  65536kB 描述 近日,一些热门网站遭受黑客入侵,这些网站的账号.密码及email的数据惨遭泄露.你在这些网站上注册若干账号(使用的用户 ...

  4. 当手机被PS掉，人们看到的是手中的灵魂

    Eric Pickersgill是一名摄影师,最近喜欢拍摄并记录人们使用智能手机的情景,不过不同的是,在最终作品中会将手机从人们手中PS掉,一刹那会进入一个奇怪的世界.黑白照片也极具冲击力. 每个人神 ...

  5. noip模拟赛（一）宠物之战

    宠物之战 (senso.pas/c/cpp) [问题描述] 众所周知,moreD的宠物已经被moreD奴役得体无完肤.这只宠物实在忍无可忍,把自己每天走魔法树的经历告诉了自己的宠物.同时他还说明了自己 ...

  6. 查看oracle死锁进程并结束死锁

    查看锁表进程SQL语句1: select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo ...

  7. python中的字符串操作

    #!/usr/bin/python # -*- coding: UTF-8 -*- ''' str.capitalize() ''' str = 'this is a string example' ...

  8. windows下安装memcache的基本步骤

    本文主要解决的是window下memcached的安装的问题,在使用的过程中经常会被第一步环境的配置搞混,本文结合我的配置过程和遇到的问题,做一个总结 1,开启php memcache的扩展,在文件  ...

  9. 031医疗项目-模块三：药品供应商目录模块——供货商药品目录查询功能----------sql补充知识

    这个补充知识有一个点很有必要,视屏上的老师提出一点: 内链接关联查询: 如果表A和表B有一个外键关联 ,可以通过外键进行内链接查询 select dictinfo.*, dicttype.typena ...

  10. EntityFramework 启用迁移 Enable-Migrations 报异常 "No context type was found in the assembly"

    转自:http://www.cnblogs.com/stevenhqq/archive/2013/04/18/3028350.html 以前做项目的时候,没有采用分类库的形式,所以迁移一致非常顺利,没 ...