jquery-ui 对话框_jQuery UI对话框插件
jquery-ui 对话框
We will discuss about the jQuery UI Dialog plugin in this post. The jQuery UI Dialog plugin is used for displaying information, which contains a dialog title and a content area. We can move, resize or close the dialog window.
在本文中，我们将讨论有关jQuery UI Dialog插件的信息。 jQuery UI对话框插件用于显示信息，其中包含对话框标题和内容区域。 我们可以移动，调整大小或关闭对话框窗口。
The jQuery UI provides different options, methods and events to customize the Dialog plugin. We will see these techniques in the following sections.
jQuery UI提供了不同的选项，方法和事件来定制Dialog插件。 我们将在以下各节中看到这些技术。
内容 (Contents)
- Dialog Plugin Options对话框插件选项
- Dialog Plugin Methods对话框插件方法
- Dialog Plugin Events对话框插件事件
- Dialog Plugin in Action对话框插件的作用
对话框插件选项 (Dialog Plugin Options)
In this section, we will discuss about different options available to customize the jQueryUI Dialog plugin. We have used many of these options in the Dialog Plugin in Action section.
在本节中，我们将讨论可用于自定义jQueryUI对话框插件的不同选项。 我们在“操作中的对话框插件”部分中使用了许多这些选项。
| Options | Syntax | Drscription |
|---|---|---|
| appendTo | $( “.selector” ).dialog({ appendTo: “#someElem” }); | This option is used to append an element to the dialog. |
| autoOpen | $( “.selector” ).dialog({ autoOpen: false }); | Setting this to true makes the dialog box open on initialization. |
| buttons | $( “.selector” ).dialog({ buttons: [ { text: “Ok”, click: function() { $( this ).dialog( “close” ); } } ] }); | This option is used to specify the button displayed on the dialog box. |
| closeOnEscape | $( “.selector” ).dialog({ closeOnEscape: false }); | If it is set to true, the dialog box will close on pressing the escape key. |
| closeText | $( “.selector” ).dialog({ closeText: “hide” }); | Text displayed for the close button |
| dialogClass | $( “.selector” ).dialog({ dialogClass: “alert” }); | Used for additional theming of the dialog box. |
| draggable | $( “.selector” ).dialog({ draggable: false }); | The dialog will be draggable by the title bar if it is set to true. |
| height | $( “.selector” ).dialog({ height: 400 }); | Specifies the height of the dialog box. |
| hide | $( “.selector” ).dialog({ hide: { effect: “explode”, duration: 1000 } }); | This option is used to animate the dialog box. |
| maxHeight | $( “.selector” ).dialog({ maxHeight: 600 }); | Specifies the maximum height to which the dialog box can be resized. |
| maxWidth | $( “.selector” ).dialog({ maxWidth: 600 }); | Specifies the maximum width to which the dialog box can be resized. |
| minHeight | $( “.selector” ).dialog({ minHeight: 200 }); | Specifies the minimum height to which the dialog box can be resized. |
| minWidth | $( “.selector” ).dialog({ minWidth: 200 }); | Specifies the minimum width to which the dialog box can be resized. |
| modal | $( “.selector” ).dialog({ modal: true }); | Setting to true gives a modal behaviour. |
| position | $( “.selector” ).dialog({ position: { my: “left top”, at: “left bottom”, of: button } }); | Specifies the position of the dialog box. |
| resizable | $( “.selector” ).dialog({ resizable: false }); | Set to true makes the dialog box resizable. |
| show | $( “.selector” ).dialog({ show: { effect: “blind”, duration: 800 } }); | Used to animate the dialog box. |
| title | $( “.selector” ).dialog({ title: “Dialog Title” }); | Specifies the title of the dialog. |
| width | $( “.selector” ).dialog({ width: 500 }); | Specifies the width of the dialog. |
| 选件 | 句法 | 说明 |
|---|---|---|
| appendTo | $（“ .selector”）.dialog（{appendTo：“ #someElem”}）; | 此选项用于将元素附加到对话框。 |
| 自动打开 | $（“ .selector”）.dialog（{autoOpen：false}）; | 将此设置为true将使对话框在初始化时打开。 |
| 纽扣 | $（“ .selector”）.dialog（{按钮：[{文本：“确定”，单击：function（）{$（this）.dialog（“ close”）;}}]}））; | 此选项用于指定对话框上显示的按钮。 |
| closeOnEscape | $（“ .selector”）.dialog（{closeOnEscape：false}）; | 如果将其设置为true，则按退出键将关闭对话框。 |
| closeText | $（“ .selector”）.dialog（{closeText：“ hide”}）; | 显示关闭按钮的文字 |
| dialogClass | $（“ .selector”）.dialog（{dialogClass：“ alert”}）; | 用于对话框的其他主题。 |
| 可拖动的 | $（“ .selector”）。dialog（{draggable：false}）; | 如果对话框设置为true，则可以通过标题栏拖动该对话框。 |
| 高度 | $（“ .selector”）.dialog（{height：400}）; | 指定对话框的高度。 |
| 隐藏 | $（“ .selector”）.dialog（{隐藏：{效果：“爆炸”，持续时间：1000}}）; | 此选项用于设置对话框动画。 |
| 最大高度 | $（“ .selector”）.dialog（{maxHeight：600}）; | 指定对话框可以调整大小的最大高度。 |
| maxWidth | $（“ .selector”）.dialog（{maxWidth：600}）; | 指定对话框可以调整大小的最大宽度。 |
| minHeight | $（“ .selector”）.dialog（{minHeight：200}）; | 指定对话框可以调整大小的最小高度。 |
| minWidth | $（“ .selector”）.dialog（{minWidth：200}）; | 指定对话框可以调整大小的最小宽度。 |
| 情态的 | $（“ .selector”）.dialog（{modal：true}）; | 设置为true会给出模态行为。 |
| 位置 | $（“ .selector”）.dialog（{位置：{我：“左上”，在：“左下”，来自：按钮}}）; | 指定对话框的位置。 |
| 可调整大小 | $（“ .selector”）.dialog（{resizable：false}）; | 设置为true将使对话框可调整大小。 |
| 表演 | $（“ .selector”）.dialog（{show：{effect：“ blind”，duration：800}}）; | 用于制作对话框动画。 |
| 标题 | $（“ .selector”）.dialog（{title：“对话框标题”}）; | 指定对话框的标题。 |
| 宽度 | $（“ .selector”）.dialog（{width：500}）; | 指定对话框的宽度。 |
The above table briefly describes the options used to customize the Dialog plugin.
上表简要描述了用于自定义Dialog插件的选项。
对话框插件方法 (Dialog Plugin Methods)
In this section, we will look into the jQueryUI Dialog plugin methods and its usage. These methods are very useful when you deal with the Dialog plugin.
在本节中，我们将研究jQueryUI Dialog插件方法及其用法。 当您处理Dialog插件时，这些方法非常有用。
| Methods | Usage | Description |
|---|---|---|
| close | $( “.selector” ).dialog( “close” ); | Used to close the dialog. |
| destroy() | $( “.selector” ).dialog( “destroy” ); | Used to remove the functionality completely. |
| instance() | $( “.selector” ).dialog( “instance” ); | Used to get the dialog’s instance object. |
| isOpen() | $( “.selector” ).dialog( “isOpen” ); | Check if the dialog is open. |
| moveToTop() | $( “.selector” ).dialog( “moveToTop” ); | This method is used to move the dialog box to the top. |
| open() | $( “.selector” ).dialog( “open” ); | This method is used to open the dialog. |
| option( optionName, value ) | $( “.selector” ).dialog( “option”, “disabled”, true ); | Used to the set the value of the dialog option associated with the optionName. |
| widget() | $( “.selector” ).dialog( “widget” ); | This method will return a jQuery object of the dialog. |
| 方法 | 用法 | 描述 |
|---|---|---|
| 关 | $（“ .selector”）.dialog（“ close”）; | 用于关闭对话框。 |
| 破坏（） | $（“ .selector”）.dialog（“ destroy”）; | 用于完全删除功能。 |
| instance（） | $（“ .selector”）.dialog（“ instance”）; | 用于获取对话框的实例对象。 |
| 开了（） | $（“ .selector”）。dialog（“ isOpen”）; | 检查对话框是否打开。 |
| moveToTop（） | $（“ .selector”）.dialog（“ moveToTop”）; | 此方法用于将对话框移到顶部。 |
| 打开（） | $（“ .selector”）.dialog（“ open”）; | 此方法用于打开对话框。 |
| option（optionName，value） | $（“ .selector”）.dialog（“ option”，“ disabled”，true）; | 用于设置与optionName关联的对话框选项的值。 |
| 小部件（） | $（“ .selector”）.dialog（“ widget”）; | 此方法将返回对话框的jQuery对象。 |
The above table briefly describes the methods used to customize the Dialog plugin.
上表简要介绍了用于自定义Dialog插件的方法。
对话框插件事件 (Dialog Plugin Events)
In this section, we will discuss about different events associated with jQueryUI Dialog plugin and its usage.
在本节中，我们将讨论与jQueryUI Dialog插件相关的不同事件及其用法。
| Events | Usage | Description |
|---|---|---|
| beforeClose( event, ui ) | $( “.selector” ).dialog({,beforeClose: function( event, ui ) {}}); | This event is fire when the dialog is about to close. |
| close( event, ui ) | $( “.selector” ).dialog({,close: function( event, ui ) {}}); | Fired when the dialog is closed. |
| create( event, ui ) | $( “.selector” ).dialog({,create: function( event, ui ) {}}); | This event is fired when the dialog is created. |
| drag( event, ui ) | $( “.selector” ).dialog({,drag: function( event, ui ) {}}); | Fired when the dialog is being dragged |
| dragStart( event, ui ) | $( “.selector” ).dialog({,dragStart: function( event, ui ) {}}); | Fired when the user starts dragging the dialog. |
| dragStop( event, ui ) | $( “.selector” ).dialog({,dragStop: function( event, ui ) {}}); | Fired when the dragging is stopped. |
| focus( event, ui ) | $( “.selector” ).dialog({,focus: function( event, ui ) {}}); | Fired when the dialog is focused. |
| open( event, ui ) | $( “.selector” ).dialog({,open: function( event, ui ) {}}); | Fired when the dialog box is opened. |
| resize( event, ui ) | $( “.selector” ).dialog({,resize: function( event, ui ) {}}); | Fired when the user resize the dialog. |
| resizeStart( event, ui ) | $( “.selector” ).dialog({,resizeStart: function( event, ui ) {}}); | Fired when the user starts resizing the dialog. |
| resizeStop( event, ui ) | $( “.selector” ).dialog({,resizeStop: function( event, ui ) {}}); | Fired when the user stops resizing the dialog window. |
| 大事记 | 用法 | 描述 |
|---|---|---|
| beforeClose（event，ui） | $（“ .selector”）.dialog（{，beforeClose：function（event，ui）{}}）; | 对话框即将关闭时，将触发此事件。 |
| close（event，ui） | $（“ .selector”）.dialog（{，close：function（event，ui）{}}）; | 对话框关闭时触发。 |
| create（event，ui） | $（“ .selector”）.dialog（{，create：function（event，ui）{}}）; | 创建对话框时会触发此事件。 |
| 拖动（事件，用户界面） | $（“ .selector”）.dialog（{，drag：function（event，ui）{}}）; | 拖动对话框时触发 |
| dragStart（event，ui） | $（“ .selector”）.dialog（{，dragStart：function（event，ui）{}}）; | 当用户开始拖动对话框时触发。 |
| dragStop（event，ui） | $（“ .selector”）。dialog（{，dragStop：function（event，ui）{}}）; | 拖动停止时触发。 |
| 焦点（事件，用户界面） | $（“ .selector”）.dialog（{，focus：function（event，ui）{}}）; | 对话框聚焦时触发。 |
| 打开（事件，用户界面） | $（“ .selector”）.dialog（{，open：function（event，ui）{}}）; | 对话框打开时触发。 |
| 调整大小（事件，UI） | $（“ .selector”）.dialog（{，resize：function（event，ui）{}}）; | 用户调整对话框大小时触发。 |
| resizeStart（event，ui） | $（“ .selector”）.dialog（{，resizeStart：function（event，ui）{}}）; | 当用户开始调整对话框大小时触发。 |
| resizeStop（event，ui） | $（“ .selector”）.dialog（{，resizeStop：function（event，ui）{}}）; | 当用户停止调整对话框窗口大小时触发。 |
The above table briefly describes the events associated with the Dialog plugin.
上表简要描述了与Dialog插件关联的事件。
对话框插件的作用 (Dialog Plugin in Action)
In this section, we will try different examples to explore the uses of jQueryUI Dialog plugin. You will get a basic idea about the dialog plugin customization with available options, methods and events.
在本节中，我们将尝试不同的示例来探索jQueryUI Dialog插件的用法。 您将获得有关对话框插件自定义的基本思想，以及可用的选项，方法和事件。
默认功能 (Default Functionality)
The following example demonstrates the default functionality of jQuery UI Dialog plugin
以下示例演示了jQuery UI 对话框插件的默认功能
dialog-default.html
dialog-default.html
<!doctype html>
<html>
<head><title>jQuery UI Dialog - Default Functionality</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#dialog" ).dialog({autoOpen: false, });$( "#openbtn" ).click(function() {$( "#dialog" ).dialog( "open" );});});</script></head><body> <div style="font-size: 12px" id="dialog" title="Dialog Demo"> <p>Demonstrates the use of autoOpen option and open() method in the jQueryUI dialog plugin.</p></div><button id="openbtn">Open Dialog</button></body>
</html>You will see the following output on the browser.
您将在浏览器中看到以下输出。
演示地址
使用autoOpen选项和open（） (Use of autoOpen option and open())
The following example demonstrates the use of autOpen option and open() method in jQuery UI Dialog plugin. In this example, we set the autOpen option to false. The dialog box opens only when you click on the button.
以下示例演示了jQuery UI对话框插件中autOpen选项和open()方法的用法。 在此示例中，我们将autOpen选项设置为false。 仅当您单击按钮时，对话框才会打开。
dialog-open.html
dialog-open.html
<!doctype html>
<html>
<head><title>jQuery UI Dialog</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script><script>$(function() {$( "#dialog" ).dialog({autoOpen: false, });$( "#openbtn" ).click(function() {$( "#dialog" ).dialog( "open" );});});</script></head><body> <div style="font-size: 12px" id="dialog" title="Dialog Demo"> <p>Demonstrates the use of autoOpen option and open() method in the jQueryUI dialog plugin.</p></div><button id="openbtn">Open Dialog</button></body>
</html>You will see a dialog box with title “Dialog Demo”, when you click on the button.
当您单击按钮时，将看到一个标题为“对话框演示”的对话框。
演示地址
使用“隐藏和显示”选项为对话框设置动画 (Use of hide and show option to animate the Dialog box)
The following example demonstrates how to animate the dialog box with show and hide options.
下面的示例演示如何使用show和hide选项为对话框设置动画。
dialog-animate.html
dialog-animate.html
<!doctype html>
<html>
<head><title>jQuery UI Dialog</title><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css"><script src="https://code.jquery.com/jquery-2.1.1.js"></script><script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <script>$(function() {$( "#dialog" ).dialog({autoOpen: false,show: {effect: "slideDown",duration: 500},hide: {effect: "explode",duration: 500}});$( "#openbtn" ).click(function() {$( "#dialog" ).dialog( "open" );});});
</script>
</head>
<body><div style="font-size: 12px;"id="dialog" title="Animate Dialog Demo"><p>This example demonstrates the animation of dialog box using hide and show options. The dialog box can be moved, resized or closed. </p>
</div><button id="openbtn">Open Dialog</button>
</body>
</html>You will see the following output on the browser.
您将在浏览器中看到以下输出。
演示地址
That’s all for now and you will see more jQuery plugins in the coming posts.
到此为止，您将在接下来的文章中看到更多的jQuery插件。
翻译自: https://www.journaldev.com/5832/jquery-ui-dialog-plugin
jquery-ui 对话框
jquery-ui 对话框_jQuery UI对话框插件相关推荐
- 技术派-在工作线程与UI线程中创建对话框
目录 UI线程创建方式 头文件模板 实现代码模板 工作线程的创建方式 工作线程的线程模板 对话框头文件模板 对话框实现部分 我们在工作中,经常需要在新线程里面创建对话框,要么是在工作线程里面创建对话框 ...
- jquery ui放大缩小_jQuery UI可调整大小 – 操作方向
不确定您是否希望限制特定轴的调整大小操作,或者想知道实际调整大小的方向. 如果你想要前任,Rayell的答案可以工作.我会讨论后者. 如果你设置了这样的可调整大小: var r = $("# ...
- UI学习笔记---EasyUI panel插件使用---03
UI学习笔记---EasyUI panel插件使用---03 UI学习笔记---EasyUI panel插件使用---03 1.panel简单小例子 ------------------- 2.可以自 ...
- jquery ui和easy ui联合使用
本文以jquery ui中的自动完成(autocomplete)插件, easy ui中的(tree)树形菜单插件,(grid)网格插件的综合运用为例来展示插件的魅力. 开发环境:struts2.3 ...
- jQuery Mobile 和 Kendo UI 的比较（转）
jQuery Mobile 和 Kendo UI 的比较 转自 https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp ...
- jQuery UI vs Kendo UI jQuery Mobile vs Kendo UI Mobile
jQuery UI vs Kendo UI http://jqueryuivskendoui.com/#introduction jQuery Mobile vs Kendo UI Mobile ht ...
- jQuery的UI框架 Liger UI
jQuery的UI框架 Liger UI http://www.oschina.net/p/ligerui
- 【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框
文章目录 JQuery Mobile基础 1. 页面与对话框 1.1 简单的helloworld 1.2 利用JQuery脚本DIY闪光灯效果 1.3 不断切换的场景 1.4 整人游戏 1.5 手机被 ...
- UI组件Kendo UI for jQuery数据管理入门指南 - TaskBoard/卡片
Kendo UI TaskBoard将任务.笔记.项目或其他类型的项目显示为按列(通道)中特定标准分组的卡片,卡片可以重新排序.放到另一列.编辑或删除. Kendo UI for jQuery最新官方 ...
最新文章
- “懒惰”Linux 管理员的 10 个关键技巧
- NSIndexPath类
- 80%的人都不知道的排版利器，博士生都在用它！
- SAP Fiori extension hook added via note
- 模拟网页行为之实践四
- (原創) 如何使用Operator Overloading? (C/C++)
- springcloud工作笔记096---springboot集成多线程_高并发_集成线程池的使用
- 【译】WebSocket协议第五章——数据帧(Data Framing)
- elasticsearch查询QueryBuilders详解（es7.80）
- red-hat Linux6-5的安装
- mapinfo在线地图插件_利用开源软件下载地图和影像瓦片数据（修订版）
- java自学一般要学多久？学会了有什么作用？
- app源码 php,PHP大型B2B2C商城源码带APP源码
- 发现一个大牛Scott Lowe博客
- SpringBoot 整合ActiveMQ
- 专升本管理学知识点总结——管理环境与创新
- 聚合支付服务商“利楚扫呗”完成5000万元A轮融资 富友集团领投
- SDI科普--- SD-SDI/HD-SDI/3G-SDI/12G-SDI
- 后端开发规范(持续更新中...)
- mPEG2000-PHOS，磷酸盐修饰的单功能线性PEG，mPEG2000-Phosphate