jQuery UI dialog 參數說明[轉發]

本文轉載自查看原文 2013-04-12 22:02 11634 小知識集錦

初始化參數

對於 dialog 來說，首先需要進行初始化，在調用 dialog 函數的時候，如果沒有傳遞參數，或者傳遞了一個對象，那么就表示在初始化一個對話框。

沒有參數，表示按照默認的設置初始化對話框，在當前最新版本的 jQuery UI 1.8.9 中， dialog 支持下列屬性。

autoOpen 初始化之后，是否立即顯示對話框，默認為 true

modal 是否模式對話框，默認為 false

closeOnEscape 當用戶按 Esc 鍵之后，是否應該關閉對話框，默認為 true

draggable 是否允許拖動，默認為 true

resizable 是否可以調整對話框的大小，默認為 true

title 對話框的標題，可以是 html 串，例如一個超級鏈接。

position 用來設置對話框的位置，有三種設置方法

1. 一個字符串，允許的值為 'center', 'left', 'right', 'top', 'bottom'. 此屬性的默認值即為 'center'，表示對話框居中。 2. 一個數組，包含兩個以像素為單位的位置，例如，

var dialogOpts = { position: [ 100 , 100 ] };

3. 一個字符串組成的數組，例如， ['right','top']，表示對話框將會位於窗口的右上角。

var dialogOpts = { position: [ " left " , " bottom " ] };

一組關於尺寸的屬性，以像素為單位。

width 寬度, 默認 300

height 高度，默認 'auto'

minWidth 最小寬度，默認 150

minHeight 最小高度，默認 150

maxWidth 最大寬度

maxHeight 最大高度

還有關於關閉的效果

hide 當對話框關閉時的效果，默認為 null, 例如， hide: 'slide'

show 當對話框打開時的效果。默認為 null

堆疊

stack 對話框是否疊在其他對話框之上。默認為 true

zIndex 對話框的 z-index 值，一個整數，越大越在上面。默認 1000

按鈕

buttons 一個對象，屬性名將會被作為按鈕的提示文字，屬性值為一個函數，即按鈕的處理函數。

var dialogOpts = { buttons: { " Ok " : function () { } , " Cancel " : function () {} } } $( " #myDialog " ).dialog(dialogOpts);

IE6 的 select 元素穿透問題

bgiframe 解決 IE6 的 select 元素穿透問題，通過增加一個 iframe 來解決。默認為 true

這一功能需要使用腳本 jquery.bgiframe-2.1.2，腳本在 jQuery UI 壓縮包中 development-bundle/external 文件夾中，需要將這個文件加入到頁面中。

< script src = " ../jquery-1.4.4.js " >< / script> < script src = " ../external/jquery.bgiframe-2.1.2.js " >< / script> < script src = " ../ui/jquery.ui.core.js " >< / script>

這個控件現在有一個bug,在彈出窗口有遮罩層的情況下，在chrome下，如果出現縱向滾動條，無法用鼠標拖動，只能使用滾輪。

上邊的說明來自王洋

設置前

設置后

示例

$( " #dialog " ).dialog({ bgiframe: true , resizable: false , height: 140 , modal: true , overlay: { backgroundColor: ' #000 ' , opacity: 0.5 }, buttons: { ' Delete all items in recycle bin ' : function () { $( this ).dialog( ' close ' ); }, Cancel: function () { $( this ).dialog( ' close ' ); } } });

效果如下。

對話框的方法

初始化之后，就可以使用對話框了，比如說打開對話框，關閉對話框，這需要通過對話框的方法來完成。

對話框的方法需要通過調用 dialog 函數，並傳遞字符串形式的方法來完成。例如，dialog( "open" ) 表示調用對話框的 open 方法。

open 打開對話框，需要注意的是，並沒有 open() 方法，而是通過 dialog( "open" ) 來調用。例如， .dialog( "open" )

close 關閉對話框

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

destroy 摧毀一個對話框，去除對話框功能，將元素還原為初始化之前的狀態。

isOpen 檢查對話框的狀態，如果已經打開，返回 true.

moveToTop 將對話框移到對話框的頂端

option 設置或者讀取對話框某個屬性的值，有兩種用法。

如果第二個參數為字符串，如果提供了三個參數，表示設置，如果兩個參數，表示讀取。例如 .dialog( "option" , optionName , [value] )

如果第二個參數為對象，表示一次性設置多個屬性。

enable 啟用對話框

disable 禁用對話框

對話框的事件

在對話框使用過程中，還將觸發多種事件，我們可以自定義事件處理函數進行響應。

create

open

focus

dragStart

drag

dragStop

resizeStart

resize

resizeStop

beforeClose

例如，下面的設置了 open，close，beforeClose 的事件處理，顯示窗口的狀態。

效果如下

對話框使用常見問題

常見的問題就是多次初始化一個對話框。

