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>
 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值