开关样式预览图

前言

最近在基于bootstrap框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用bootstrap框架自带的一个按钮插件,结果在引用js的时候总是出错,就找了找资源,用纯css实现这个按钮开关的功能。

具体代码过程

话不多说,直接上代码实现!

html代码部分

<div class="control-group">
<label class="control-label">是否选择:</label> <div class="checkbox"> <input type="checkbox" class="toggle" checked="checked" id="isnot" />
<label for="isnot"></label>
</div> </div>

css代码部分

input[type=checkbox] {
visibility: hidden;
}
.checkbox {
width: 120px;
height: 30px;
background: #FFF;
margin: 1px 1px; border-radius: 10px;
position: relative;
} .checkbox:before {
content: '是';
position: absolute;
top: 12px;
left: 16px;
height: 2px;
/*color: #26ca28;*/
color: #4baa34;
font-size: 16px;
/*font-weight:bold;*/
}
.checkbox:after {
content: '否';
position: absolute;
top: 12px;
left: 80px;
height: 2px;
color: #ddd;
font-size: 16px;
/*font-weight:bold;*/
}
.checkbox label {
display: block;
width: 40px;
height: 22px;
border-radius: 50px; -webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background: #ddd;
} .checkbox input[type=checkbox]:checked + label {
left: 62px;
/*background: #26ca28;*/
background: #4baa34;
}

js代码部分

 if ($("#isnot").attr('checked')) {var isnot=1}else{var isnot=0};

通过jq获取按钮是否被选中的值,ajax传给后台php进行数据的处理,完成数据库的操作
jq获取按钮是否被选中的值

小结

一点小心得,自己开发时间不长,感觉在开发过程中最怕遇到一时半会解决不了的问题,尤其还有新的知识点需要掌握的时候,比如这个问题,在js代码和关于bootstrap框架js引入的,和bootstrap摸态框的处理机制上费了很多功夫,最后也不是很明白,导致这个功能一直没有实现,最后在网上查了相关信息和代码,决定直接绕过js,用纯的css来实现,最后只是引入了css,少引入了框架里的几个js,既解决了问题,也提高了代码的执行效率。

纯CSS实现扁平化风格开关按钮的更多相关文章

  1. 纯css实现扁平化360卫士logo demo

    前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的. 因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下. 开始也不知到怎么下手,最棘手的是那两个像 ...

  2. HTML5和CSS3扁平化风格博客(基础篇)

    多学一点总是好的~ 自始至终都觉得的css和html效果比较美观,于是在看慕课网教程时,自己也跟着敲了深爱着的前端代码 这部分分为两部分:①基础篇:http://www.imooc.com/learn ...

  3. Html5和Css3扁平化风格网页

    前言 扁平化概念的核心意义 去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来.同时在设计元素上,则强调了抽 ...

  4. PS绘制扁平化风格相机镜头UI图标

    一.新建一个画布,绘制一个460*460图层,圆角半径40像素.填充渐变颜色,加一点点投影,这样就有质感了. 二.接下来我们要来绘制主体部分,绘制一个圆,大小400*400,用内阴影,渐变叠加,投影得 ...

  5. 一款简易的CSS3扁平化风格联系表单

    CSS3扁平化风格联系表单是一款CSS3简易联系表单非常清新,整体外观不是那么华丽,但是表单扁平化的风格让人看了非常舒服,同时利用了HTML5元素的特性,表单的验证功能变得也相当简单.经测试效果相当不 ...

  6. PPT扁平化风格设计手册

    钱文嘉:颜色选择,搭配 http://www.pptfans.cn/341917.html

  7. HTML5和CSS3扁平化风格博客(进阶篇)

    趁热打铁,将剩下的部分完结~ 接上篇,增加了一些js特效:侧边栏,返回顶部. 至于效果,也不知道gif的图片怎么显示不上去了 无奈只能直接上代码了,完整版请点击: https://files.cnbl ...

  8. jQuery扁平化风格手风琴菜单

    在线演示 本地下载

  9. 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板

    创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...

随机推荐

  1. selenium+python自动化103-一闪而过的dialog如何定位

    前言 web页面操作的时候经常会遇到一闪而过的 dialog 消息,这些提示语一般只出现了几秒,过后元素节点就会在DOM中消失了. 本篇讲解下用chrome 浏览器如何定位一闪而过的 dialog 消 ...

  2. Qt:QThread

    0.说明 QThread提供了一种与平台无关的线程管理方法. 一个QThread对象管理一个线程.QThread通过run()方法启动线程.默认情况下,run()方法通过exec()启动一个事件循环, ...

  3. Linux-系统启动与MBR扇区修复

    目录 1.系统启动过程 1.1 MBR扇区 1.2 MBR扇区的备份与还原 1.3 修复MBR 1.3.1 dd备份MBR信息 1.3.2 光驱启动修复 1.4 grub引导代码修复 1.系统启动过程 ...

  4. js json.stringfy()和json.parse()的用法

    1.JSON.parse;作用:将JavaScript对象表示法的JSON字符串转换为对象(字符串转对象)语法:JSON.parse(text [, reviver])text 必选. 一个有效的 J ...

  5. mysql使用group by分组时出现错误ERROR 1055 (42000): Expression #1 of SELECT list is not in GROUP BY clause and

    问题: 1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column ...

  6. 关于 jmeter变量是否在引用时候需要加上引号的坑

    今天在玩jmeter的时候,发现一个问题:一个关于 jmeter变量是否在引用时候需要加上引号的坑: 众所周知:jmeter引用变量的时候 需要使用${变量名} 但是:大家是否遇到过有时候变量名外需要 ...

  7. python 之 matplotlib 练习

    import numpy as npimport matplotlib.pyplot as plt x = np.linspace(0,10,1000)# 自变量y = np.sin(x) + 1 # ...

  8. linux下hadoop2.6.1源码64位的编译

    linux下hadoop2.6.1源码64位的编译 一. 前言 Apache官网上提供的hadoop本地库是32位的,如果我们的Linux服务器是64位的话,就会现问题.我们在64位服务器执行Hado ...

  9. Java案例——反转字符串

    /*案例:将用户输入的字符串反转并输出 分析:1.使用Scanner 类获取用户输入的字符串 2.定义一个方法将字符串反着遍历并拼接 3.定义变量接受并输出* */public class Strin ...

  10. CVE-2015-3337(任意文件读取)

    vulhub漏洞环境搭建: https://blog.csdn.net/qq_36374896/article/details/84102101 启动docker环境 cd vulhub-master ...