您的位置：首页 > Web前端 > JQuery

jqueryeasyui dialog plugin的使用

2014-07-16 15:08 211 查看
dialog是一类特殊的窗口，它可以在顶部有一个工具栏并且在底部有一个按钮栏。dialog默认在顶部的右上方只有一个关闭按钮。用户可以通过配置dialog的行为来展示其他的工具，比如说收缩、最小化、最大化等等。

dialog依赖以下组件：window、linkbutton。

dialog的使用案例

通过标签来创建

<div id="dia" class="easyui-dialog" data-options="title: 'dialog example', width: 400, height: 300">
dialog content
</div>


上述代码创建了一个长度为400，高度为300的对话框，标题为dialog example。

通过javascript脚本来创建

<div id="dig">
dialog content
</div>

$("#dia").dialog({title: 'dialog example', width: 400, height: 300});


既然window可以使用ajax来加载内容，那么dialog也是可以的，同样使用refresh方法来加载

$("#dia").dialog('refresh', 'index.jsp');


dialog的属性

名称值类型描述Default
titlestringdialog插件的标题New Dialog
collapsibleboolean是否显示收缩按钮false
minimizableboolean是否显示最小化按钮false
maximizableboolean是否显示最大化按钮false
resizableboolean定义dialog是否可以调整大小false
toolbararray,selectordialog插件的工具栏，可以具有以下值：

1) 一个数组, 其中的每一个元素是一个linkbutton。

2) 一个象征了toolbar的选择子。
通过div标签创建toolbar
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',toolbar:'#tb',modal:true">
Dialog Content.
</div>
<div id="tb">
<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>

通过数组创建toolbar
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',modal:true,
toolbar:[{
text:'Edit',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'Help',
iconCls:'icon-help',
handler:function(){alert('help')}
}]">
Dialog Content.
</div>

null
buttonsarray,selector底部的button栏可以是以下的值：

1) 一个数组，里面的每一个元素是一个linkbutton。

2) 一个代表button bar的选择子。
使用div创建button bar

<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',buttons:'#bb',modal:true">
Dialog Content.
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton">Save</a>
<a href="#" class="easyui-linkbutton">Close</a>
</div>

使用数组创建button bar

<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog',modal:true,
buttons:[{
text:'Save',
handler:function(){...}
},{
text:'Close',
handler:function(){...}
}]">
Dialog Content.
</div>

null

dialog的方法

名称参数描述
dialognone返回外部的dialog对象
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航