對話框僅僅需要初始化一次，多次初始化會有問題。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>無標題頁</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">  
    function test()
    {
        alert("調用");
    }  
    $(function(){
             $('#dialog').dialog({
     autoOpen: true,//如果設置為true，則默認頁面加載完畢后，就自動彈出對話框；相反則處理hidden狀態。 
     bgiframe: true, //解決ie6中遮罩層蓋不住select的問題  
     width: 600,
     modal:true,//這個就是遮罩效果   
     buttons: {
      "Ok": function() { 
          test();//在這里調用函數
       $(this).dialog("close"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     }
    });
    
             $('#btn').click(function(){
     $('#dialog').dialog('open');
     return false;
    });
       });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="demo">
            <div>
                <input type="button" id="btn" value="點我啊" />
                <div>
                    <div id="dialog" title="嘿嘿" style="">
                        <p>
                            你個廢物</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

概述
一個浮動的窗口，包含標題和內容兩部分。可以移動，調整大小，以及關閉圖標'×'。
如果內容長度超過了對話框內容區域的顯示，則會自動出現滾動條。
除此之外，還有一些常用的選項，如：添加底部按鈕欄、模式窗口屏蔽層等。
官方示例地址：http://jqueryui.com/demos/dialog/

·參數（名稱 : 參數類型 : 默認值）
autoOpen : Boolean : true
如果設置為true，則默認頁面加載完畢后，就自動彈出對話框；相反則處理hidden狀態。
初始：$('.selector').dialog({ autoOpen: false });
獲取：var autoOpen = $('.selector').dialog('option', 'autoOpen');
設置：$('.selector').dialog('option', 'autoOpen', false);

bgiframe : Boolean : false
如果設置為true，則調用bgiframe插件，用於修復在IE6瀏覽器中無法顯示於其它控件（select,flash）之上的問題。
初始：$('.selector').dialog({ bgiframe: true });
獲取：var bgiframe = $('.selector').dialog('option', 'bgiframe');
設置：$('.selector').dialog('option', 'bgiframe', true);

buttons : Object : { }
為對話框添加相應的按鈕及處理函數。
初始：$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
獲取：var buttons = $('.selector').dialog('option', 'buttons');
設置：$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });

closeOnEscape : Boolean : true
設置當對話框打開的時候，用戶按ESC鍵是否關閉對話框。
初始：$('.selector').dialog({ closeOnEscape: false });
獲取：var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
設置：$('.selector').dialog('option', 'closeOnEscape', false);

dialogClass : String : ''
設置指定的類名稱，它將顯示於對話框的標題處。
初始：$('.selector').dialog({ dialogClass: 'alert' });
獲取：var dialogClass = $('.selector').dialog('option', 'dialogClass');
設置：$('.selector').dialog('option', 'dialogClass', 'alert');

draggable : Boolean : true
如果設置為true，則允許拖動對話框的標題欄移動窗口。
初始：$('.selector').dialog({ draggable: false });
獲取：var draggable = $('.selector').dialog('option', 'draggable');
設置：$('.selector').dialog('option', 'draggable', false);

height : Number : 'auto'
設置對話框的高度（單位：像素）。
初始：$('.selector').dialog({ height: 530 });
獲取：var height = $('.selector').dialog('option', 'height');
設置：$('.selector').dialog('option', 'height', 530);

hide : String : null
使對話框關閉（隱藏），可添加動畫效果。
初始：$('.selector').dialog({ hide: 'slide' });
獲取：var hide = $('.selector').dialog('option', 'hide');
設置：$('.selector').dialog('option', 'hide', 'slide');

maxHeight : Number : false
設置對話框的最大高度（單位：像素）。
初始：$('.selector').dialog({ maxHeight: 400 });
獲取：var maxHeight = $('.selector').dialog('option', 'maxHeight');
設置：$('.selector').dialog('option', 'maxHeight', 400);

maxWidth : Number : false
設置對話框的最大寬度（單位：像素）。
初始：$('.selector').dialog({ maxWidth: 600 });
獲取：var maxWidth = $('.selector').dialog('option', 'maxWidth');
設置：$('.selector').dialog('option', 'maxWidth', 600);

minHeight : Number : 150
設置對話框的最小高度（單位：像素）。
初始：$('.selector').dialog({ minHeight: 300 });
獲取：var minHeight = $('.selector').dialog('option', 'minHeight');
設置：$('.selector').dialog('option', 'minHeight', 300);

minWidth : Number : 150
設置對話框的最小寬度（單位：像素）。
初始：$('.selector').dialog({ minWidth: 400 });
獲取：var minWidth = $('.selector').dialog('option', 'minWidth');
設置：$('.selector').dialog('option', 'minWidth', 400);

modal : Boolean : false
是否為模式窗口。如果設置為true，則在頁面所有元素之前有個屏蔽層。
初始：$('.selector').dialog({ modal: true });
獲取：var modal = $('.selector').dialog('option', 'modal');
設置：$('.selector').dialog('option', 'modal', true);

position : String, Array : 'center'
設置對話框的初始顯示位置。可選值: 'center', 'left', 'right', 'top', 'bottom', 或是一個數組['right','top']
初始：$('.selector').dialog({ position: 'top' });
獲取：var position = $('.selector').dialog('option', 'position');
設置：$('.selector').dialog('option', 'position', 'top');

