淘宝KISSYUI popup弹出层功能增强
转自：玉米串
上篇文章介绍了最基本的KISSY Dialog弹出层《简洁好看的popup弹出层源码-KISSY Dialog》，表现效果简洁美观。
现在我在原来代码的基础上加上必填项验证的功能和可拖动功能。
很简单，只加了几行代码就搞定。还是下载就可运行，大家可以对比下代码的不同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>umtry.com</title>
<meta name="author" content="umtry" />
<meta name="copyright" content="2011-2099 umtry.com" />
<link rel="stylesheet" type="text/css" href="http://a.tbcdn.cn/s/kissy/1.2.0/cssbase-min.css" />
<script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script>
<style>
/*******全局***************/
body{background:url(../images/bg.jpg) no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
table{}
tr{}
th{width:130px;vertical-align:top;}
th.ltitle{text-align:right;padding:7px 10px;}
th.bgc{background-color:#edfaff;}
td{vertical-align:top;padding:7px 7px;}
/*******通用弹出层***************/
.dialog{position:absolute;left:-9999px;top:-9999px;}
.pupo{background-color:#ffffff;border:1px solid #c2d5e3;padding:1px 2px;}
.pupo .header{-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;background-color:#6ecff9;font-size:15px;font-weight:border;padding:4px 5px;}
.pupo .body{padding:5px 5px;}
.pupo .footer{text-align:right;}
/*******弹出层底部按钮****************/
.my-button-cls {
text-align: center;
background: #AACF4C;
border: 1px solid #86A33B;
padding: 4px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
color: white;
margin: 10px 10px;
cursor: default;
}
</style>
</head>
<body>
<input type="button" name="addnotice" id="addnotice" value="点我试试">
<!------------------------------------------------------->
<div class='dialog pupo' id='notice_dialog'>
<div class='content'>
<div class='header'>
课题审批
</div>
<div class='body'>
<form action="project.php?mod=detail&do=doaddnotice" name="aj_notice" id="aj_notice" method="POST">
<table>
<tr>
<td>课题名称：</td><td>论武力的作用</td>
</tr>
<tr>
<td>公告类型</td>
<td>
<select name="ntype">
<option value=1> 组内公告 </option>
<option value=2> 全站公告 </option>
</select>
</td>
</tr>
<tr>
<td>公告内容：</td><td><textarea cols="50" rows="5" name="content" id="content"></textarea></td>
</tr>
</table>
<input type="hidden" name="pid" id="pid" value="<{$project.project_id}>">
</form>
</div>
<div class='footer'>
</div>
</div>
</div>
<!---------------------------------------------------------->
<script type="text/javascript">
//与原来的代码相比，这里又多引入了连个文件‘validation’和‘dd’，一个实现验证功能，一个实现拖动功能
KISSY.use("ua,node,overlay,button,validation,dd", function(S, UA, Node, O, Button, Validation, DD) {
var d = new O.Dialog({
srcNode: "#notice_dialog",
width: 400,
closable: false,//去除右上角的关闭符号"X"
elStyle:{
position: UA.ie == 6 ? "absolute" : "fixed"
},
align: {
points: ['cc', 'cc']//弹出层的位置，在浏览器正中央
},
effect: {
effect:"fade",//以渐进的效果显示弹出层,
duration:0.5
},
header:Node.one('.header'),
body:Node.one('.body'),
footer:Node.one('.footer'),
mask: true
});
// 生成两个按钮
var ok = new Button({
content: " 确 认 ",
render: d.get('footer'),
width:50,
elCls: 'my-button-cls',
tooltip: "点击发布公告"
});
var cancel = new Button({
content: " 关 闭 ",
render: d.get('footer'),
width:50,
elCls: 'my-button-cls',
tooltip: "点击关闭"
});
ok.render();//渲染确认按钮
cancel.render();//渲染关闭按钮
//验证必填项
var verifyform = new Validation('#aj_notice',{
style:"under"
});
verifyform.add("#content",{
length:[1,10] //限制公告内容的长度。此行注释掉后就只会判断是否填写。更多的配置项请查询KISSY API
});
Node.one('#addnotice').on('click', function(e) {//点击按钮触发
d.show();
});
ok.on("click",function(){//点击确认按钮触发
//判断必填项是否填写
var isValid = verifyform.isValid();
if(!isValid){
return false;
}
d.hide();
S.DOM.get('#aj_notice').submit();//这里就是点击确认后提交弹出层表单
});
cancel.on("click",function(){//点击关闭按钮触发
d.hide();
});
});
</script>
</body>
</html>
