欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2021-01-28 10:22:52|栏目:jquery|点击:

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 CSS3自定义美化Checkbox实现代码

栏    目:jquery

下一篇:jQuery无刷新上传之uploadify3.1简单使用

本文标题:Jquery Easyui对话框组件Dialog使用详解(14)

本文地址:http://www.codeinn.net/misctech/52523.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有