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

和申的个人主页

专注于java开发,1985wanggang

 
 
 

日志

 
 

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

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

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

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

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


需要引入kissy,主要因为公司使用kissy,所以才有kissy版本在重新实现一下
文件目录:
目录:
--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://g.tbcdn.cn/kissy/k/1.4.1/seed-min.js?20140106"></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 = '/static/css/switch.css';
document.getElementsByTagName("head")[0].appendChild(link);
})();
(function(){
KISSY.ready(function(S){
var DOM = S.DOM,Event = S.Event;

KISSY.use('node,io', function(S,NODE,IO) {
if(!window.console){
window.console = {};
console = {};
console.log = function(e){ };
window.console = console;
}
if(S.all("#pitOptSwitch").length <= 0){
console.log("can't find element with id=pitOptSwitch");
}
function init(isGodMode){
S.all('<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 = S.all("#pitOptSwitch input[type='checkbox']");

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

checkboxGod.on('click.one',function(){
var c = checkboxGod.prop("checked");

if(c && !confirm("确认要打开超级模式,会去掉目前的针对普通小二不能修改的限制。比如修改,删除已经报名的坑位等,有风险,操作需谨慎,不清楚请选择取消!!")){
checkboxGod.attr("checked",false);
return;
}
IO.post( "/...god_mode_edit.do",
{
SWITCH: c
},
function( data ) {
if(data.isGodMode != c){
if(c){
alert('开启失败');
}else{
alert('关闭失败');
}
}
},
"json"
);
});
}


IO.getJSON( "/...god_mode_status.do", function( data ) {
if(data.isHavePermission){
init(data.isGodMode)
}
});
});

});
})();
10.125.198.162
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;
}



参考:http://docs.kissyui.com/统计信息唧唧歪歪唧唧网ggyygg.net
  评论这张
 
阅读(747)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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