AD

JQuery UI Dialog dialog box of the application

Source: **lwlfree.cn/?p=208

A recent application of reconstruction, one of the page as a supplementary page with the layer to complete the function, but due to the main page is very great, before the layer orientation are not allowed to lead to reduced availability, so there is this article.

Think of the front, he thought of JQuery and the UI, using the TAB function of the previous paragraph and feel good. Then want to experience the other controls.

The use of the Dialog.

JQuery UI version: 1.7.2: jQuery 1.3 +

Find reference information is required:

Rely on components:
UI Core
Draggable
Resizable
bgiframe

Actual quote:

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

Initialization:

$(function() {
  $("#floater").dialog({
   bgiframe: true,   // Use the bgiframe plugin solved   IE6  The following problems could not be covered select elements  
   modal: false,  // Do not use window mode, i.e.  : Other elements on the page will not be overwritten and can respond to user actions  
   autoOpen: false  // Does not automatically open, i.e.  : The page has finished loading does not display the Dialog form  , This is to allow the user to display the  .
  });
 });

Key code:

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

It is written in the user needs a few trigger Dialog form within function body, in order to solve the positioning of the pop-up layer, the use of these three:

var top = $(obj).offset().top + 16;  //obj Is a user-triggered element object, here are to take  obj The top value  , Here is the syntax you must use the JQuery framework after loading  , For the purposes of  .
var left = $(obj).offset().left  –   290;  // Here take the obj  left Value, in order not to cover live user-triggered elements  , Therefore there is a certain offset, such as  :+ 16 ,- 290.
$("#floater").dialog("option", "position", [left, top]);  // Sets the position of the popup layer  .

This is set up, popup will appear in the lower left elements of the user mouse clicks, user-friendly.

Dialog remains is to control whether the form shown in the code, as follows:

$("#floater").dialog("open");
$("#floater").dialog("close");

Finally is the issue on the content of the pop-up layer, we can see that $ ("# floater")
Here's floater that pops up layer ID, use the following:

<div"floater"> Here the contents of the popup layer show  </div>
标签: lt, orientation, cn, script type, text javascript, js, stylesheet, ui, reconstruction, css href, jquery, paragraph, key code, draggable, application source, tab function, option position, floater, posi
分类: Web
时间: 2010-05-31

相关文章

  1. jQuery UI的Dialog无法提交问题的解决方法

    最近在使用jQuery UI的Dialog控件时发现如果在此控件放置表单,则所有表单均无法正常提交 具体表现为: 1.提交按钮失效,点击后无任何反应. 2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog ...
  2. jquery ui dialog ie8出现滚动条的解决方法

    jquery ui 的 dialog 在IE8下会出现不该出现的滚动条,在JQUI的FORUM上SEARCH下,发现也有人碰上,当解决办法就是把滚动条隐藏 此问题在UI1.7就出现,到了UI1.8也未修复,真不知道该怎么 ...
  3. jQuery UI Dialog控件中的表单无法正常提交的解决方法

    研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部.form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内. 最近 ...
  4. jquery ui datepicker and dialog with the use of display problems

    The jquery ui datepicker and dialog when used together, as datepicker's z-index than the dialog of the small, ...
  5. jQuery UI dialog plugin error message: $ (this). dialog is not a function

    Use jQuery UI 1.8.4 dialog plugin encountered this error: [Img] http://dl.javaeye.com/upload/attachment/308166 ...
  6. jQuery ui Dialog explain the parameters

    Download jquery ui: http://jqueryui.com/ ============================ Jquery UI dialog Detailed Explanation (C ...
  7. jcaptcha verification code into jquery ui dialog issue in IE, there funny

    Will produce the picture jcaptcha into jquery ui dialog appears the problem out now, do not say the problem is ...
  8. jQuery UI Dialog 创建友好的弹出对话框实现代码

    jQuery UI Dialog是jQuery UI的弹出对话框组件,使用它可以创建各种美观的弹出对话框:它可以设置对话框的标题.内容,并且使对话框可以拖动.调整大小.及关闭:平常主要用来替代浏览嚣自带的alert.co ...
  9. jquery ui dialog实现弹窗特效的思路及代码

    这篇文章介绍了jquery ui dialog实现弹窗特效的思路及代码,有需要的朋友可以参考一下 今天我们用jquery ui dialog来做一个弹窗特效.我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且 ...
  10. 为jquery.ui.dialog 增加"在当前鼠标位置打开"的功能

    在使用jquery.ui.dialog的过程中,发现position参数有些问题,无法通过position: [PosX, PosY]动态传递位置参数.下面是官方demo 代码 $("#dialog" ...
  11. 为jquery.ui.dialog 增加"自动记住关闭时的位置"的功能

    笔者在项目中使用 jquery.ui.dialog 1.7.2时,当使用$("#d").dialog("open");时,dialog总是弹出在option中指定的位置: 经过摸索 ...
  12. 浅析JQuery UI Dialog的样式设置问题

    本篇文章主要是对JQuery中UI Dialog的样式设置问题进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 最近在用一个JQUERY UI Dialog的插件,感觉特别强大,但样式设置比较麻烦,研究 ...
  13. jQuery UI dialog 的使用

    初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话框,在当前最新版本的 ...
  14. Jquery UI dialog Xiangjie

    Source: http://xufish.blogbus.com/logs/39583154.html AUTHOR: Jevoly Or look at the example. Also if you want t ...
  15. 用jquery中插件dialog实现弹框效果实例代码

    这篇文章介绍了jquery中插件dialog实现弹框效果实例代码,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
  16. 关于动态刷新html问题 (UI 组件 dialog,grid...)

    dojo,jquery ui(Ext其他的UI库没怎么接触,估计也是一样) 以及一些UI库常常用到UI控件,UI组件效果十分绚丽,但是使用灰常苦难,在获取值是出现莫名的问题(取值.事件等) 今天仔细看了一下,原来在使用组 ...
  17. jQuery UI 1.9 release milestone M1

    jQuery UI is a set of jQuery UI plug-in page, the page contains many types of common space, such as Tabs (such ...
  18. jquery ui plug-in instance methods

    Reference: http://www.jqueryajax.com/jquery878 jquery ui plug-in tutorials and various effects jquery ui (inte ...
  19. JQuery and JQuery ui with a simple login example to achieve

    Examples of monitoring agents using the TCPMonitor sent and received soap message. <html> <head> & ...