开关样式预览图

前言

最近在基于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. Chrome:开发者模式下js文件中代码显示在一行的解决方法

    比如我随便打开一个js文件,可以发现它的代码都挤在一行中,这对我们查找一些变量很不友好 解决方式:点击图中标红的那个按钮就可以了

  2. js 把x,y轴两个数组变成[[x,y],[x,y]]的二维数组

    例如有X轴数组xarr=[2006,2007,2008],Y轴数组yarr=[12,15,18],代码如下: //调用 mergexy([2006,2007,2008],[12,15,18]); // ...

  3. pyqt(三)

    六.按钮控件 QPushButton 常见的按钮实现类包括:QPushButton.QRadioButton和QCheckBox QPushButton是最普通的按钮控件,可以响应一些用户的事件 fr ...

  4. Hadoop3.x完全分布式搭建(详细)

    环境准备 vm虚拟机(自行安装Centos7系统) hadoop3.x安装包(linux版本) java1.8安装包(linux版本) 为了能够按照教程顺利操作,需要注意几点细节 不要不看文字直接复制 ...

  5. 手写 Vue 系列 之 从 Vue1 升级到 Vue2

    前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...

  6. 【图文并茂】 做开发这么久了,还不会搭建服务器Maven私有仓库?这也太Low了吧

    大家好,我是冰河~~ 最近不少小伙伴想在自己公司的内网搭建一套Maven私服环境,可自己搭建的过程中,或多过少的总会出现一些问题,问我可不可以出一篇如何搭建Maven私服的文章.这不,就有了这篇文章嘛 ...

  7. mixin混入

    mixin(混入) 功能:可以把多个组件共用的配置提取成一个混入对象 使用方式: 第一步定义混合,例如: { data(){.........}, methods:{.........} ...... ...

  8. NOIP集训题目解析

    11.01 子段和 题目大意 给定一个长度为 \(n\) 的序列 \(a\) ,\(a_i=\{ -1,0,1 \}\) ,需要将 \(a\) 中的 \(0\) 变为 \(1\) 或 \(-1\) , ...

  9. 2022 年了,还不了解 PWA ? 教你 VuePress 博客如何快速兼容 PWA

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇我们 ...

  10. Numpy库基础___三

    ndarray一个强大的N维数组对象Array •ndarray的操作 索引 a = np.arange(24).reshape((2,3,4)) print(a) #[[[ 0 1 2 3] # [ ...