CSS实现按钮YES-NO按钮+Jquery获取按钮状态。
2024-10-20 03:19:41
前几天我经理突然跟我说,能不能做一个开关按钮,需要过滤的一个标识。说实话,一个做后端我是懵逼状态的。
不过网上资料很多,查了一遭,发现一个不错的哥们给出的案例,模仿一下成功实现,下面就自己总结一下:
实现的效果如上,个人觉得丑爆了。
下面是实现过程:
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');
}
}
});
最新文章
- .NET正则表达式基础入门
- 01shell入门基础
- 学习Node.js笔记(一)
- iOS 9之适配ATS(转载)
- HTML---总结
- LoadRunner - 当DiscuzNT遇上了Loadrunner(下) (转发)
- Android实用代码七段(一)
- Delphi自定义消息应用及delphi托盘实现
- 武汉科技大学ACM:1005: 单位转换
- 浏览器 窗口 scrollTop 的兼容性问题
- (二十八)monggodb和maven零散笔记
- 你考虑清楚了吗就决定用 Bootstrap ?
- 导航控制器&;nbsp;UI_08(上)
- 深入理解Spring Redis的使用 (三)、使用RedisTemplate的操作类访问Redis
- SDL 开发实战(一):SDL介绍及开发环境配置
- Ios还是安卓的判断
- springboot + websocket + spring-messaging实现服务器向浏览器广播式
- Java 实现字符串的加密与解密
- Sql Server中的表访问方式Table Scan, Index Scan, Index Seek
- HDU 1074 Doing Homework 状压dp(第一道入门题)