不得不爱开源 Wijmo jQuery 插件集（5）-【对话框】(附页面展示和源码)

园子中的朋友大家好。在上一篇文章中我们，给大家介绍了 Wijmo Accordion 手风琴插件的特性及使用方法。感谢园子中朋友的支持，朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Dialog 的特性及使用方法。 Dialog 即为 jQuery 中的弹出对话框。

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

• 不得不爱开源 Wijmo jQuery 插件集（1）-【开篇】(附演示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（2）-【准备工作】(附30种Theme演示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（3）-【Menu】(附页面展示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)

首先让我们看看 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);

pin

锁定 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");