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 相关文章推荐
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
JS获取IMG图片高宽的简单实例
May 17 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
jquery图片放大镜效果
Jun 23 jQuery
原生JS实现的双色球功能示例
Feb 02 Javascript
vue实现搜索过滤效果
May 28 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 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编程语言开发动态WAP页面
2006/10/09 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
python获得图片base64编码示例
2014/01/16 Python
python多线程threading.Lock锁用法实例
2014/11/01 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python中安装easy_install的方法
2018/11/18 Python
Python中遍历列表的方法总结
2019/06/27 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
总经理的岗位职责
2014/02/23 职场文书
培训协议书范本
2014/04/22 职场文书
部门年终奖分配方案
2014/05/07 职场文书
国际会计专业求职信
2014/08/04 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
学生个人总结范文
2015/02/15 职场文书
python实现简单的聊天小程序
2021/07/07 Python