首页 > 其他 > 详细

【开发】Dialog 对话框

时间:2015-04-17 13:15:58      阅读:126      评论:0      收藏:0      [点我收藏+]

提示: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 对话框

原文:http://www.cnblogs.com/luoxiaonet/p/4434204.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!