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 处理URL实用技巧
Nov 23 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
js判断输入是否为数字的具体实例
2013/08/03 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
电子专业推荐信范文
2013/11/18 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2015年库房工作总结
2015/04/30 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
「月刊Action」2022年5月号封面公开
2022/03/21 日漫