jquery弹出框插件jquery.ui.dialog用法分析

本文实例讲述了jquery弹出框插件jquery.ui.dialog用法。分享给大家供大家参考，具体如下：

1. jquery.ui.dialog

官方地址 http://jqueryui.net/dialog/

jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog

2. 文件引用

要使用jquery.ui.dialog,需要引用两个文件，1个是js，另外1个是css

在contentpage中添加：

<script type="text/javascript" src="/Content/ui.js"></script>

在masterpage中添加：

<link href="jquery-ui.css" rel="stylesheet" type="text/css">

3. 使用方法

jquery.ui.dialog相比thinkbox要有优势，thinkbox是在$.ready中指定的，导致不能灵活的扩展弹出层的弹出时机，针对一个逻辑判断，一种情况下弹出，另外一种不弹出,thinkbox就缺乏应变能力，而jquery.ui.dialog()采用 $('..').dialog(..);的方式使得弹出更加灵活

1)弹出简单的对话框

$("#dialog").dialog();

2）弹出模式对话框

$("#dialog").dialog({ modal: true });

3）弹出模式对话框，并有遮罩效果

代码如下:

$("#dialog").dialog({ modal: true, overlay: { opacity: 0.5, background: "black" } });

4）带确定与取消按钮

代码如下:

$("#dialog").dialog({ buttons: { "Ok": function() { alert("Ok"); }, "Cancel": function() { $(this).dialog("close"); } } });

5）如何关闭对话框

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

<!DOCTYPE html>
<html>
<head>
 <link href="/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 <script>
 $(document).ready(function() {
  $("#dialog").dialog();
 });
 </script>
</head>
<body style="font-size:62.5%;">
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <link href="/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 <script>
 $(document).ready(function() {
  $("#dialog").dialog();
 });
 </script>
</head>
<body style="font-size:62.5%;">
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
</body>
</html>

 jQuery boxy

使用该jQuery插件

要想使用该jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector"，例如："a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为，如下：

① 一个href属性中如果锚点包含#，则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。

② 如果href锚点内容为其他一些东西，则会试图使用Ajax载入其对应的内容。理想情况下，我们有相同的起源检查和委托对框架的跨域请求。这将会在下面展示。

③ 表单上会显示一个提交模式的确认消息。

使用方法

使用下载包中的三个文件！

<script type ="text/javascript " src ="../js/jquery.boxy.js "> </script>
<link rel ="stylesheet " href ="../css/boxy.css " type ="text/css " />

基本的插件用法：

<script type="text/javascript">
$(function(){ $(".boxy").boxy(); });
</script>

请注意，boxy对话框自动计算出您的内容区域内本身的大小和位置，没有必要明确规定了包装集的尺寸。

