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


Posted in Javascript onAugust 20, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
extJs 常用到的增,删,改,查操作代码
Dec 28 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
vue实现倒计时功能
Mar 24 Vue.js
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 #Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 #Javascript
JS实现漂亮的时间选择框效果
Aug 20 #Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 #Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 #Javascript
浅谈angular懒加载的一些坑
Aug 20 #Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 #Javascript
You might like
zend framework文件上传功能实例代码
2013/12/25 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
js实现分页功能
2017/05/24 Javascript
JS中的三个循环小结
2017/06/20 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
C语言编程题
2015/03/09 面试题
党员个人思想汇报
2013/12/28 职场文书
将相和教学反思
2014/02/04 职场文书
万年牢教学反思
2014/02/15 职场文书
入职担保书范文
2014/05/21 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang