jquery插件之弹出对话框效果

来源：互联网发布：制作荣誉证书图片软件编辑：程序博客网时间：2024/06/05 21:00

1、在学习jquery插件之前首先我们来看一下该怎样开始布置工作

jquery ui使用前提：

           第一步：引入类库文件
                   包括：
                       js类库             js库引入要有顺序首先第一个引入的是jquery核心文件（jquery-1.7.1.min.js），然后在引入jquery-ui核心文件（jquery-ui-1.8.18.custom.min.js）
                        css样式类库    jquery-ui-1.8.18.custom.css

第二步：模拟实现

弹出对话框效果实现：

<!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>jquery-ui-弹出对话框效果</title>
<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>


<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" language="javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>


<link type="text/css" rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
   $(function (){
       $("#dialog").dialog({
               //这只自动打开窗口
               autoOpen:false,
               //窗口宽度
               width:400,
               //窗口高度
               width:300,
               //打开窗口时的效果
               show:"explode",
               //关闭窗口时的效果
               hide:"explode",
               //是否显示遮罩效果
               modal:true, //默认是不显示的
               //打开窗口的位置
               position:"center", //默认为中间 left center right
               //设置窗口的标题
               title:"fdsafds",
               //是否可以拖拽
               draggable:true, //对话框是否可以拖动，默认可以拖动
               //是否可以改变窗口的大小
               resizable:false,
               //处于层数默认1000层
               zIndex:12,
               //是否采用ESC键退出对话框，default 可以使用
               closeOnEscape:false,
               //当拖拽时执行的函数
               drag:function (){
                       $("#dialog").html("你要把我拽到哪里去？我还想睡觉呢。");
                   },
               //设置按钮
               buttons:[
                   {
                       text:"确定",
                       click:function (){
                               alert($(this).text()); //这里的this指的是id为dialog的这个div
                           },
                   },
                   {
                       text:"取消",
                       mouseover:function (){
                               alert("再见我要走了啊！");
                               $("#dialog").dialog("close");
                           }

                   }]
           });


           //获取参数值
           alert("要弹出一个宽度为"+$("#dialog").dialog("option","width")+"的窗口");
           //设置参数值
           $("#dialog").dialog("option","modal",false);
           //参数1：固定值
           //参数2：参数名
           //参数3：参数值

       //为#dialog_link添加一个click事件，来打开一个窗口，该窗口的注册在上面
       $("#dialog_link").click(function (){
               $("#dialog").dialog("open");
           });

       });
</script>
</head>
<body>
<h1>模拟dialog效果</h1>

<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>打开一个新的窗口</a>

<div id="dialog" title="hi">
   hello
</div>
</body>
</html>