您的位置：首页 > Web前端 > JQuery

jQuery插件实现模拟dialogs效果实例（图片）

2012-03-28 15:39 891 查看

<!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>模拟dialogs效果</title>

<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>

<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css"/>



<script type="text/javascript">

//当窗体加载完毕的时候触发匿名函数

//$(document) //把document对象转换成jquery对象

//.ready(function(){})

$(function (){

//注册对话框

$("#dialog").dialog({

autoOpen:false,//设置对话框的打开方式不是自动打开

show:"blind", //打开时的动画效果

hide:"explode",//关闭时的动画效果

modal:true ,//遮罩效果 false非遮罩效果

/*buttons:{//添加按钮的操作

"确定":function(){

$(this).dialog("close");//关闭对话框

alert("提交");

},

"取消":function(){

alert("取消操作");

}

},*/

//buttons的写法的第二种方式

buttons:[

{

text:"ok",

click:function (){

$(this).dialog("close"); //关闭对话框的操作

}

},

{

text:"取消",

click:function(){

$(this).dialog("close"); //关闭对话框的操作

}

}

],

draggable:true,//是否可以拖动的效果 true可以拖动默认值为true false表示不可以拖动

closeOnEscape:false,//是否采用esc键退出对话框如果为false则不采用 true采用默认值true

title:"添加用户操作界面",//对话框的标题

position:"top",//对话框弹出的位置可以使top left right center bottom 默认值center

width:600,//对话框的高度

heigth:200,//对话框的宽度

resizeble:false ,//是否可以改变的操作 false则不可以改变 true可以改变默认值为true

zIndex:6,

drag:function(event,ui){

//可以测试出对话框当期的坐标位置

}

});

//触发连接事件当点击连接打开一个对话

$("#dialog_link").click(function(){

$("#dialog").dialog("open");//open 参数作用打开对话框

});

//我怎么获取我设置的options的参数值

var modalValue = $("#dialog").dialog("option","modal");

alert(modalValue);

//我怎么设置option的参数值

$("#dialog").dialog("option","modal",false);

});

</script>

<style>

#dialog_link{

padding: .4em 1em .4em 20px;

text-decoration:none;

position:relative;

}

#dialog_link span.ui-icon{

margin:0 5px 0 0;

position:absolute;

left: .2em;

top:50%;

margin-top:-8px;

}

</style>

</head>

<body>

<h1>模拟dialogs效果</h1>

<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span></span>Open Dialog</a>



<div id="dialog" title="hi">

Hello!

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航