不得不愛開源 Wijmo jQuery 插件集（5）-【對話框】(附頁面展示和源碼)

本文轉載自查看原文 2012-09-25 09:00 4682 Studio for ASP.NET Wijmo/ Wijmo

園子中的朋友大家好。在上一篇文章中我們，給大家介紹了 Wijmo Accordion 手風琴插件的特性及使用方法。感謝園子中朋友的支持，朋友們的支持給我們寫這一系列文章提供了很大的動力。在這篇文章中我們將介紹 Dialog 的特性及使用方法。 Dialog 即為 jQuery 中的彈出對話框。

有些朋友第一次看到本系列文章，所以給出本系列文章的鏈接：

首先讓我們看看 Wijmo Dialog 給我們帶來了哪些驚喜？

使用ComponentOne為ASP.NET Wijmo出品的Dialog™控件可以創建功能強大的、互動的、可定制的對話框窗口。這種特殊類型的對話窗口可以在客戶端創建，或者在服務器端顯示信息，並接收來自用戶的輸入。

建立你的第一個 Wijmo jQuery Accordion(感興趣的朋友可以下載【資源分享中的 Demo】):

HTML 標簽：
<div>

<input type="button" value="Hide Dialog" onclick="$('#dialog').wijdialog('close')" />

<input type="button" value="Show Dialog" onclick="$('#dialog').wijdialog('open')" />

<div id="dialog" title="Basic dialog">

</div>

</div>

 

jQuery 腳本：
<script id="scriptInit" type="text/javascript">

$(document).ready(function () {

$('#dialog').wijdialog({

autoOpen: false,

captionButtons: {

refresh: { visible: false}

}

});

});

</script>

效果預覽：

特性

模式化的和無模式的對話框窗口

ASP.NET Wijmo的對話框控件可以提供兩種不同類型的對話框窗口：模式化的對話框窗口和無模式的對話框窗口。一個模式化的對話框窗口是一個子窗口，在用戶可以在當前的應用程序上繼續工作之前，它必須關閉。一個無模式的對話框窗口，可以使用戶在對話框窗口存在時與其他窗口進行交互的對話。

局部頁面呈現

當用戶用局部頁面呈現（PPR）技術執行操作時，它可以提高應用程序的性能，並提供更直接的反饋。

對接

這是當窗口最小化時該對話框可停靠的區域。

樣式

ASP.NET Wijmo的對話框控件可以為它的標題欄和內容元素提供獨特的屬性樣式.

微調

C1Dialog控件包括一個可以在加載內容時顯示的微調元素。你可以使用樣式來自定義該圖像。

模板支持

模板可以被添加到對話窗口的內容區域。為實現豐富的對話框窗口的演示，動態模板可以在對話窗口的內容區域中使用。

動畫

它可以使用任何內置的動畫效果來自定義對話框與互動。對如何顯示和隱藏對話框窗口與如何展開和折疊對話框窗口進行更改。在默認情況下，對話框窗口中不使用任何動畫效果。

主題

只需點擊一下智能標簽，就可以通過從六個溢價主題（北極，午夜時分，雅集，火箭，鈷和英鎊）中選擇一個來改變組合框的外觀。另外，還可以使用jQuery UI中的ThemeRoller來創建一個自定義的主題！

CSS支持

你可以使用這一種級聯樣式表（CSS）的樣式來定義自定義皮膚。有了CSS支持，你可以使該窗口與你的組織標准相匹配。

感謝大家閱讀本文章，在下一篇文章中我們將介紹 Wijmo jQuery Calendar-日歷插件 的使用方法。

最后，和大家分享一些 Wijmo 資源：

1.源碼下載（包含以上特性）:Wijmo-Dialog.zip

2.更多信息請參考：Wijmo 中文網站：http://www.gcpowertools.com.cn/products/c1_asp_overview.htm

3.開源Wijmo jQuery 討論社區： http://gcdn.grapecity.com/index.aspx

wimdialog API 介紹：(點擊隱藏 API)

Options

autoOpen

當 autoOpen 屬性設置為 true，dialog 在調用時會自動打開。如果設置為 false ，那么則需要使用 .dialog("open") 方法使其打開。

Type: Boolean

Default: true

Code Example: $( "selector" ).wijdialog({autoOpen: false });

buttons

定制在對話中顯示哪些 button。屬性名稱為 button text 值。value 為點擊 button 時調用的函數。在 callback 函數中，可以使用 event 對象來操作觸發事件的 button。

Type: Object,

Default: {}

