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 相关文章推荐
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
解析strtr函数的效率问题
2013/06/26 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JsRender实用入门教程
2014/10/31 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python中有关时间日期格式转换问题
2019/12/25 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
python 实现批量图片识别并翻译
2020/11/02 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
小学评语大全
2014/04/22 职场文书
初二学习计划书范文
2014/04/27 职场文书
小学大队长竞选稿
2015/11/20 职场文书
初二英语教学反思
2016/02/15 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang