<!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>基于YUI3的弹出层组件---功能强大</title>
<link href="public.css" rel="stylesheet" media="all" type="text/css" />
<script type="text/javascript" src="http://localhost/yui/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<select><option>ie6下select将被遮住</option></select>
<textarea>ie6下textarea将被遮住</textarea>
<!--<iframe src="http://www.qiqicartoon.com?page_id=2" style="width:400px;height:450px;"></iframe>-->
<input type="button" value="javascript浮出已存在的元素Demo" class="demo3" style="position:absolute;top:70%;left:10px;width:250px;background:#ff7300;border:1px solid #ff5500;color:#fff;cursor:pointer;line-height:25px;height:25px;" />
<input type="button" value="生成的浮出层-有遮罩层Demo" class="demo" style="position:absolute;top:80%;left:10px;width:250px;background:#ff7300;border:1px solid #ff5500;color:#fff;cursor:pointer;line-height:25px;height:25px;" />
<input type="button" value="生成的浮出层-无遮罩层Demo" class="demo2" style="position:absolute;top:90%;left:10px;width:250px;background:#ff7300;border:1px solid #ff5500;color:#fff;cursor:pointer;line-height:25px;height:25px;" />
<input type="button" value="向dialog添加按钮-有遮罩层Demo" class="demo4" style="position:absolute;top:60%;left:10px;width:250px;background:#ff7300;border:1px solid #ff5500;color:#fff;cursor:pointer;line-height:25px;height:25px;" />
<div class="popDiv hide"><h2 class="popDiv-hd">弹出层<span class="close">关闭</span></h2>内容</div>
<div class="absolute" style="position:absolute;"></div>
</body>
<script type="text/javascript">
YUI({
base : 'http://localhost/yui/build/',
combine : false,
loadOptional:true,
modules : {
'dialogCss' : {
type : 'css',
fullpath : 'http://localhost/sc/dialog/dialog.css?time='+ (new Date()).getTime() +''
},
'dialog' : {
type : 'js',
fullpath : 'http://localhost/sc/dialog/dialog.js?time='+ (new Date()).getTime() +'',
requires : ['substitute','dd-plugin','widget-parent','widget-stdmod','widget-child','widget','anim','widget-postion','widget-position-align','widget-stack','dialogCss']
}
}
}).use('dialog','console',function (Y){
new Y.Console().render();
var test = function (){
alert('您点击了确定');
}
var d = new Y.Dialog({
maskDiv : {
bool : true,//boolean,为true则启用遮罩层
opacity : 0.5,//num,遮罩层的透明度
bg : '#0e6484',//string,遮罩层的背景色
title : '点击关闭',//string,遮罩层的tips
cs : 'mask'//string,遮罩层的class属性
},
popDiv : {
node : null,//HTML element || null,如果定义,该元素将被浮出,如果未定义该值,系统将自动生成浮出层,并且将content中对应的值填充到浮出层中
isCenter : true,//boolean,为true,则居中
w : 200,//num,浮出层的宽度,如果没有定义,浮出层的宽度值将采用外部样式表的宽度值
h : 200,//num,浮出层的高度,如果没有定义,浮出层的高度值将采用外部样式表的高度值
drag : {
bool:true,//boolean,为true则可以支持代理托动
node : '.popDiv-hd'//string,代理托动的html节点,如果启用了托动,该值必须要设置
},
title : '弹出层的标题',//string,浮出层的标题
close : {
node : '#close',//html element,用于触发关闭事件的HTML节点
title : '点击关闭'//string,触发关闭事件的HTML元素的title属性值
},
content : {//如果没有指定浮出层或者指定的浮出层节点在文档中无法找到,系统将自动生成浮出层,并将content的值填充到浮出层中
hd : '<h2>浮出层头部<span id="close">关闭</span></h2>',//生成浮出层头部标题
bd : '<div>浮出层主体</div>',//生成浮出层主体内容
fo : '<p>浮出层底部</p>'//生成浮出层底部内容
},
renderNode : '.absolute'//HTML element必填项,用于将生成的浮出层渲染到该容器中,该容器必须要绝对定位于文档中,例如"#absolute"
},
btn : {
def : {
bvalue : false,//boolean,为true时则插入按钮,默认false
ensureBtn : true,//boolean,为true插入确定按钮,默认false
backBtn : true//boolean,为true插入返回按钮,默认false
},
ensureBtn : {
tt : '确定',//确定按钮的文本
cl : 'enter',//确定按钮的class属性
fn : test//function,点击确定按钮的回调函数
},
backBtn : {
tt : '返回',//string,定义返回按钮的tip和文本值
cl : 'back'//string,定义返回按钮的class属性
}
}
});
Y.on('click',function (){
d.set('popDiv.node',null);
d.set('maskDiv.bool',true);
d.set('popDiv.close.node','#close');
d.render();
},'.demo');
Y.on('click',function (){
d.set('popDiv.node',null);
//p.set('popDiv.close.node','.close');
d.set('maskDiv.bool',false);
d.render();
},'.demo2');
Y.on('click',function (){
d.set('popDiv.close.node','.close');
d.set('popDiv.node','.popDiv');
d.set('maskDiv.bool',true);
d.render();
},'.demo3');
Y.on('click',function (){
d.set('popDiv.close.node','.close');
d.set('popDiv.node','.popDiv');
d.set('btn.def.bvalue',true);
d.set('btn.def.backBtn',false);
d.set('maskDiv.bool',true);
d.render();
},'.demo4');
});
</script>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
dialog.rar (12个子文件)
dialog
.tmp_index.html.75539~ 2KB
dialog-min.js 7KB
index.html 5KB
dialog.css 187B
.tmp_index.html.32116~ 4KB
.project 207B
.tmp_index.html.5172~ 3KB
.tmp_index.html.82988~ 356B
.tmp_index.html.78303~ 356B
dialog.js 14KB
public.css 363B
.tmp_index.html.94464~ 2KB
共 12 条
- 1
资源评论
- xiaogang_ok2014-03-27文档不错,值得一看
- nyuu20002014-03-12很有参考价值的例子
qiqicartoon
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功