Dialog概述
- 扩展自 $.fn.window.defaults
- 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏
- 对话框窗口右上角只有一个关闭按钮，可以配置对话框的行为显示其他工具
使用Dialog
设置工具栏图标，css 玩法
<div id="myDialog"></div>
<div id="tt">
<a href="https://www.ctyun.cn/portal/link.html?target=%23" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="https://www.ctyun.cn/portal/link.html?target=%23" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>
<script>
$(function () {
$('#myDialog').dialog({
// 标题
title: '窗口标题',
// 宽度
width: 600,
// 高度
height: 400,
// 设置工具栏图片
tools: '#tt'
});
});
</script>
Js玩法
<div id="myDialog"></div>
<script>
$(function () {
$('#myDialog').dialog({
// 标题
title: '窗口标题',
// 宽度
width: 600,
// 高度
height: 400,
// 设置工具栏图片
tools: [
{
iconCls: 'icon-add',
handler: function () {
alert('add')
}
},
{
iconCls: 'icon-edit',
handler: function () {
alert('edit')
}
}
]
});
});
</script>
设置toolbar
<div id="myDialog"></div>
<script>
$(function () {
$('#myDialog').dialog({
// 标题
title: '窗口标题',
// 宽度
width: 600,
// 高度
height: 400,
// 设置toolbar
toolbar: [
{
iconCls: 'icon-add',
handler: function () {
alert('add')
}
},
{
iconCls: 'icon-edit',
handler: function () {
alert('edit')
}
}
]
});
});
</script>
设置buttons
<div id="myDialog"></div>
<script>
$(function () {
$('#myDialog').dialog({
// 标题
title: '窗口标题',
// 宽度
width: 600,
// 高度
height: 400,
// 设置buttons
buttons: [
{
text: '保存',
handler: function () {
alert('add')
}
},
{
text: '关闭',
handler: function () {
alert('close')
}
}
]
});
});
</script>
