提示:Dialog 继承自 Panel,有大量的方法在 Panel 中已被定义,可以复用。

Dialog API:http://www.jeasyui.net/plugins/181.html

PanelAPI:http://www.jeasyui.net/plugins/159.html

通常弹窗都会使用对话框,以此作为承载。

<div id="preAssignArea" class="easyui-dialog" title="分配任务" closed="true" style="width: 660px; height: 252px;"

data-options="iconCls:'icon-save',resizable:false,modal:true, buttons:'#preAssignAreaToolbar' ">

<!-- 表单放置区 -->

</div>

<div id="preAssignAreaToolbar">

<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok' ">确定</a>

<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel' "

onclick="javascript:$('#preAssignArea').dialog('close')">关闭</a></div>

表单每多一行,dialog的高度需要增加 27px

以上示例的表单 HTML 呈现如下:

<form id="preAssignForm" method="post" novalidate="novalidate">

<table style="width: 100%">

<tr>

<td>

<table id="tblAdd1" class="view">

<tr>

<th>

<label for="BytesNum">字节数:</label>

</th>

<td colspan="3">

<input class="easyui-textbox" type="text" id="txtBytesNum" name="BytesNum" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

</tr>

<tr>

<th>

<label for="BeginPageNum">起始页码:</label>

</th>

<td>

<input class="easyui-textbox" type="text" id="txtBeginPageNum" name="BeginPageNum" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

<th>

<label for="EndPageNum">结束页码:</label>

</th>

<td>

<input class="easyui-textbox" type="text" id="txtEndPageNum" name="EndPageNum" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

</tr>

<tr>

<th>

<label for="BeginDate">开始时间:</label>

</th>

<td>

<input class="easyui-textbox" type="text" id="txtBeginDate" name="BeginDate" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

<th>

<label for="EndDate">结束时间:</label>

</th>

<td>

<input class="easyui-textbox" type="text" id="txtEndDate" name="EndDate" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

</tr>

<tr>

<th>

<label for="Notes">备注:</label>

</th>

<td colspan="3">

<input class="easyui-textbox" data-options="multiline:true"

style="width:452px; height:60px" id="txtNotes" name="Notes" />

<!-- data-options="required:true,validType:'length[1,50]'" -->

</td>

</tr>

</table>

</td>

</tr>

</table>

</form>

常用属性设置:

$preAssignArea.dialog('setTitle', '分配任务'); //设置标题

$preAssignArea.dialog('open'); //打开

// 窗体关闭时所要做的事

$preAssignArea.dialog({

onClose: function () {

console.info("对话框关闭了");

}

});

$preAssignDialog.dialog('close'); //关闭

 

或者采用链式操作:

$maintainDialog

.dialog({

iconCls: 'icon-add',

title: '新增',

maintainState: MaintainStateEnum.Add

})

.dialog('open');

或者:

$maintainForm.form('load', result.Data);

$maintainDialog

.dialog({

iconCls: 'icon-edit',

title: '修改',

maintainState: MaintainStateEnum.Update

})

.dialog('open');

