jquery ui(三)弹出窗口 dialog

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

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

1、代码如下

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="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>
<div id="dialog" title="Basic dialog">
    <p>
     这是一个弹出窗口---from ifxoxo.com
    </p>
</div>

2、效果截图

jquery-ui-dialog截图 –ifxoxo.com

本文已经同步至我的个人博客站点:
jquery ui(三)弹出窗口 dialog ( http://ifxoxo.com/jquery-ui-dialog.html )

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

1、需要加载的js和css

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

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

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

2、页面上的html

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

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

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

      <div id = "dialog_div" >  </div>

3、触发窗口弹出的js

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

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

【参数】

 参数  默认值  作用
 autoOpen  true

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

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

 buttons  {}  显示一个按钮,并写上按钮的文本,设置按钮点击函数
 closeOnEscpe  true  是否点击键盘ESC键关闭dialog
 dialogClass  null  为窗口加上的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

 modal  false  是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口
 title  null  dialog的标题文字
 position  center

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

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

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

 zIndex  1000  dialog的zindex值
 stack  true  是否在dialog获得焦点是,dialog将在最上面
 bgiframe  false  在IE6下,让后面那个灰屏盖住select(需要调用jquery.bgiframe.js)
 disabled  false  当为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"  ) ;
           return  false ;
           } ) ;
     } ) ;
      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"  ) ;
          return  false ;
          } ) ;
     } ) ;

三、其他jquery ui 文章

本文已经同步至我的个人博客站点:
jquery ui(三)弹出窗口 dialog ( http://ifxoxo.com/jquery-ui-dialog.html )

如果想查看其它jquery ui的文章,可以点击以下链接到个人博客查看

1、jquery ui(一)简介 ( http://ifxoxo.com/jquery-ui-1.html )
2、jquery ui(二)拖拽 draggable和droppable ( http://ifxoxo.com/jquery-ui-draggable.html )
3、jquery ui(三)弹出窗口 dialog ( http://ifxoxo.com/jquery-ui-dialog.html )
4、jquery ui(四)进度条 progressbar ( http://ifxoxo.com/jquery-ui-prodressbar.html )
5、jquery ui(五)日期选择器 datepicker ( http://ifxoxo.com/jquery-ui-datepicker.html )
6、jquery ui(六)拖动排序 sortable ( http://ifxoxo.com/jquery-ui-sortable.html )

你可能感兴趣的:(javascript)