Jquery Easyui对话框组件Dialog使用详解(14)


Posted in Javascript onDecember 19, 2016

Dialog对话框组件依赖于Window(窗口)组件、linkbutton 组件

加载方式

Class加载

<div class="easyui-dialog"
     title="弹出框"
     data-options="iconCls:'icon-add',resizable:true,modal:true"
     style="width: 400px;height: 200px;">
    弹出框内容
  </div>

JS调用加载

<div id="box">
 弹出框内容
 </div>
 <div id="tt">
 <a href="#" class="easyui-linkbutton"
 data-options="iconCls:'icon-edit',plain:true">编辑</a>
 <a href="#" class="easyui-linkbutton"
 data-options="iconCls:'icon-help',plain:true">帮助</a>
 </div>

 <script>
 $(function () {
 $('#box').dialog({
 width : 400,
 height : 200,
 title : '弹出框标题',
 modal : true,
 // 是否显示可折叠按钮
 collapsible : false,
 // 是否显示最小化按钮
 minimizable : false,
 // 是否显示最大化按钮
 maximizable : false,
 // 是否可以改变对话框窗口大小
 resizable : false,
 // 设置对话框窗口顶部工具栏
 //buttons : '#tt',
 toolbar : [{
  text : '编辑',
  iconCls : 'icon-edit',
  handler : function () {
  alert('edit');
  },
 }, {}],
 // 对话框窗口底部按钮
 buttons : [{
  text : '保存',
  iconCls : 'icon-ok',
  handler : function () {
  alert('save');
  }
 },{}]

 })
 });
 </script>

属性列表

窗口属性扩展自 Window(面板),窗口新增或重新定义的属性如下

 Jquery Easyui对话框组件Dialog使用详解(14)

Dialog 是继承自 Window 组件的,所以 Window 组件和 Panel 组件均可用

事件列表

窗口的事件完整继承自 Window(面板)。所以,直接参考 Window 面板的事件即可。

//Dialog 事件
$('#box').dialog({
 width : 600,
 height : 400,
 modal : true,
 onClose : function () {
 alert('关闭后触发!');
 },
});

方法列表

对话框的方法扩展自 Window(窗口),对话框新增方法如下

Jquery Easyui对话框组件Dialog使用详解(14)

//返回外部窗口对象
//console.log($('#box').window('dialog'));
//使用$.fn.window.defaults 重写默认值对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 问答知识整理
Feb 11 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 #Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 #Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 #Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 #Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 #Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 #Javascript
Bootstrap的基本应用要点浅析
Dec 19 #Javascript
You might like
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
简单的js表格操作
2016/09/24 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
python经典趣味24点游戏程序设计
2019/07/26 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
班组长竞聘书
2014/03/31 职场文书
带病坚持工作事迹
2014/05/03 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
人事局接收函
2015/01/31 职场文书
同意离婚答辩状
2015/05/22 职场文书
结婚仪式主持词
2015/06/29 职场文书
大学生读书笔记范文
2015/07/01 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android