<link rel ="stylesheet" href ="../css/common.css" type ="text/css" />

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery UI库中dialog对话框功能使用全解析

    对话框(dialog),是jQuery UI 非常重要的一个功能.它彻底的代替了JavaScript 的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 一．开启多个dialog    只要设置不同的id 即可实现. $('#x').dialog(); $('#y').dialog(); 二．修改dialog 样式    在弹出的dialog 对话框中,在火狐浏览器中打开Firebug 或者右击->查看 元素.可以看看dialog 的样式,对dialog 的标题背景进行修

  • JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法

    背景:想通过Esc键关闭展示中的Dialog对话框,发现有些对话框可以,有些会失效. 原因分析: 1.对话框上可以输入内容的标签元素可以,反之不行. 2.如果鼠标点击对话框后,也可以Esc键关闭. 可以看出对话框上是需要聚焦就可以了. 解决方案: 方案一: focus:function(){ $("#id").focus(); } 方案二: 延迟聚焦 setTimeout(function() { $("#id").focus(); }, 500); 以上所述是小编

  • 分享2个jQuery插件--jquery.fileupload与artdialog

    分享2个jQuery插件--jquery.fileupload与artdialog

    这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="

  • 修改jquery中dialog的title属性方法(推荐)

    好久都没办法尝试成功 在网上找的经测试也不行 于是在官方文档上看到了 结果终于成功了 $("#overTime").dialog({ autoOpen: false, width: 400, modal: true, title: "Dialog Title", buttons: { "确定": function () { }, "取消": function () { } } }); 在初始化的时候要写title属性(官方文档

  • 修改Jquery Dialog 位置的实现方法

    今天在做一个功能的时候使用到了Jquery UI中的dialog组件,因为是一个很简单的组件,有很多功能都没有提供,比如说直接获取到dialog的位置,直接修改dialog的位置都是不行的,并且但可拖动的位置看不见的时候,这个时候就是坑了,关闭不了,也拖动不了,这个时候只能刷新页面来重新初始化界面了. 我今天解决的就是这个问题:解决这种问题有两种方式(个人认为) 1.修改属性让可拖动局域可见,进行拖动 2.不让出现可拖动区域不可见的情况. 针对第一种情况,我没有想到合适的办法.下面给出第二种情况

  • jQuery弹出框代码封装DialogHelper

    看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙.思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见. 复制代码 代码如下: //require ScrollHelper.js function DialogHelper() {     var _this

  • jQuery实现dialog设置focus焦点的方法

    本文实例讲述了jQuery实现dialog设置focus焦点的方法.分享给大家供大家参考.具体分析如下: 当弹出对话框,默认我们应该将焦点定位到输入的文本框,但是在dialog.show()之前写上$("#txtGroupName").focus();无法生效. 查看jQuery的官方文档后,发现dialog提供了一个focus的参数,ok,试试先~~ //显示新建项目群组对话框 function showCreateProjectGroupDialog(i) { $("#l

  • jquery弹出框插件jquery.ui.dialog用法分析

    本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

  • jQuery仿IOS弹出框插件

    jQuery仿IOS弹出框插件

    这款弹出框插件是本人自己模仿IOS原生弹出框写的一个自定义插件,包括Alert弹出框和Confirm确认框,支持标题,内容,按钮文字以及按钮回调函数自定义,使用非常简单,可以进行扩展,下面是插件使用方法,一看就懂: 首先导入jquery库和插件库以及css文件 <script src="./jquery-1.8.3.min.js"></script> <script src="./jquery.confirm-1.1.js">&l

  • jQuery 弹出层插件(推荐)

    最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () { $.fn.PopDialog = function (options) { var defaults = { Event: "click", //触发响应事件 title: "title", //弹出层的标题 type: "text", //弹出层类型(text.容器

  • jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

    jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件

    最终效果: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出层插件:jquery.artwl.thickbox.js</title> <script src="/js_lib/jQuery-1

  • jQuery弹出下拉列表插件（实现kindeditor的@功能）

    jQuery弹出下拉列表插件（实现kindeditor的@功能）

    这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样).在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求,于是我决定在该插件上改良,主要是下面几点: 1. @内容的输入,能够匹配多个属性值. 2. 选中列表值后,是成块插入kindeditor的(方便删除,也利于区分文本). 3. 修正输入偶数关键字@功能失效问题. 前言 在一开始,我用bootstrap-suggest(https://github.

  • jQuery弹出层插件popShow用法示例

    jQuery弹出层插件popShow用法示例

    本文实例讲述了jQuery弹出层插件popShow用法.分享给大家供大家参考,具体如下: popShow弹出层 图1.1 弹出层效果 1.引入JS和CSS文件 <link href="popShow.css" rel="stylesheet" type="text/css" /> <script src="/js/common/jquery.min.js" type="text/javascript

  • 原创jQuery弹出层插件分享

    依赖jquery,兼容IE6\7\8 火狐 chrom 等主流浏览器(绝对原创), 不过请求大神帮我提升点效率. /** * jQuery弹出层插件 * * @author lanhaoooo@163.com * @since 2014-08-23 */ (function($) { var methods = { o : { isIe : !-[ 1, ] || document.documentMode >= 9,//后面的是判断IE9.IE10的 ie6 : !-[ 1, ] &&am

  • jQuery弹出层插件popShow(改进版)用法示例

    jQuery弹出层插件popShow(改进版)用法示例

    本文实例讲述了jQuery弹出层插件popShow(改进版)用法.分享给大家供大家参考,具体如下: 前面一篇<jQuery弹出层插件popShow用法示例>分析了popShow插件的基本用法,这里再对插件进行一番改进. popShow弹出层 图1.1 弹出层效果 1.引入JS和CSS文件 <link href="popShow.css" rel="stylesheet" type="text/css" /> <scr

  • jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件

    最终效果: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>弹出层插件:jquery.artwl.thickbox.js</title> <script src="/js_lib/jQuery-1

  • 基于jQuery的弹出框插件

    html如下: 复制代码 代码如下: <!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-e

随机推荐