20151215jquery学习笔记--jqueryUI --dialog(对话框)
对话框(dialog),是 jQuery UI 非常重要的一个功能。它彻底的代替了 JavaScript 的 alert()、prompt()等方法,也避免了新窗口或页面的繁杂冗余
一.开启多个 dialog 我们可以同时打开多个 dialog,只要设置不同的 id 即可实现。
$('#reg').dialog();
$('#login').dialog();
二.修改 dialog 样式
在弹出的 dialog 对话框中,在火狐浏览器中打开 Firebug 或者右击->查看元素。这样, 我们可以看看 dialog 的样式,根据样式进行修改。我们为了和网站主题符合,对 dialog 的标 题背景进行修改。
//无须修改 ui 里的 CSS,直接用 style.css 替代掉
.ui-widget-header{
background:url(../img/ui_header_bg.png);
}
注意:其他修改方案类似。
三.dialog()方法的属性
对话框方法有两种形式:
1.dialog(options),options 是以对象键值对的形式传参,每个 键值对表示一个选项;
2.dialog('action',param),action 是操作对话框方法的字符串,param 则是 options 的某个选项。
$('#reg').dialog({
title:'注册知问',
buttons:{
'按钮': function(){
}
}
});
$('#reg').dialog({
position:'lefttop'
});
$('#reg').dialog({
height: 500,
width:500,
minWidth:300,
minHeight :300,
maxWidth: 800,
maxHeight: 600
});
$('#reg').dialog({
show:true,
hide:true
});
注意:设置 true 后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字 符串参数
$('#reg').dialog({
show:'blind',
hide:'blind'
});
$('#reg').dialog({
autoOpen:false,
draggable:false,
resizable: false,
modal: true,
closeText:'关闭'
});
四.dialog()方法的事件
除了属性设置外,dialog()方法也提供了大量的事件。这些事件可以给各种不同状态时 提供回调函数。这些回调函数中的this值等于对话框内容的div对象,不是整个对话框的div。
//当对话框获得焦点后
$('#reg').dialog({
focus:function(e,ui) {
alert('获得焦点');
}
}); //当创建对话框时
$('#reg').dialog({
create: function(e,ui){
alert('创建对话框');
}
});
//当将要关闭时
$('#reg').dialog({
beforeClose:function(e,ui){
alert('关闭前做的事!');
returnflag;
}
});
//关闭对话框时
$('#reg').dialog({
close:function(e,ui){
alert('关闭!');
}
});
//对话框移动时
$('#reg').dialog({
drag:function(e,ui){
alert('top:'+ui.position.top+ '\n' +'left:'+ ui.position.left);
}
});
//对话框开始移动时
$('#reg').dialog({
dragStart: function(e,ui){
alert('top:'+ui.position.top+ '\n' +'left:'+ ui.position.left);
}
});
//对话框结束移动时
$('#reg').dialog({
dragStop: function(e,ui){
alert('top:'+ui.position.top+ '\n' +'left:'+ ui.position.left);
}
});
//调整对话框大小时
$('#reg').dialog({
resize:function(e,ui){
alert('size:'+ui.size.width+ '\n'
+'originalSize:' +ui.originalSize.width);
}
});
//开始调整对话框大小时
$('#reg').dialog({
resizeStart :function(e,ui){
alert('size:'+ui.size.width+ '\n' +'originalSize:' +ui.originalSize.width);
}
});
//结束调整对话框大小时
$('#reg').dialog({
resizeStop:function(e,ui) {
alert('size:'+ui.size.width+ '\n' +'originalSize:' +ui.originalSize.width);
}
});
//初始隐藏对话框
$('#reg').dialog({
autoOpen:false
});
//打开对话框
$('#reg_a').click(function(){
$('#reg').dialog('open');
});
//关闭对话框
$('#reg').click(function(){
$('#reg').dialog('close');
});
//判断对话框打开或关闭状态
$(document).click(function() {
alert($('#reg').dialog('isOpen'));
});
//将指定对话框置前
$(document).click(function() {
$('#reg').dialog('moveToTop');
});
//获取某个 options 的 param 选项的值
vartitle=$('#reg').dialog('option', 'title');
alert(title);
//设置某个 options 的 param 选项的值
$('#reg').dialog('option','title', '注册知问');
五.dialog 中使用 on()
在 dialog 的事件中,提供了使用 on()方法处理的事件方法。
$('#reg').on('dialogclose',function(){
alert('关闭');
});
20151215jquery学习笔记--jqueryUI --dialog(对话框)的更多相关文章
- easyui学习笔记1-(datagrid+dialog)
jQuery EasyUI是一组基于jQuery的UI插件集合体.我的理解:jquery是js的插件,easyui是基于jquery的插件.用easyui可以很轻松的打造出功能丰富并且美观的UI界面. ...
- HTML 学习笔记 JQueryUI(Interactions,Widgets)
Draggable 允许使用鼠标移动元素(拖动) demo <html> <head> <meta charset="UTF-8" ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件
习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...
- 孙鑫MFC学习笔记8:对话框编程(下)
1.在按钮上没有字体设置,但是在对话框上有字体设置 2.让按钮进行消息响应 *1.创建按钮 *2.创建从按钮继承的类 *3.关联对象 3.属性页编程 *1.在对话框资源中新建属性页 *2.为属性页创建 ...
- 孙鑫MFC学习笔记7:对话框编程(上)
1.DoModal创建模态对话框 2.Create创建非模态对话框(需要用ShowWindow显示出来) 模态:对话框显示,程序会暂停,直到对话框关闭 非模态:对话框显示,程序继续执行 3.对于模态对 ...
- jQuery学习笔记——弹出对话框
引用jQuery库文件的<script>标签,必须放在引用自定义脚本文件的<script>标签之前.否则,在编写的代码中将不能引用到jQuery框架 <script ty ...
- 【C#学习笔记】打开对话框并返回打开文件所在路径
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- VC学习笔记:对话框
VC学习笔记:对话框 SkySeraph NOV.11st 2009 HQU Email-zgzhaobo@gmail.com QQ-452728574 Latest Modified Date:O ...
- 【转】 Pro Android学习笔记(四五):Dialog(2):DialogFragment
[-] 重写onCreateView 通过onCreateView设置UI和按键反馈 信息保存 重写onCreateDialog DialogFragment的实例newInstance()已经在上一 ...
随机推荐
- 分割函数和根据Id串返回名字
需求:函数传入一个字符串参数 例如 123-456 将这个字符串123-456拆成两个值 123 456,在通过两个值分别查出数据(例如 张三 李四),拼接成 张三-李四 --声明变量 ...
- [King.yue]EXT.NET TextFieldFor添加正则表达式
EXT.NET TextFieldFor添加正则表达式以及提示用法 例:Html.Y().TextFieldFor().Regex("此处添加正则表达式") .InvalidTex ...
- 解决:javah 无法访问引用Android对象的问题
无法访问android.view.View 是没有引入android.jar包 javah的参数中 有一个-bootclasspath参数 让他指向android.jar包 例如 javah -jni ...
- Farewell, 2015, welcome 2016
Farewell, 2015, welcome 2016. ##事出必有因 从2014年10月份开始, 在投资的路上越走越远. 盲目的行为, 付出了惨重的代价. 投资无所谓对错, 但投资失败带来 ...
- 【HTML】Beginner7:Image
1.Image The web is not just about text,it is a multi-media extravaganza and the most common form ...
- Centos添加硬盘分区、挂载磁盘
默认一个硬盘,新增硬盘识别为sdb.sdbc一次类推 1.查看磁盘信息 >fdisk -l #新磁盘为/dev/sdb,截图是已经分区完成了. 2.进入分区界面 >fdisk /dev/s ...
- JavaScript Garden
Objects Object Usage and Properties Everything in JavaScript acts like an object, with the only two ...
- linux下查询域名或IP注册信息的操作记录(whois)
在运维工作中,有时需要查询某些域名的注册信息(域名的NS,注册用户,注册邮箱等),可以使用whois这个命令.whois命令令用来查找并显示指定帐号(或域名)的用户相关信息,因为它是到Network ...
- 模拟等待事件row lock waits
是索引块分裂引起的锁等待,往往与enq: TX - index contention 伴随产生,enq:TX - index contention的解释. Waits for TX in mode 4 ...
- Visual C++中的编译器优化
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Visual C++中的编译器优化.