【开发】Dialog 对话框的更多相关文章

  1. 使用jQuery开发dialog对话框插件

    1.插件使用 首先引入 jquery 库,然后引入 dialog.js.dialog.css,如下: <script type="text/javascript" src=& ...

  2. Android UI系列-----Dialog对话框

    您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内 ...

  3. Android中制作自定义dialog对话框的实例

    http://www.jb51.net/article/83319.htm   这篇文章主要介绍了Android中制作自定义dialog对话框的实例分享,安卓自带的Dialog显然不够用,因而我们要继 ...

  4. (转载)Android常用的Dialog对话框用法

    Android常用的Dialog对话框用法 Android的版本有很多通常开发的时候对话框大多数使用自定义或是 Google提供的V4, V7 兼容包来开发保持各个版本的对话框样式统一,所以这里使用的 ...

  5. Android Dialog对话框的七种形式的使用

    参考资料:http://www.oschina.net/question/54100_32486 注:代码进行了整理 在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询 ...

  6. C/C++ Qt 自定义Dialog对话框组件应用

    在上一篇博文 <C/C++ Qt 标准Dialog对话框组件应用> 中我给大家演示了如何使用Qt中内置的标准对话框组件实现基本的数据输入功能. 但有时候我们需要一次性修改多个数据,使用默认 ...

  7. matlab学习------------普通dialog对话框,错误对话框errordlg,警告对话框warndlg

    Dialog对话框 语法: h = dialog('PropertyName',PropertyValue,...) 对话框的默认属性 WindowStyle的值:   {normal} | moda ...

  8. Android开发之对话框高级应用

    Android开发之对话框高级应用 创建并显示一个对话框非常easy.可是假设想进行一些更高级点的操作,就须要一些技巧了.以下将和大家分享一下对话框使用的一些高级技巧. 1.改变对话框的显示位置: 大 ...

  9. android从Dialog对话框中取得文本文字

    android中Dialog对话框获取文本文字,只需要使用editor的getText方法就可以获得,示例如下:final EditText et = new EditText(this); et.s ...

  10. 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框

    EasyUI Window 窗口 扩展自 $.fn.panel.defaults.通过 $.fn.window.defaults 重写默认的 defaults. 窗口(window)是一个浮动的.可拖 ...

随机推荐

  1. RocketMQ入门(3)拉取消息

    转自:http://www.changeself.net/archives/rocketmq入门(3)拉取消息.html RocketMQ入门(3)拉取消息 RocketMQ不止可以直接推送消息,在消 ...

  2. SQL连接查询的方式

    网上copy,以后来完整 连接条件可在FROM或WHERE子句中指定,建议在FROM子句中指定连接条件.WHERE和HAVING子句也可以包含搜索条件,以进一步筛选连接条件所选的行.          ...

  3. sql STUFF用法

    sql STUFF用法 1.作用 删除指定长度的字符,并在指定的起点处插入另一组字符. 2.语法 STUFF ( character_expression , start , length ,char ...

  4. HTML中标签和元素的区别

    作为一个前端,相信大家最先接触应该都是HTML吧?在HTML中很多人可能都没有把什么叫标签,什么叫元素这个概念搞清楚,为了把这个大家不曾留意的易混淆的搞清楚,特作此一文彻底解决掉这个问题! 首先我们来 ...

  5. 2014 ACM/ICPC 鞍山赛区现场赛 D&amp;I 解题报告

    鞍山现场赛结束了呢-- 我们出的是D+E+I三道题-- 吾辈AC掉的是D和I两道,趁着还记得.先在这里写一写我写的两道水题D&I的解题报告吧^_^. D题的意思呢是说星云内有一堆排成一条直线的 ...

  6. 【转】二叉树 VS hashtable

    hash_table和二叉搜索树都经常被用来构建符号表(或者字典)以及相关的结构,并且他们都表现出了很高的效率.最近也在不同的程序中使用了这两种数据结构,实现完毕后思考一下,对两者做了一个简单的比较: ...

  7. BZOJ 1143: [CTSC2008]祭祀river 最长反链

    1143: [CTSC2008]祭祀river Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline ...

  8. Hdu 5001 Walk 概率dp

    Walk Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5001 Desc ...

  9. 网络防火墙实战-基于pfsense(2)

    安装虚拟机 本博客所有内容是原创,如果转载请注明来源 http://blog.csdn.net/myhaspl/

  10. Android模拟器操作快捷键

    你可以通过模拟器的启动选项和控制台命令来控制模拟环境的行为和特性.一旦模拟器启动,你就可以通过键盘和鼠标来“按” 模拟器的按键,从而操作模拟器.下面的表格总结了模拟器按键可键盘按键之间的映射关系. 模 ...