Dialog概述


  • 扩展自 $.fn.window.defaults
  • 该对话框是一种特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏
  • 对话框窗口右上角只有一个关闭按钮,可以配置对话框的行为显示其他工具


使用Dialog

设置工具栏图标,css 玩法

<div id="myDialog"></div>

<div id="tt">
<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="#" 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>