Dialog组件

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>