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

 更新时间:2016年12月19日 16:51:26   作者:Jsakura  
这篇文章主要为大家详细介绍了Jquery Easyui对话框组件Dialog的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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(面板),窗口新增或重新定义的属性如下

 

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

事件列表

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

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

方法列表

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

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

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

相关文章

  • JQuery之focus函数使用介绍

    JQuery之focus函数使用介绍

    focus函数可以用来发生点击某个按钮或者提交值错误等触发事件发生时把焦点给到某个元素,具体用法如下,感兴趣的朋友可以参考下
    2013-08-08
  • jQuery实现的简单在线计算器功能

    jQuery实现的简单在线计算器功能

    这篇文章主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • 基于JQuery实现分隔条的功能

    基于JQuery实现分隔条的功能

    这篇文章主要介绍了基于JQuery实现分隔条的功能的相关资料,使用JQuery技术实现分隔条的功能,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 全面解析jQuery $(document).ready()和JavaScript onload事件

    全面解析jQuery $(document).ready()和JavaScript onload事件

    这篇文章主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery.holdReady()使用方法

    jQuery.holdReady()使用方法

    jQuery.holdReady()方法允许jQuery的完成事件被该函数锁定,下面为大家介绍下其具体的使用
    2014-05-05
  • jquery 笔记 事件

    jquery 笔记 事件

    写js已经有很久了,但是对js的详细了解还是很肤浅的,这几天在看jquery,在其中有一些新的发现和体会,记录下来
    2011-11-11
  • 使用jQuery实现购物车结算功能

    使用jQuery实现购物车结算功能

    这篇文章主要为大家详细介绍了使用jQuery实现购物车结算功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)

    jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)

    在淘宝购物的时候,发现里面有一个菜单,是查看“评论,物品信息”等的一个菜单。由于页面太长,所以它做了一个菜单定位
    2012-05-05
  • jQuery使用unlock.js插件实现滑动解锁

    jQuery使用unlock.js插件实现滑动解锁

    unlock.js插件具有滑动解锁,尺寸、颜色、字体大小等都可以个性化定制等特点,接下来通过本文给大家分享jQuery使用unlock.js插件实现滑动解锁思路讲解,感兴趣的朋友一起看看吧
    2017-04-04
  • 基于jquery的网页SELECT下拉框美化代码

    基于jquery的网页SELECT下拉框美化代码

    基于CSS 和JS的网页SELECT下拉框美化,JQUERY 插件,最近为公司的网页制做部,开发了一个用于美化网页上select 下拉框的JQUERY插件,拿来与大家分享。
    2010-10-10

最新评论