CSS实现按钮YES-NO按钮+Jquery获取按钮状态。
前几天我经理突然跟我说,能不能做一个开关按钮,需要过滤的一个标识。说实话,一个做后端我是懵逼状态的。
不过网上资料很多,查了一遭,发现一个不错的哥们给出的案例,模仿一下成功实现,下面就自己总结一下:
实现的效果如上,个人觉得丑爆了。
下面是实现过程:
HTML部分代码:
<div class="testswitch">
<input class="testswitch-checkbox" id="onoffswitch" type="checkbox">
<label for="onoffswitch" class="testswitch-label">
<span class="testswitch-inner" data-on="YES" data-off="NO"></span>
<span class="testswitch-switch"></span>
</label>
</div>
CSS部分代码:
.testswitch {
position: relative;
float: left;
width: 45px;
margin: 0;
font-size: 0.6em;
} .testswitch-checkbox {
display: none;
} .testswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 20px;
} .testswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
text-align: left;
} .testswitch-inner::before,
.testswitch-inner::after {
display: block;
float: right;
width: 50%;
height: 20px;
padding: 0;
line-height: 1.8em;
font-size: 8px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
} .testswitch-inner::after {
content: attr(data-on);
padding-left: 10px;
background-color: #FFAB47;
color: #FFFFFF;
} .testswitch-inner::before {
content: attr(data-off);
padding-right: 10px;
background-color: #3F9FE8;
color: white;
text-align: right;
} .testswitch-switch {
position: absolute;
display: block;
width: 12px;
height: 12px;
margin: 4px;
background: #FFFFFF;
bottom: 5px;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
text-align: right;
} .testswitch-checkbox:checked+.testswitch-label .testswitch-inner {
margin-left: 0;
} .testswitch-checkbox:checked+.testswitch-label .testswitch-switch {
right: 0px;
}
Jquery部分代码:
referrer="NO";
$(document).ready(function () {
$("#onoffswitch").on("click",function () {
clickSwitch();
});
var clickSwitch=function () {
if($("#onoffswitch").is(":checked")){
console.log("YES");
referrer="YES";
$('.sp-start').css('display','none');
$('.sp-close').css('display','block');
}else {
console.log("NO");
referrer="NO";
$('.sp-close').css('display','none');
$('.sp-start').css('display','block');
}
}
});
CSS实现按钮YES-NO按钮+Jquery获取按钮状态。的更多相关文章
- 关于jQuery获取checkbox状态的问题
这位大神概括的很好 http://www.cnblogs.com/wangkongming/p/4002710.html
- jquery获取checkbox状态
$("#id").is(":checked"); 返回true false
- jquery获取当前按钮、截取字符串、字符串拼接、动态循环添加元素
截取字符串:字符串拼接:动态循环添加元素:获取当前按钮: {data : null, render: function(data, type, row ) { var loginName = $(&q ...
- jquery mobile 按钮部件(包含图标的使用)
参考网址:http://api.jquerymobile.com/1.3/button/ 注:按钮的三种写法 <a href="#" class="ui-btn u ...
- jquery倒计时按钮常用于验证码倒计时
<!doctype html><html><head> <meta charset="utf-8"> <title>jq ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery带按钮的图片切换效果
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
- Android自定义工具类获取按钮并绑定事件(利用暴力反射和注解)
Android中为按钮绑定事件的有几种常见方式,你可以在布局文件中为按钮设置id,然后在MainActivity中通过findViewById方法获取按钮对象实例,再通过setOnClickListe ...
- (三)Jquery Mobile按钮详细讲解
Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示 1.HTML5中的button 效果: 2. JM中的普通button ...
随机推荐
- SpringBoot 对IBM MQ进行数据监听接收以及数据发送
一.需求介绍 后端使用Spring Boot2.0框架,要实现IBM MQ的实时数据JMS监听接收处理,并形成回执通过MQ队列发送. 二.引入依赖jar包 <dependency> < ...
- c# bitmap的拷贝及一个图像工具类
using (Bitmap bmp = new Bitmap(scanImgPath)) { Bitmap bitmap = new Bitmap(bmp.Width, bmp.Height, Pix ...
- Netty源码剖析-业务处理
参考文献:极客时间傅健老师的<Netty源码剖析与实战>Talk is cheap.show me the code! ----主线:worker thread 触发pipeline.fi ...
- QT开发小技巧-窗口处理(一)
this->setWindowFlags(Qt::WindowCloseButtonHint); // 仅保留关闭按钮 this->setAttribute(Qt::WA_DeleteOn ...
- 在Android8.0以上收不到广播问题(AppWidget)
对Intent指定组件 //安卓8.0必须添加 intent.setComponent(new ComponentName(context,MyAppWidgetProvider.class)); 问 ...
- 微信小程序wxs如何使用
新建一个.wxs文件 <!-- 引入.wxs文件 src为相对路径,module指定当前模块的名称 --> <wxs module="filter" src=&q ...
- 如何在调用Marketing Cloud contact创建API时增加对扩展字段的支持
需求:扩展字段"微信ID"是我创建出来的extension field,我想用Marketing Cloud提供的contact creation API,在创建contact时也 ...
- 这段时间大量网站被k的原因分析
百度这次更新的K站幅度比较大,通过对被k网站的分析,没有发现文章类型网站有降权现象,主要集中在企业网站上.分析大约30发个网站发现共同明显的特征就是这样的网站有大量的页面只有一张或者两张图片,而这些网 ...
- linux 中free命令
1.free 命令的选项使用 free 命令查看服务器内存使用情况.free [-b|-k|-m|-g|-h] [-l] [-o] [-t] [-s delay] [-c count] [-V](1) ...
- zip命令分卷压缩和解压缩
创建分卷压缩文件 zip -s 100m -r folder.zip folder/ -s: 创建分卷的大小 -r: 循环压缩文件夹下面的内容 切分已有的文件: zip existing.zip -- ...