注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

和申的个人主页

专注于java开发,1985wanggang

 
 
 

日志

 
 

js动态增加按钮,css3,使用checkbox+css模拟按钮形状,jquery  

2014-01-13 14:10:18|  分类: Html/Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图:
js动态增加按钮,css3,使用checkbox+css模拟按钮形状,jquery - 和申 - 和申的个人主页
右侧的为动态增加的按钮和文字。

 这个是hook,js中会取pitOptSwitch这个id来添加按钮。

<div id="pitOptSwitch" style="float:right"></div>

需要引入jquery
文件目录:
目录:
--index.html
--pitOptPermission.js
--switch.css
html
代码:index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />

<title>Button Switches with Checkboxes and CSS3 Fanciness

link rel="stylesheet" type="text/css" href="css/style.css"
</title>

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

<script src="pitOptPermission.js"></script>
</head>
<body>


<div class="switch onoff">
<input type="checkbox">
<label><i></i></label>
</div>
<br/>
<br/>

<div class="switch onoff">
<input type="checkbox">
<label><i></i></label>
</div>

<div id="pitOptSwitch" style="float:right"></div>

</body>
</html>

js

/**
@author: heshen.wangg
@version: 2014-01-10
*/
(function () {
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = './switch.css';
document.getElementsByTagName("head")[0].appendChild(link);
})();
jQuery(function(){

function init(isGodMode){
$('<div class="tip superpit">超级权限</div><div class="superpit"><div class="switch onoff"><input type="checkbox" name="superadmin" value="超级权限"><label><i></i></label></div></div>').appendTo("#pitOptSwitch");
var checkboxGod = $("#pitOptSwitch input[type='checkbox']");

if(isGodMode){
checkboxGod.attr("checked",true);
}else{
checkboxGod.attr("checked",false);
}

checkboxGod.click(function(){
var c = $(this).is(":checked");
if(!confirm("确认要打开超级模式,会去掉目前的不能修改的部分校验规则,有风险,操作需谨慎")){
$(this).attr("checked",false);
return;
}
$.post( "/..._god_mode_edit.do",
{
SWITCH: c
},
function( data ) {
if(data.success == 0){
checkboxGod.attr("checked",false);
alert('开启失败');
}
}
);
});
}

init(true)
/*
$.getJSON( "/...status.do", function( data ) {
if(data.isHavePermission){
init(data.isGodMode)
}
});
*/
});

switch.css

/**
@author: heshen.wangg
@version: 2014-01-10
*/
.superpit{
width: 80px;
height: 20px;
display: block;
border-radius: 4px;
float:left;
}
/* GLOBALS */



.switch.onoff {
position: relative;
}

.switch.onoff input {
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 100;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}




/* onoff 3 */

.switch.onoff {
width: 80px;
height: 20px;
}

.switch.onoff label {
display: block;
width: 100%;
height: 100%;
background: #a5a39d;
border-radius: 40px;
box-shadow:
inset 0 3px 8px 1px rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.5);
}

.switch.onoff label:after {
content: "";
position: absolute;
z-index: -1;
top: -8px; right: -8px; bottom: -8px; left: -8px;
border-radius: inherit;
background: #ababab;
box-shadow: 0 0 10px rgba(0,0,0,0.3),
0 1px 1px rgba(0,0,0,0.25);
}

.switch.onoff label:before {
content: "";
position: absolute;
z-index: -1;
top: -18px; right: -18px; bottom: -18px; left: -18px;
border-radius: inherit;

box-shadow:
0 1px 0 rgba(255,255,255,0.5);

filter: blur(1px);
}

.switch.onoff label i {
display: block;
height: 100%;
width: 60%;
border-radius: inherit;
background: silver;
position: absolute;
z-index: 2;
right: 40%;
top: 0;
background: #b2ac9e;
box-shadow:
inset 0 1px 0 white,
0 0 8px rgba(0,0,0,0.3),
0 5px 5px rgba(0,0,0,0.2);
}

.switch.onoff label i:after {
content: "";
position: absolute;
left: 15%;
top: 25%;
width: 70%;
height: 50%;
background: #d2cbc3;
border-radius: inherit;
}

.switch.onoff label i:before {
content: "off";
text-transform: uppercase;
font-style: normal;
font-weight: bold;
color: rgba(0,0,0,0.4);
text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
position: absolute;
top: 50%;
margin-top: -5px;
right: -50%;
}

.switch.onoff input:checked ~ label {
background: #9abb82;
}

.switch.onoff input:checked ~ label i {
right: -1%;
}

.switch.onoff input:checked ~ label i:before {
content: "on";
right: 115%;
color: #82a06a;
text-shadow:
0 1px 0 #afcb9b,
0 -1px 0 #6b8659;
}


统计信息唧唧歪歪唧唧网ggyygg.net
  评论这张
 
阅读(559)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016