码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI - Dialog 对话框

时间:2015-10-17 16:05:36      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:

效果:

技术分享

 

html代码:

其中有class加载方式和Javascript加载方式。

<!--class加载方式-->
<%--<div id="dd" class="easyui-dialog" title="My Dialog" style="width: 400px; height: 200px;"
    data-options="iconCls:‘icon-save‘,resizable:true,modal:true">
    Dialog Content.
</div>--%>

<!--JavaScript加载方式-->
<div id ="dia">
    <div class ="easyui-layout" data-options ="fit:true">
        <div data-options ="region:‘center‘, height:20, title:‘标题‘, fit:true,"></div>
    </div>
</div>

 

JavaScript代码:

$(function () {
    $(#dia).dialog({
        title:dialog,
        width: 400,
        height: 300,
        iconCls: icon-save,
        modal: true,//是不是悬浮增(底部不可点击)
        draggable: false,//不可拖动
        //顶部的工具栏
        toolbar: [{
            text:添加,
            iconCls: icon-add,
            handler: function () {
                alert("add!");
            }
        }, {
            text: 删除,
            iconCls: icon-cancel,
            handler: function () {
                alert("delete");
            }
        }, {
            text: 刷新,
            iconCls: icon-reload,
            handler: function () {
                alert("refresh");
            }
        }],
        //底部的按钮组
        buttons: [{
            iconCls:icon-add,
            text: 保存,
            handler: function () {
                alert("save");
            }
        }, {
            iconCls:icon-cancel,
            text: 删除,
            handler: function () {
                alert("删除!");
            }
        }],
        //其中事件是完全继承自panel
        onClose: function () {
            alert("关闭了窗口!");
        }
    })
})

 

EasyUI - Dialog 对话框

标签:

原文地址:http://www.cnblogs.com/KTblog/p/4887508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!