博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EasyUI Dialog 对话框
阅读量:6821 次
发布时间:2019-06-26

本文共 2552 字,大约阅读时间需要 8 分钟。

转自:http://www.jeasyui.net/plugins/181.html

扩展自 $.fn.window.defaults。通过 $.fn.dialog.defaults 重写默认的 defaults。

对话框(dialog)是一个特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏。默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具。用户可以配置对话框行为来显示其他工具(比如:可折叠 collapsible、可最小化 minimizable、可最大化 maximizable,等等)。

依赖

  • window
  • linkbutton

用法

通过标记从已有的 DOM 节点创建对话框(dialog)。下面的实例演示了一个带有可调整尺寸特性的模态对话框。

  1. <div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
  2. data-options="iconCls:'icon-save',resizable:true,modal:true">
  3. Dialog Content.
  4. </div>

使用 javascript 创建对话框(dialog)。现在让我们创建一个模态对话框,然后调用 'refresh' 方法来通过 ajax 加载它的内容。

  1. <div id="dd">Dialog Content.</div>
  1. $('#dd').dialog({
  2. title: 'My Dialog',
  3. width: 400,
  4. height: 200,
  5. closed: false,
  6. cache: false,
  7. href: 'get_content.php',
  8. modal: true
  9. });
  10. $('#dd').dialog('refresh', 'new_content.php');

属性

该属性扩展自窗口(window)下面是为对话框(dialog)重写的属性。

名称 类型 描述 默认值
title string 对话框的标题文本。 New Dialog
collapsible boolean 定义是否显示折叠按钮。 false
minimizable boolean 定义是否显示最小化按钮。 false
maximizable boolean 定义是否显示最大化按钮。 false
resizable boolean 定义对话框是否可调整尺寸。 false
toolbar array,selector 对话框的顶部工具栏,可能的值:
1、数组,每个工具的选项都与链接按钮(linkbutton)一样。
2、选择器,指示工具栏。
对话框工具栏可以在 <div>标签中声明:
  1. <div class="easyui-dialog" style="width:600px;height:300px"
  2. data-options="title:'My Dialog',toolbar:'#tb',modal:true">
  3. Dialog Content.
  4. </div>
  5. <div id="tb">
  6. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
  7. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
  8. </div>
对话框工具栏也可以通过数组定义:
  1. <div class="easyui-dialog" style="width:600px;height:300px"
  2. data-options="title:'My Dialog',modal:true,
  3. toolbar:[{
  4. text:'Edit',
  5. iconCls:'icon-edit',
  6. handler:function(){alert('edit')}
  7. },{
  8. text:'Help',
  9. iconCls:'icon-help',
  10. handler:function(){alert('help')}
  11. }]">
  12. Dialog Content.
  13. </div>
null
buttons array,selector 对话框的底部按钮,可能的值:
1、数组,每个按钮的选项都与链接按钮(linkbutton)一样。
2、选择器,指示按钮栏。
按钮可以在 <div>标签中声明:
  1. <div class="easyui-dialog" style="width:600px;height:300px"
  2. data-options="title:'My Dialog',buttons:'#bb',modal:true">
  3. Dialog Content.
  4. </div>
  5. <div id="bb">
  6. <a href="#" class="easyui-linkbutton">Save</a>
  7. <a href="#" class="easyui-linkbutton">Close</a>
  8. </div>
按钮也可以通过数组定义:
  1. <div class="easyui-dialog" style="width:600px;height:300px"
  2. data-options="title:'My Dialog',modal:true,
  3. buttons:[{
  4. text:'Save',
  5. handler:function(){...}
  6. },{
  7. text:'Close',
  8. handler:function(){...}
  9. }]">
  10. Dialog Content.
  11. </div>
null

事件

该事件扩展自面板(panel)。

方法

该方法扩展自窗口(window),下面是为对话框(dialog)添加的方法。

名称 参数 描述
dialog none 返回外部对话框(dialog)对象。

 

转载于:https://www.cnblogs.com/sharpest/p/9941243.html

你可能感兴趣的文章
程序员到底有多累,多辛苦?上百万程序员‘知乎上’吐槽
查看>>
C++ Primer 笔记——理解std::move
查看>>
AndroidStudio用Cmake方式编译NDK代码(cmake配置.a库)
查看>>
Kafka入门
查看>>
【Infragistics教程】Sketch Prototypes的可用性研究和用户视频
查看>>
移植Modbus到STM32F103(4):串口数据长度和校验的支持
查看>>
linux命令,如何根据关键字查询,如何替换某个关键字,vi中如何复制
查看>>
IT兄弟连 JavaWeb教程 Servlet会话跟踪 Cookie技术原理
查看>>
js算法: 图的两种表示方法以及广度优先算法
查看>>
CSS定位问题(3):相对定位,绝对定位
查看>>
如何给网站加入优雅的实时反爬虫策略
查看>>
手动配置无线网卡
查看>>
OSChina 周四乱弹 ——黑丝短裙java程序员同事
查看>>
设置iptables之后不能正常访问ftp解决方法
查看>>
maven使用国内镜像
查看>>
移动端rem布局
查看>>
改变状态栏的颜色
查看>>
UIImagePickerController说明
查看>>
01.C语言入门
查看>>
Spring-Batch中MapJobExplorerFactoryBean的配置方式
查看>>