resizable : Boolean : true
設置對話框是否可以調整大小。
初始：$('.selector').dialog({ resizable: false });
獲取：var resizable = $('.selector').dialog('option', 'resizable');
設置：$('.selector').dialog('option', 'resizable', false);

show : String : null
用於顯示對話框。
初始：$('.selector').dialog({ show: 'slide' });
獲取：var show = $('.selector').dialog('option', 'show');
設置：$('.selector').dialog('option', 'show', 'slide');

stack : Boolean : true
設置移動時對話框是否前置於其它的對話框前面。
初始：$('.selector').dialog({ stack: false });
獲取：var stack = $('.selector').dialog('option', 'stack');
設置：$('.selector').dialog('option', 'stack', false);

title : String : ''
指定對話框的標題，也可以在對話框附加元素的title屬性中設置標題。
初始：$('.selector').dialog({ title: 'Dialog Title' });
獲取：var title = $('.selector').dialog('option', 'title');
設置：$('.selector').dialog('option', 'title', 'Dialog Title');

width : Number : 300
設置對話框的寬度（單位：像素）。
$('.selector').dialog({ width: 460 });
獲取：var width = $('.selector').dialog('option', 'width');
設置：$('.selector').dialog('option', 'width', 460);

zIndex : Integer : 1000
設置對話框的zindex值。
初始：$('.selector').dialog({ zIndex: 3999 });
獲取：var zIndex = $('.selector').dialog('option', 'zIndex');
設置：$('.selector').dialog('option', 'zIndex', 3999);


·事件
beforeclose : dialogbeforeclose
當對話框關閉之前，觸發此事件。如果返回false，則對話框仍然顯示。
初始：$('.selector').dialog({ beforeclose: function(event, ui) { ... } });
綁定：$('.selector').bind('dialogbeforeclose', function(event, ui) { ... });

open : dialogopen
當對話框打開后，觸發此事件。
初始：$('.selector').dialog({ open: function(event, ui) { ... } });
綁定：$('.selector').bind('dialogopen', function(event, ui) { ... });

focus : dialogfocus
當對話框獲取焦點時，觸發此事件。
初始：$('.selector').dialog({ focus: function(event, ui) { ... } });
綁定：$('.selector').bind('dialogfocus', function(event, ui) { ... });

dragStart : dragStart
當開始拖拽對話框移動時，觸發此事件。
初始：$('.selector').dialog({ dragStart: function(event, ui) { ... } });
綁定：$('.selector').bind('dragStart', function(event, ui) { ... });

drag : drag
當拖拽對話框移動時，觸發此事件。
初始：$('.selector').dialog({ drag: function(event, ui) { ... } });
綁定：$('.selector').bind('drag', function(event, ui) { ... });

dragStop : dragStop
當拖拽對話框動作結束時，觸發此事件。
初始：$('.selector').dialog({ dragStop: function(event, ui) { ... } });
綁定：$('.selector').bind('dragStop', function(event, ui) { ... });

resizeStart : resizeStart
當開始改變對話框大小時，觸發此事件。
初始：$('.selector').dialog({ resizeStart: function(event, ui) { ... } });
綁定：$('.selector').bind('resizeStart', function(event, ui) { ... });

resize : resize
當對話框大小改變時，觸發此事件。
初始：$('.selector').dialog({ resize: function(event, ui) { ... } });
綁定：$('.selector').bind('resize', function(event, ui) { ... });

resizeStop : resizeStop
當對話框大小改變結束時，觸發此事件。
初始：$('.selector').dialog({ resizeStop: function(event, ui) { ... } });
綁定：$('.selector').bind('resizeStop', function(event, ui) { ... });

close : dialogclose
當對話框關閉后，觸發此事件。
初始：$('.selector').dialog({ close: function(event, ui) { ... } });
綁定：$('.selector').bind('dialogclose', function(event, ui) { ... });


·屬性
destroy
銷毀對話框對象。
用法：.dialog( 'destroy' )

disable
禁用對話框。
用法：.dialog( 'disable' )

enable
啟用對話框。
用法：.dialog( 'enable' )

option
獲取或設置對話框的屬性。
用法：.dialog( 'option' , optionName , [value] )

close
關閉對話框。
用法：.dialog( 'close' )

isOpen
用於判斷對話框是否處理打開狀態。
用法：.dialog( 'isOpen' )

moveToTop
將對話框移至最頂層顯示。
用法：.dialog( 'moveToTop' )

open
打開對話框。
用法：.dialog( 'open' )

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JQuery UI dialog 彈窗實例及參數說明 Jquery插件flexigrid的參數說明 jquery旋轉插件rotate參數說明 jquery 的3D Carousel插件參數說明 JQuery批量上傳插件Uploadify使用詳解及參數說明 jquery datetimepicker 日期時間控件的使用及參數說明 jQuery Jcrop API參數說明(中文版) HSSFClientAnchor 參數說明 Netty——參數說明 JVM——參數說明