jQuery UI库使用记录----dialog以及以下effects效果

jQuery的UI库中的dialog效果很不错，在这里记录一下简单的一些使用方式以及一些配置的参数意义：

简单的使用可以在jQuery UI的官方demo中看到，具体的使用方式如下：

在html文件中添加一个<div id='mydiv'></div>

在js文件中调用：$('#mydiv').dialog()即可，这样就可以创建一个最基本的dialog，在.dialog()方法中可以添加一些配置参数，如下

autoOpen：是否立即显示对话框，默认为true

modal：在开启该dialog时是否屏蔽html，默认为false

closeOnEscape：按ESC键能否关闭对话框，默认为true

draggable：可否拉动对话框，默认为true

resizeable：是否可以在右下角调整对话框大小，默认为true

title：对话框的标题头

position：使用[right,top]或者一些默认值如'center','left','rigt','top','bottom'来确定对话框出现的位置,默认为center,数组中的数值的单位为像素,也可以使用如position:["left","bottom"]使得对话框出现在左上角

width：对话框的宽度

height：对话框的高度

minWidth：resizeable为true时可用，调整对话框大小时的最小宽度

maxWidth：resizeable为true时可用，调整对话框大小时的最大宽度

minHeight：resizeable为true时可用，调整对话框大小时的最小高度

maxHeight：resizeable为true时可用，调整对话框大小时的最大高度

hide：对话框隐藏时的动画效果，参数为jQuery UI Effect中支持hide和show的样式

show：对话框出现时的动画效果，参数为jQuery UI Effect中支持hide和show的样式

stack：对话框是否能叠在其他对话框之上，默认为true

zIndex：对话框的显示优先级，一个整型，大的在上面，默认1000

buttons：里面定义了出现的按钮，一个map，属性名为按钮显示的文字，属性值为一个函数

dialog实例：

            $("#mydiv").dialog({

autoOpen:false,

modal:true,

closeOnEscape:true,

draggable:false,

resizable:true,

title:'this is a dialog',

position:'center',

width:500,

height:500,

minWidth:300,

minHeight:300,

maxWidth:700,

maxHeight:700,

hide:'drop',

show:'explode',

buttons: {

'close':function(){

$(this).dialog('close');

},

'other':function(){

$(this).dialog('close');

}

}

});

$('#dialogBtn').toggle(function() {

$('#mydiv').dialog('open');

}, function() {

$('#mydiv').dialog('close');

});

jQuery UI Effects：

            'blind'     从上到下出现、从下到上收起

  'bounce'     上下晃动元素

  'clip'        从中间向上下出现、从上下向中间消失

  'drop'       从左边向右边逐渐出现并不断降低透明度、从右边向左边不断消失并不断提高透明度

  'explode'    分成9个格子向中间集合、分成9个格子向四周发散

  'fold'       先向右，再向下出现、先向上，再向左消失

  'highlight'   高亮某个元素  

  'puff'       从大到小逐渐清晰直到出现、从小到大直到模糊消失

  'pulsate'     闪烁元素  

  'scale'      从中间向四周伸展开、从四周向中间收拢

  'shake'       左右晃动元素  

  'size'       与scale类似

  'slide'      从左向右滑出、从右向左滑动至消失