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操作Select大全(取值、设置选中等等)
Oct 29 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP 柱状图实现代码
2009/12/04 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
js 编写规范
2010/03/03 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
vue百度地图 + 定位的详解
2019/05/13 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python zip()函数用法实例分析
2018/03/17 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
营销专业应届生求职信
2013/11/26 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
企业消防安全制度
2014/02/02 职场文书
说明书怎么写
2014/05/06 职场文书
团日活动总结怎么写
2014/06/25 职场文书
2014年检验员工作总结
2014/11/19 职场文书
公司承诺书格式范文
2015/04/28 职场文书
《静夜思》教学反思
2016/02/17 职场文书
总结几个非常实用的Python库
2021/06/26 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python