Code Example: $( "selector" ).wijdialog({button: {ok: function (){…}});

buttons

定制在對話中顯示哪些 button。數組中的每個元素必須為定義 button 的對象。

Type: Array,

Default: []

Code Example:

$( "selector" ).wijdialog({button: [{text:”ok”, click: function (){…}}]);

captionButtons

設置 wijdialog 工具條中顯示的按鈕。

Type: Object

Default:

{

pin: {visible: true, click: self.pin, iconClassOn: 'ui-icon-pin-w', iconClassOff:'ui-icon-pin-s'},

refresh: {visible: true, click: self.refresh, iconClassOn: 'ui-icon-refresh'},

toggle: {visible: true, click: self.toggle, iconClassOn: 'ui-icon-carat-1-n', iconClassOff:'ui-icon-carat-1-s'},

minimize: {visible: true, click: self.minimize, iconClassOn: 'ui-icon-minus'},

maximize: {visible: true, click: self.maximize, iconClassOn: 'ui-icon-extlink'},

close: {visible: true, click: self.close, iconClassOn: 'ui-icon-close'}

};

每個按鈕代表 wijdialog object 中的按鈕對象。

property name: The name of the button.

visible: 設置按鈕是否可見

click: 在按鈕被點擊時觸發。

iconClassOn: 正常狀態下的 Icon。

iconClassOff: 點擊后的 Icon。

Code Example:

$("selector").wijdialog({captionButtons: {

pin: { visible: false },

refresh: { visible: false },

toggle: { visible: false },

minimize: { visible: false },

maximize: { visible: false }

}

});

closeOnEscape

設置當 wijdialog 獲得焦點時，用戶點擊 ESC 鍵，wijdialog 是否關閉。

Type: Boolean,

Default: true

Code Example:

$("selector").wijdialog({closeOnEscape: false});

closeText

設置 close 按鈕的文本。注意 close 在內置 theme 下是不可見的。

Type: String

Default: "close"

Code Example:

$("selector").wijdialog({closeText: "close"});

contentUrl

設置 wijdialog 中的 iframe 元素的 URL。

Type: String

Default:

Code Example:

$("selector").wijdialog({contentUrl: 'http://www.google.com'});

dialogClass

設置 wijdialog 的 CSS 樣式。

Type: String,

Default: ""

Code Example:

$("selector").wijdialog({dialogClass: "alert"});

disabled

disables 或 enables wijdialog。在初始化 wijdialog 時調用。

Type: Boolean

Default: false

Code Example:

$("selector").wijdialog({disabled: true});

draggable

如果被設置為 true，wijdialog 可以通過 titlebar 拖拽。

Type: Boolean

Default: true

Code Example:

$("selector").wijdialog({draggable: false});

expandingAnimation

設置 wijdialog 展開時的動畫效果。

Type: Object

Default: null

Code Example:

$("selector").wijdialog({expandingAnimation:

{ effect: "puff", duration: 300, easing: "easeOutExpo" }

});

height

設置 wijdialog 的高度（單位為像素）。設置為 'auto' wijdialog 將自適應內容大小。

Type: Number

Default: auto

Code Example:

$("selector").wijdialog({height: 600});

hide

設置 wijdialog 被隱藏時的效果。

Type: String

Default: "slide"

Code Example:

$("selector").wijdialog({hide: "slide"});

maxHeight

設置 wijdialog 的最大高度。

Type: Number

Default: false

Code Example:

$("selector").wijdialog({maxHeight: 400});

maxWidth

設置 wijdialog 的最大寬度。

Type: Number

Default: false

Code Example:

$("selector").wijdialog({maxWidth: 300});

minHeight

設置 wijdialog 的最小高度。

Type: Number

Default: 150

Code Example:

$("selector").wijdialog({minHeight: 400});

minimizeZoneElementId

設置 wijdialog 最小化時 dock 目標 DOM 元素。

Type: String

Default:

Code Example:

$("selector").wijdialog({minimizeZoneElementId: "zoomId"});

minWidth

設置 wijdialog 的最小寬度。

Type: Number

Default: 150

Code Example:

$("selector").wijdialog({minWidth: 400});

modal

設置為 true ，wijdialog 顯示時，頁面中其他的元素將不可用。wijdialog 將在其下側創建覆蓋層（陰影效果）。

Type: Boolean

Default: false

Code Example:

$("selector").wijdialog({modal: true});

position

設置 wijdialog 的顯示位置。

預設值: 'center', 'left', 'right', 'top', 'bottom'.
通過坐標設置(e.g. [350,100])
通過字符串數組設置(e.g. ['right','top'] for the top right corner).

Type: String, Array

Default: "center"

Code Example:

$("selector").wijdialog({position: "top"});

resizable

設置 wijdialog 是否可以調整大小。

Type: Boolean

Default: true

Code Example:

$("selector").wijdialog({resizable: false});

show

設置 wijdialog 顯示時的動畫效果。

Type: String

Default: "slide"

Code Example:

$("selector").wijdialog({show: "fade"});

stack

設置當前 wijdialog 是否在多個 wijdialog 的頂部。

Type: Boolean

Default: false

Code Example:

$("selector").wijdialog({stack: false});

title

設置 wijdialog 的標題。

Type: String

Default: ""

Code Example:

$("selector").wijdialog({title: "Dialog Title"});

width

設置 wijdialog 的寬度。

Type: Number

Default: 300

Code Example:

$("selector").wijdialog({width: 300});

zIndex

設置 wijdialog 的 z-index。

Type: Number

Default: 1000

Code Example:

$("selector").wijdialog({zIndex: 2000});

Events

beforeClose

在 wijdialog 關閉之前觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

Code Example:

//Supply a function as an option:

$(".selector").wijdialog({ close: function (e) { } });

//Bind to the event by type: wijdialogclose:

$(".selector").bind("wijdialogclose", function(e) { } );

blur

在 wijdialog 失去焦點時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

data.el: The DOM element of this dialog.

Code Example:

$( ".selector" ).wijdialog({ blur: function (e, data) { } });

//Bind to the event by type: wijdialogblur:

$(".selector").bind("wijdialogblur", function(e, data) { } );

buttonCreating

在創建工具條中按鈕時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

data: Buttons array that will be created.

Code Example:

$( "selector" ).wijdialog({ buttonCreating: function (e, data) { } });

//Bind to the event by type: wijdialogbuttoncreating:

$(".selector").bind("wijdialogbuttoncreating", function(e, data) { } );

close

在 wijdialog 關閉時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

Code Example:

$( ".selector" ).wijdialog({ close: function (e) { } });

//Bind to the event by type: wijdialogclose:

$(".selector").bind("wijdialogclose", function(e) { } );

create

在 wijdialog 創建時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

Code Example:

$( ".selector" ).wijdialog({ create: function (e) { } });

//Bind to the event by type: wijdialogcreate:

$(".selector").bind("wijdialogcreate", function(e) { } );

drag

在拖拽 wijdialog 時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

data: related data

data,position: The position of wijdialog {top, left}.

data,offset: The offset of wijdialog {top, left}.

Code Example:

//Supply a function as an option:

$(".selector").wijdialog({drag: function (e, data) { } });

//Bind to the event by type: wijdialogdrag:

$(".selector").bind("wijdialogdrag", function(e, data) { } );

dragStart

在拖拽 wijdialog 開始時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

data: related data

data,position: The position of wijdialog {top, left}.

data,offset: The offset of wijdialog {top, left}.

Code Example:

//Supply a function as an option:

$(".selector").wijdialog({dragStart: function (e, data) { } });

//Bind to the event by type: wijdialogdragstart:

$(".selector").bind("wijdialogdragstart", function(e, data) { } );

dragStop

在拖拽 wijdialog 結束時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

data: related data

data,position: The position of wijdialog {top, left}.

data,offset: The offset of wijdialog {top, left}.

Code Example:

//Supply a function as an option:

$(".selector").wijdialog({dragStop: function (e, data) { } });

//Bind to the event by type: wijdialogdragstop:

$(".selector").bind("wijdialogdragstop", function(e, data) { } );

focus

當調整 wijdialog 獲取焦點時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

Code Example:

//Supply a function as an option:

$(".selector").wijdialog({ focus: function (e) { } });

//Bind to the event by type: wijdialogfocus:

$(".selector").bind("wijdialogfocus", function(e) { } );

open

在調整 wijdialog 被打開時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

Code Example:

//Supply a function as an option:

$(".selector").wijdialog({ open: function (e) { } });

//Bind to the event by type: wijdialogopen:

$(".selector").bind("wijdialogopen", function(e) { } );

resize

在調整 wijdialog 大小時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

data: related data

data,originalPosition: the original position of wijdialog {top, left}.

data,originalSize: the original size of wijdialog {width, height}

data,position: the position of wijdialog {top, left}.

data,size: the size of wijdialog {width, height}

Code Example:

//Supply a function as an option:

$(".selector").wijdialog({ resize: function (e, data) { } });

//Bind to the event by type: wijdialogresize:

$(".selector").bind("wijdialogresize", function(e, data) { } );

resizeStart

在調整 wijdialog 大小開始時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

data: related data

data,originalPosition: the original position of wijdialog {top, left}.

data,originalSize: the original size of wijdialog {width, height}

data,position: the position of wijdialog {top, left}.

data,size: the size of wijdialog {width, height}

Code Example:

//Supply a function as an option:

$(".selector").wijdialog({ resizeStart: function (e, data) { } });

//Bind to the event by type: wijdialogresizestart:

$(".selector").bind("wijdialogresizestart", function(e, data) { } );

resizeStop

在調整 wijdialog 大小結束時觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

data: related data

data,originalPosition: the original position of wijdialog {top, left}.

data,originalSize: the original size of wijdialog {width, height}

data,position: the position of wijdialog {top, left}.

data,size: the size of wijdialog {width, height}

Code Example:

//Supply a function as an option:

$(".selector").wijdialog({ resizeStop: function (e, data) { } });

//Bind to the event by type: wijdialogresizestop:

$(".selector").bind("wijdialogresizestop", function(e, data) { } );

stateChanged

wijdialog 在("minimized", "maximized", "normal") 三種狀態轉換時，事件被觸發。

Type: Function

Default: null

Parameters:

e: jQuery.Event object.

data.originalState: The original state of the dialog box.

data.state: The current state of the dialog box.

Code Example:

//Supply a function as an option:

$(".selector").wijdialog({ stateChanged: function (e, data) { } });

//Bind to the event by type: wijdialogstatechanged:

$(".selector").bind("wijdialogstatechanged", function(e, data) { } );

Methods

close()

關閉 dialog.。

Code Example:

$(" selector ").wijdialog ("close");

destroy()

移除 wijdialog 設置的所有函數。這將使 wijdialog 返回到初始化狀態。

Code Example:

$(" selector ").wijdialog ( "destroy" );

disable()

Disable wijdialog。

Code Example:

$(" selector ").wijdialog ( "disable" );

enable()

enable wijdialog。

Code Example:

$(" selector ").wijdialog ( "enable " );

getState

獲取 dialog 狀態。返回值為："minimized", "maximized", and "normal".

Code Example:

$('selector').wijdialog("getState");

isOpen()

最大化 wijdialog。

Code Example:

$(" selector ").wijdialog ("isOpen");

maximize

Maximizes the wijdialog instance.

Code Example:

$('selector').wijdialog("maximize");

minimize

最小化 wijdialog。

Code Example:

$('selector').wijdialog("minimize");

moveToTop()

Move the dialog to the top of the dialogs stack.

Code Example:

$(" selector ").wijdialog ("moveToTop ");

open()

打開對話框。

Code Example:

$(" selector ").wijdialog ("open");

option()

獲取或設置 wijdialog 屬性。如果沒有定制項，則返回默認值。

Code Example:

$(" selector ").wijdialog ("option" , optionName , [value]);

option()

通過 option 對象設置 wijdialog 多個屬性。

Code Example:

$(" selector ").wijdialog ("option" , options);

鎖定 wijdialog ，使其不可移動。

Code Example:

$('selector').wijdialog("pin");

refresh

刷新 wijdialog 中 iframe 節點內容。

Code Example:

$('selector').wijdialog("refresh");

reset

重置("width" ,"height", "position") 屬性到默認值。

Code Example:

$('selector').wijdialog("reset");

restore

把最小化和最大化狀態下的 wijdialog 還原到正常大小。

Code Example:

$('selector').wijdialog("restore");

toggle

展開或折疊 wijdialog。

Code Example:

$('selector').wijdialog("toggle");

widget()

放回 .wijmo-wijdialog 節點。

Code Example:

$(" selector ").wijdialog ("widget");

免責聲明！

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

猜您在找 不得不愛開源 Wijmo jQuery 插件集（3）-【菜單】(附頁面展示和源碼) 不得不愛開源 Wijmo jQuery 插件集（4）-【手風琴效果】(附頁面展示和源碼) 不得不愛開源 Wijmo jQuery 插件集（7）-【進度條】(附頁面展示和源碼) 不得不愛開源 Wijmo jQuery 插件集（9）-【日歷】(附頁面展示和源碼) 不得不愛開源 Wijmo jQuery 插件集（15）-【HTML5-視頻播放器】(附頁面展示和源碼) 不得不愛開源 Wijmo jQuery 插件集（1）-【開篇】(附演示和源碼) 不得不愛開源 Wijmo jQuery 插件集（2）-【准備工作】(附30種Theme演示和源碼) Reveal Jquery 模式對話框插件 jQuery插件實例一：年華時代插件Alert對話框 jQuery Dialog彈出層對話框插件