为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 jquery ui弹出窗口 dialog

jquery ui弹出窗口 dialog

2018.09.26 21:15 6013浏览

jquery ui 提供了强大的dialog功能,基本能满足开发的功能。

一、先上一个简单的例子:

1、代码如下

<scriptsrc="http://code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<linkrel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script>
  $(function() {
      $( "#dialog" ).dialog({
         buttons: { "Ok": function() { $(this).dialog("close"); } }  
       });
  });
</script>
<divid="dialog"title="Basic dialog">
<p>
    这是一个弹出窗口---from ifxoxo.com
</p>
</div>

二、具体用法还是简单的,总结如下:

1、需要加载的js和css

请记住jquery 一定要在jquery-ui之前加载,加载错的会导致意想不到的结果。

(1)jquery
(2)jquery-ui
(3)jquery-ui的css

<scriptsrc="http://code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<linkrel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

2、页面上的html

页面上需要一个装dialog的容器,需要一个固定ID,控制弹出窗口的内容,而html有两种方式:
(1)事先写在页面上(比如一个table,form)

<divid="dialog_div"title="弹出窗口的标题">
<from action=''> .......</from>
     这里是窗口里面显示的内容 --ifxoxo.com
</div>

(2)不同情况的加载内容,可以定义一个空标签,待js加载 (或者ajax加载)

<divid="dialog_div" ></div>

3、触发窗口弹出的js

主要函数如下:$(“dialog_div”).dialog();

dialog函数有一个强大的参数库,如下

【参数】

参数默认值作用
autoOpentrue

是否自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口,

直到.dialog(“open”)的时候才弹出dialog窗口

buttons{}显示一个按钮,并写上按钮的文本,设置按钮点击函数
closeOnEscpetrue是否点击键盘ESC键关闭dialog
dialogClassnull为窗口加上的class属性

diaggable

resizable

true是否能拖动、缩放 (必须加载相应的js)

width

height

auto窗口的长宽

maxWidth

maxHeight

null

长宽的最大值

minWidth

minHeight

150

长宽的最小值

hide

show

null

当dialog关闭和打开时候的效果。(必须加载相应的jquery.effects.xx.js)

效果有:blind,bounce,clip,drop,explode,fade,fold,


highlight,pulsate,puff,slide,scale,size,shake,transfer

modalfalse是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口
titlenulldialog的标题文字
positioncenter

dialog的显示位置:可以是’center’, ‘left’, ‘right’,
‘top’, ‘bottom’,


也可以是top和left的偏移量,



也可以是一个字符串数组例如['right','top']。

zIndex1000dialog的zindex值
stacktrue是否在dialog获得焦点是,dialog将在最上面
bgiframefalse在IE6下,让后面那个灰屏盖住select(需要调用jquery.bgiframe.js)
disabledfalse当为true是,关掉这个dialog

示例代码如下:

<script>

    $(function(){
      $("#dialog").dialog({
         autoOpen:false,
         show:"blind",
         hide:"explode"

         buttons:{
"Ok":function(){
                   $(this).dialog("close");
},
"Cancel":function(){
                   $(this).dialog("close");
}
}
});

     $("#opener").click(function(){
         $("#dialog").dialog("open");
returnfalse;
});
});
</script>



<div id="dialog" title="Basic dialog">
<p>这是弹框的内容---ifxoxo.com</p>
</div>

<button id="opener">Open Dialog</button>

4、其他

1、事件

(1) beforeclose 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止

(2) close 关闭dialog的时候此事件将被触发

(3) open 打开dialog的时候此事件将被触发

(4) focus 获得焦点的时候此事件将被触发

(5) dragStart 开始拖动dialog的时候此事件将被触发

(6) drag 拖动dialog过程此事件将被触发

(7) resizeStart 开始缩放dialog的时候此事件将被触发

(8) resize 缩放dialog过程的时候此事件将被触发

(9) resizeStop 缩放结束的时候此事件将被触发

$('.selector').dialog({
       beforeclose:function(event, ui){ ... }
});

2、方法

(1)destroy 摧毁 例:.dialog( ‘destroy’ )
(2)disable dialog不可用,例:.dialog(‘disable’);
(3)enable dialog可用,

(4)close,open 关闭、打开dialog
(5)option 设置和获取dialog属性,

例如:.dialog( ‘option’ , optionName , [value] ) ,如果没有value,将是获取。
(6)isOpen 如果dialog打开则返回true,例如:.dialog(‘isOpen’)
(7)moveToTop 将dialog移到最上层,例如:.dialog( ‘moveToTop’ )。

//点击 opener时,窗口打开
 $("#opener").click(function(){
        $("#dialog").dialog("open");
returnfalse;
});
});

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Python工程师
手记
粉丝
62
获赞与收藏
530

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消