jquery-dialog对话框的实现
来源:互联网 发布:我的世界手机版js制作 编辑:程序博客网 时间:2024/05/22 03:24
<!--引入jquery类库文件--><script src="js/jquery-1.7.1.min.js"></script><script src="js/jquery-ui-1.8.18.custom.min.js"></script><!--引入css样式类库--><link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.18.custom.css" />/*juqery代码部分*/<script>$(function (){ //注册对话框 $('#dialog').dialog({ autoOpen:false, //设置对话框打开方式 不是自动打开 show:'blind', //打开时的动画效果 hide:'explode', //关闭时的动画效果 modal:ture, //遮罩效果 false:非遮罩效果 title:'添加用户操作界面', //对话框标题 position:'top', //打开对话框的位置 top left rigth width:200, //代表的是对话框的宽度 height:200, //代表的是对话框的高度 drag:function(event,ui){ //可以测试 对话框当前的坐标位置 $('#dialog').html('我来拽哈!'); } });//触发连接事件 当你点击 连接 打开一个对话框 $('#dialog_link').click(function (){ $('#dialog').dialog('open'); });});</script>/*html代码部分*/<h1>模拟dialog对话框效果</h1><!--创建一个连接--><a href="#" id="dialog_link" class="ui-state-default "><span></span>open dialog</a><!--div对话框 $('#dialog').dialog(); 它就成了一个对话框 在页面中就会隐藏--><div id="dialog" title='hi'>嘿嘿</div>效果图:1. 2. 3. 当拖动时显示3