使用jQuery开发dialog对话框插件
1、插件使用
首先引入 jquery 库,然后引入 dialog.js、dialog.css,如下:
<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/dialog.js"></script>
<link rel="stylesheet" href="css/blue/dialog.css"/>
dialog 插件是 $.dialog 上面的静态函数,可以使用 $.dialog.open({}) 方式打开一个 dialog
如下函数打开一个宽 600 高 400 的模态对话框,它的 id 是 dialog1,使用 ajax 方式获取对话框显示内容,显示关闭动画分别为 slideDown 和 slideUp
function openUrlDialog() {
$.dialog.open({
id: 'dialog1', // 对话框div的id
url: 'ajax/admin_dialog.html', // 用来获取远程数据的url
width: 600, // 对话框的宽
height: 400, // 对话框的高
title: '使用url加载数据', // 标题
modal: true, // 模态窗口配置, true|false,默认false
showType: 'slide' // 对话框打开、关闭时的动画效果,slide|fade,默认没有动画效果
});
}
如下函数打开一个宽 900 高 500 的对话框,它的 id 是 dialog2,显示内容使用 content 选项配置,显示关闭动画分别为 fadeIn 和 fadeOut
function openContentDialog() {
$.dialog.open({
id: 'dialog2',
content: '我是使用content配置的对话框内容',
width: 900,
height: 500,
title: '使用content加载数据',
showType: 'fade'
});
}
2、核心函数
函数名 | 参数 | 作用 | 返回值 | 示例 |
open | Object | 打开一个dialog | 创建的dialog对象 | |
close | id, 回调函数 | 根据id关闭指定dialog | 无 | $.dialog.close("dialog1"); |
reload | id | 根据id刷新指定dialog | 无 | $.dialog.reload("dialog1"); |
3、open 函数的参数配置选项
参数 | 类型 | 作用 |
id | string | dialog插件div的id属性值,默认:"jquery_dialog_" + new Date().getTime(); |
title | string | dialog插件的标题,默认:和id一样 |
width | int | dialog插件div的宽,默认500 |
height | int | dialog插件div的高,默认300 |
top | int | 用于调整与body顶部的距离,值越大,距离越小,默认3 |
modal | boolean | 模态对话框配置,默认false |
url | string | 获取远程内容使用的url地址,默认空字符串 |
content | string | 内容字符串,在填充对话框内容时优先级最高,默认空字符串 |
html | [] | 内容文档的jQuery对象数组,在填充对话框内容时优先级次于content选项,默认undefined |
showType | string | 显示、关闭对话框时的动画效果,有slide和fade两种,默认无动画效果 |
onClose | function | 关闭对话框(全部动画效果)之后执行的函数,默认null |
4、DOM结构
openContentDialog() 函数生成的对话框DOM结构如下:
<div id="dialog2" class="dialog-container" style="width: 900px; height: 500px; top: 149.333px; left: 510px; z-index: 1104;">
<div class="dialog-header" style="cursor: default;">
<div class="dialog-title">使用content加载数据</div>
<div class="dialog-close"></div>
</div>
<div class="dialog-content" style="width: 868px; height: 443px;">我是使用content配置的对话框内容</div>
</div>
在 dialog.js 中,234 至 239 行是生成 DOM 结构、绑定事件、加载内容的主体部分
// 创建对话框
var dialog = initDialog(dialogId, title);
initSize(dialog, options);
bindEvent(dialog);
bindDrag(dialog);
load(dialog, options);
5、演示和代码
dialog.js http://5ijy01.duapp.com/jq-ui/js/dialog.js
dialog.css http://5ijy01.duapp.com/jq-ui/css/blue/dialog.css
Github https://github.com/xuguofeng/jq-ui
演示项目 http://5ijy01.duapp.com/jq-ui/index.html
使用jQuery开发dialog对话框插件的更多相关文章
- jQuery 开发一个简易插件
jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', f ...
- 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- [转]jquery开发自定义的插件总结
本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...
- JQuery开发工具和插件
最近的研究jquery.为大家介绍几款开发工具.能够帮助你提高开发的效率. 1.Dreamweaver Dreamweaver是建立在WEB站点和应用程序的专业工具. 将可视化工具.应用程序开发功能和 ...
- 基于jQuery开发的手风琴插件 jquery.accordion.js
1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码: /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...
- jquery开发自定义的插件总结
1.第一种方式,有元素的插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 使用jQuery开发accordion手风琴插件
一.插件效果 手风琴插件常用的功能均已实现,包括:手风琴菜单项的折叠展开效果.选中指定菜单项.判断菜单项是否选中等. 效果如下: 二.插件内部HTML元素结构 <!-- accordioon组件 ...
- 分享15款为jQuery Mobile定制的插件
jQuery Mobile 1.0 已经发布了, 做为jQuery的移动设备类库, 并且依靠着jQuery这个及其受欢迎的类库,必将带给大家不一样的使用体验,基于jQuery Mobile的插件开发必 ...
随机推荐
- 梯形法求解常微分方程(c++)
#include<iostream> #include<iomanip> using namespace std; int main() { double x,y,yn,h,t ...
- rust字符串的slice
fn main() { let s = String::from("hello dj"); //字符串字面值实际就是字符串的切片,所以 let ss ="hello dj ...
- 【Beta】软件使用说明——致社长
目录 社团公众号关联上"北航社团帮"小程序 为什么要关联上"北航社团帮"小程序: 如何进行关联: 小程序中的社长相关功能 如何认证成为社长 如何管理社员.增删管 ...
- bat批处理 取得当前路径 %CD%
在DOS的批处理中,有时候需要知道当前的路径.在DOS中,有两个环境变量可以跟当前路径有关,一个是%cd%, 一个是%~dp0. 这两个变量的用法和代表的内容一般是不同的. 1. %cd% 可以用在批 ...
- [转]Json字符串和map和HashMap之间的转换
需要导入alibaba.fastJsonmaven中的依赖为 <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --> ...
- PostgreSQL中的partition-wise aggregation
partition-wise aggregation允许对每个分区分别执行的分区表进行分组或聚合.如果GROUP BY子句不包括分区键,则只能在每个分区的基础上执行部分聚合,并且必须稍后执行最终处理. ...
- pg执行计划分析小笔记
开发同事问,为什么一个标量子查询,放在where子句后进行大小判断,比不放在where子句后进行判断大小运行的更快?按道理加了一次判断,不是应该变慢么? 把语句拿过来,看了一下两个语句的执行计划: 语 ...
- Oracle系列七 子查询
子查询语法 SELECT select_list FROM table WHERE expr operator (SELECT select_list FROM table); 子查询 (内查询) 在 ...
- (转)tomcat 安全配置文档
原文:https://www.cnblogs.com/heaven-xi/p/9961354.html 1.配置文档中使用$CATALINA_HOME变量声明为tomcat的安装目录并明确写出了tom ...
- svg的viewport和viewbox
svg中视区重要的概念 1. viewport 视口,相当于显示器屏幕 2. viewbox 视区,相当于在屏幕上截取一小块,放大到整个屏幕,就是特写的效果 3. preserveAspectR ...