前几天我经理突然跟我说,能不能做一个开关按钮,需要过滤的一个标识。说实话,一个做后端我是懵逼状态的。

不过网上资料很多,查了一遭,发现一个不错的哥们给出的案例,模仿一下成功实现,下面就自己总结一下:

实现的效果如上,个人觉得丑爆了。

下面是实现过程:

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获取按钮状态。的更多相关文章

  1. 关于jQuery获取checkbox状态的问题

    这位大神概括的很好 http://www.cnblogs.com/wangkongming/p/4002710.html

  2. jquery获取checkbox状态

    $("#id").is(":checked"); 返回true false

  3. jquery获取当前按钮、截取字符串、字符串拼接、动态循环添加元素

    截取字符串:字符串拼接:动态循环添加元素:获取当前按钮: {data : null, render: function(data, type, row ) { var loginName = $(&q ...

  4. jquery mobile 按钮部件(包含图标的使用)

    参考网址:http://api.jquerymobile.com/1.3/button/ 注:按钮的三种写法 <a href="#" class="ui-btn u ...

  5. jquery倒计时按钮常用于验证码倒计时

    <!doctype html><html><head> <meta charset="utf-8"> <title>jq ...

  6. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  8. Android自定义工具类获取按钮并绑定事件(利用暴力反射和注解)

    Android中为按钮绑定事件的有几种常见方式,你可以在布局文件中为按钮设置id,然后在MainActivity中通过findViewById方法获取按钮对象实例,再通过setOnClickListe ...

  9. (三)Jquery Mobile按钮详细讲解

    Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示           1.HTML5中的button      效果:      2. JM中的普通button        ...

随机推荐

  1. 《你必须知道的495个C语言问题》读书笔记之第1-2章:声明和初始化

    1. C标准中并没有精确定义数值类型的大小,但作了以下约束: (1) char类型可以存放小于等于127的值: (2) short int和int可以存放小于等于32767的值: (3) long i ...

  2. javascript学习笔记 BOM和DOM详解

    js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...

  3. Guava 工具类之Strings 的使用

    public class StringTest { public static void main(String[] args) { //判断是null还是空字符串 boolean b1 = Stri ...

  4. AndroidStudio布局编辑器强制刷新布局界面

    用AndroidStudio布局编辑器编辑界面的时候,在selector里调整按钮的颜色,调整后的颜色经常无法实时显示在布局编辑器里,每次都重新运行程序查看界面又非常麻烦和低效,可以用以下方法解决: ...

  5. python 安装virtualenv和wxPython

    有人说 Virtualenv.Fabric 和 PIP 是 Pythoneer 的三大神器 上一节说过了怎么安装PIP,下面继续安装virtualenv 安装wxPython时比较简单 sudo pi ...

  6. shell习题第12题:批量创建用户

    [题目要求] 用shell脚本实现如下需求 添加user_00 -- user_09 10个用户,并且给他们设置一个随机密码,密码要求10位包含大小写字母及数字,注意要把每个用户的密码记录到一个日志文 ...

  7. [转载]Linux缓存机制

    [转载]Linux缓存机制 来源:https://blog.csdn.net/weixin_38278334/article/details/96478405 linux下的缓存机制及清理buffer ...

  8. bootstrap-table的简单使用

    先上效果图: 第一步:引用bootstrap-table的样式和js. @Styles.Render("~/assets/css/bootstrap.css") @Styles.R ...

  9. SpringCloud多网卡配置(转)

    https://blog.csdn.net/lixiang987654321/article/details/88134324 docker部署过程中遇到如下问题: (1)docker容器创建之后,进 ...

  10. ReactNative 踩坑笔记

    1.fatal error: 'React/RCTBridgeDelegate.h' file not found 这个问题是应为没有安装cocoaPods 所以无法安装ios需要的第三方库.安装co ...