jQuery UI库中dialog对话框功能使用全解析

前端之家收集整理的这篇文章主要介绍了jQuery UI库中dialog对话框功能使用全解析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

对话框(dialog),是jQuery UI 非常重要的一个功能。它彻底的代替了JavaScript 的alert()、prompt()等方法,也避免了新窗口或页面的繁杂冗余。

一.开启多个dialog

只要设置不同的id 即可实现。

二.修改dialog 样式

在弹出的dialog 对话框中,在火狐浏览器中打开Firebug 或者右击->查看 元素。可以看看dialog 的样式,对dialog 的标题背景进行修改

修改ui 里的CSS,直接用style.css 替代掉 .ui-widget-header {

background:url(../img/xxx.png);

}

三.dialog()方法属性

对话框方法有两种形式:1.dialog(options),options 是以对象键值对的形式 传参,每个键值对表示一个选项;2.dialog('action',param),action 是操作对 话框方法的字符串,param则是options 的某个选项。 dialog 外观选项属性 标题,可以直接设置在DOM 元素上 添加按钮。键是按钮
名称,值是用户点击后调用的回调函数
title : '注册',buttons : {

'按钮' : function () {}

}

);

dialog 页面位置选项属性
position : 'left top'

});

dialog 大小选项属性
height : 500,width : 500,minWidth : 300,minHeight : 300,maxWidth : 800,maxHeight : 600

});

dialog 视觉选项属性 显示对话框时,默认采用淡入效果。 关闭对话框时,默认采用淡出效果
show : true,hide : true

});

注意:设置true 后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字符串参数。

show 和hide 可选特效名称 显示或消失 显示或消失,垂直运动 显示或消失 显示或消失 显示或消失,有透明度变化 显示或消失 显示或消失,伴随着透明度和背景色的变化 显示时“收缩”,消失时“生长” 显示时“生长”,消失时“收缩” 显示或消失
show : 'blind',hide : 'blind'

});

dialog 行为选项属性 调用dialog()方法时就会打开对话框;
关闭按钮的title 文字
autoOpen : false,draggable : false,resizable : false,modal : true,closeText : '关闭'

});

四.dialog()方法的事件

除了属性设置外,dialog()方法也提供了大量的事件。这些事件可以给各种不同状态 时提供回调函数。这些回调函数中的this 值等于对话框内容的div 对象,不是整个对话框 的div。
dialog 事件选项显示以及每次在上面点击)会
调用focus 方法,该方法有两个参数(event,ui)。此事件中
调用create 方法,该方法有两个参
显示时(首次显示调用dialog('open')方法
调用open 方法,该方法有两个参数(event,ui)。此事件
关闭时( 当单击关闭按钮或调用
方法),会调用beforeclose 方法。如果该函
关闭。关闭的对话框可以
方法有两个参数(event,ui)。
关闭时( 当单击关闭按钮或调用
方法),会调用close 方法关闭的对话框可
方法有两个参数(event,
调用drag 方法。该
方法有两个参数。该方法有两个参数(event,ui)。此事件
属性对象:
属性:top 和
属性:top 和left。
调用dragStart 方法。该方法
属性对象:
属性:top 和
属性:top 和left。
调用dragStop 方法。该方法
属性对象:
属性:top 和
属性:top 和left。
调用resize
方法。该方法有两个参数(event,ui)。此事件中的ui 有四
属性对象:
属性:width 和
属性:top 和left。
属性:
调用resizeStart 方法。该方法
属性对象:
属性:width 和
属性:top 和left。
属性:
调用resizeStart 方法。该方法
属性对象:
属性:width 和
属性:top 和left。
属性:
focus : function (e,ui) {

alert('获得焦点');

}

});

//当创建对话框时
$('#reg').dialog({

create : function (e,ui) {

alert('创建对话框');

}

});

//当将要关闭
$('#reg').dialog({

beforeClose : function (e,ui) {

alert('关闭前做的事!');

return flag;

}

});

//关闭对话框时
$('#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); 

}

});

dialog('action',param)方法方法 关闭对话框 删除对话框,直接阻断了dialog 获取对话框的jQuery 对象 获取options 属性的值 属性的值
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 选项的值
var title = $('#reg').dialog('option','title');

alert(title);

//设置某个options 的param 选项的值
$('#reg').dialog('option','title','注册');

五.dialog 中使用on()

在dialog 的事件中,提供了使用on()方法处理的事件方法
on()方法触发的对话框事件名称 logopen 显示时触发 关闭时触发 关闭时触发
alert('关闭');

});

原文链接:https://www.f2er.com/jquery/49195.html

猜你在找的jQuery相关文章