【连载】研究EasyUI系统— Dialog组件

　　dialog组件与window组件基本一致，很多内容都可参考window组件一文。(http://blog.csdn.net/redeg/article/details/67633069)
　　dialog与window的区别在于，dialog组件可以添加工具栏和底部按钮，实现更丰富的功能。

　　刚才也提到，dialog组件只是比window组件多出工具栏和底部按钮，所以我们仅对这两个属性做一个说明，其余部分也请参考window组件一文。

属性名称	属性值类型	属性默认值	描述
toolbar	数组或选择器	null	顶部工具栏。
buttons	数组或选择器	null	底部按钮。

　　这两个属性既可以通过html标记来使用，也可以通过js来使用。
　　
通过html方式

<!--通过html标签来增加顶部工具栏和底部按钮 -->
<!--id为toolbar的div是工具栏-->
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增行</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑行</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true">删除行</a>
</div>

<!--id为bottombtn的div是底部按钮-->
<div id="bottombtn">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:false">关闭</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:false">确定</a>      
</div>

<div class="easyui-dialog" id="dlg" data-options="toolbar:'#toolbar',buttons:'# bottombtn'"></div>

通过js方式

<!--通过js来增加顶部工具栏和底部按钮 -->
<div class="easyui-dialog" id="dlg"></div>

<script>
    /* toolbar为顶部工具栏的json数组 */
    var toolbar = [{
        text:'新增行',
        iconCls:'icon-add',
        handler:function() { alert("新增行"); }
    },{
        text:'编辑行',
        iconCls:'icon-edit',
        handler:function() { alert("编辑行"); }
    },{
        text:'删除行',
        iconCls:'icon-cancel',
         handler:function() { alert("删除行"); }
    }];

    /* bottombtn为底部按钮的json数组 */
    var bottombtn = [{
         text:'关闭',
         iconCls:'icon-cancel',
         handler:function() { $("#dlg").dialog("close"); }
     },{
         text:'确定',
         iconCls:'icon-ok',
         handler:function() { alert("确定"); }
     }];

    /* 将工具栏和按钮添加到dialog组件中 */
    $("#dlg").dialog({
         toolbar:toolbar,
         buttons:bottombtn
    });
</script>

　　另外，dialog组件的事件与window相同，方法则用“dialog”方法替换了window组件的“window”方法，功能是一样的，都是返回组件的所有属性。