jquery ui 插件实例（3）

最新推荐文章于 2021-03-14 13:20:59 发布

jjjy00

最新推荐文章于 2021-03-14 13:20:59 发布

阅读量287

点赞数

3、模拟Dialog效果

js效果

[javascript] view plain copy print ?

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js">
</script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<script language="javascript" type="text/javascript">
//当窗体加载完毕时候触发该匿名函数
//$(document) //dom对象转化为jquery对象
//.ready(function(){})
$(function(){
$("#dialog").dialog({
autoOpen:false, //设置对话框打开的方式不是自动打开
show:"blind", //打开时动画效果
hide:"explode", //关闭时的动画效果
modal:true, //遮罩效果
/* buttons:{
"确定":function(){
$(this).dialog("close"); //关闭对话框
},
"取消":function(){
alert("取消的操作");
}
}, */
buttons:[
{text:"ok",
click:function(){
$(this).dialog("close");
}
},
{text:"取消",
click:function(){
$(this).dialog("close");
}
}
],
//draggable:false, //是否可以拖动的效果
closeOnEscape:false,//是否采用esc键退出对话框
title:"添加用户操作界面",
position:"top", //对话框弹出位置可以使top left right center bottom 默认值是center
width:200,
hight:200,
resizable:false, //是否可以改变的操作 false 则不可以改变尺寸
zIndex:6,
//drag:function(event,ui){
// $("#dialog").html(111)//可以测试出拖拽效果
// }
})
//触发连接的事件当你点击连接打开一个对话框
$("#dialog_link").click(function(){
$("#dialog").dialog("open");
});
//怎样获取 option中的参数值
var modalValue=$("#dialog").dialog("option","model");
//alert(modalValue)
//怎样设置 option中的参数值
$("#dialog").dialog("option","model",false);
})
</script>

html格式

[html] view plain copy print ?

<body>
<h1>模拟Dialog效果</h1>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all" ><span class=""></span>Open Dialog</a>
</div>
<div id="dialog" title="h1!">
hello!
</div>

实际效果图例：

jjjy00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery ui 插件实例（3）

3、模拟Dialog效果js效果[javascript] view plaincopyprint?"stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" /> "javascript" type="text/javascript" src="./js/jquery-1.7.1.min
复制链接

扫一扫