JQuery UI之Dialog对话框应用

文章来源：http://lwlfree.cn/?p=208

 

最近做应用重构，其中一个页面用层来作为辅助页面完成功能，但是由于主页面非常之大，之前的层定位不准导致可用性降低，故有此文。

 

想到前端，就想到了JQuery及其UI，前一段用了TAB功能，感觉不错。遂想体验其他控件。

这次使用的是Dialog。

 

JQuery UI 版本：1.7.2: jQuery 1.3+

 

查到的资料是需要引用：

依靠组件：
UI Core
Draggable
Resizable
bgiframe 

 

实际引用:

<link type=”text/css” href=”../Js/JQuery_UI/themes/base/ui.all.css” rel=”stylesheet” />
<script type=”text/javascript” src=”../Js/JQuery_UI/jquery-1.3.2.js”></script>
<script type=”text/javascript” src=”../Js/JQuery_UI/ui/ui.core.js”></script>
<script type=”text/javascript” src=”../Js/JQuery_UI/ui/ui.draggable.js”></script>
<script type=”text/javascript” src=”../Js/JQuery_UI/ui/ui.resizable.js”></script>
<script type=”text/javascript” src=”../Js/JQuery_UI/ui/ui.dialog.js”></script>
<script type=”text/javascript” src=”../Js/JQuery_UI/external/bgiframe/jquery.bgiframe.js”></script>

 

初始化：

$(function() {
  $(“#floater”).dialog({
   bgiframe: true,   //使用 bgiframe 插件解决 IE6 下无法遮盖 select 元素问题
   modal: false,  //不使用窗口模式，即：页面上其它元素将不会被覆盖且可以响应用户操作
   autoOpen: false  //不自动打开，即：页面加载完毕后不显示Dialog窗体，这个是为了让用户需要的时候才显示所准备的。
  });
 });

 

关键性代码：

var top = $(obj).offset().top + 16;
var left = $(obj).offset().left – 290;
$(“#floater”).dialog(“option”, “position”, [left, top]);
$(“#floater”).dialog(“open”);

 

这几句是写在用户需要时触发Dialog窗体的函数体内部的，为了解决弹 出层定位问题，使用了这三句：

var top = $(obj).offset().top + 16;  //obj是用户触发的元素对象，这里要取obj的top值，这里的语法是必须在JQuery框架加载后使用，下同。
var left = $(obj).offset().left – 290;  //这里要取obj的left值，为了不遮盖住用户触发的元素，因此有一定的偏移量，如：+ 16 ，- 290。
$(“#floater”).dialog(“option”, “position”, [left, top]);  //设置弹出层的位置。

 

这样设置完毕后，弹出层就会出现在用户鼠标点击的元素左下方，方便用户使 用。

剩下的就是控制Dialog窗体是否显示的代码了，如下：

$(“#floater”).dialog(“open”);
$(“#floater”).dialog(“close”);

 

最后就是关于弹出层内容问题了，大家可以看到$(“#floater”)
这里的floater即弹出层的ID，用法如下：

<div id=”floater”>这里放置弹出层显示的内容</div>