EasyUI-dialog

　　对话框用于，像添加操作，需要表单数据录入的情况。并且，录入表单在默认的情况下面是隐藏的。在点击“添加”的时候，弹出对话框，来进行录入。

基本属性

1.modal

当modal属性值为true时，弹出对话框后，对话框的底层是不可以进行操作的。

2.title,width,height

分别表示对话框的标题，宽度，高度。

3.collapsible,minimizable,maximizable

默认情况下，对话框右上角的操作按钮只有关闭。通过这3个属性，可以为对话框添加：折叠、最小化、最大化按钮。

4.resizable

该属性用于说明对话框的大小是否可以调节。

5.iconCls

　　这个属性可以修改对话框左侧的图标和title一起说明该对话框的用途。

iconCls:'icon-add1'

弹出对话框之前，先将其显示，否则对话框将无内容

　　虽然可以有css载入，或者在dialog中使用href引入对话框的方式。但是，我喜欢将弹出的内容直接写在页面里面，隐藏起来，然后触发弹出。

<body>
    <input type="button" id="add" value="添加" />
    <div id="dialog" style="display: none;">
        姓名：
        <input type="text" id="name" /><br />
        年龄：
        <input type="text" id="age" />
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#add").click(function () {
                $("#dialog").show();//必须先显示，再弹出
                $("#dialog").dialog({
                    title: "添加",
                    width: 400,
                    height: 200
                });
            });
        });
    </script>
</body>

toolbar

　　toolbar显示的位置在对话框内容的左上方，而buttons显示的位置在对话框内容的右下方，它们的使用方式基本相同。toolbar和buttons的值是数组，格式如下：

[

{text:'Edit',iconCls:'icon-edit',handler:function(){...}},

{},{},{}

]

　　其中，text是按钮的名称，iconCls是按钮的图标，handler是按钮点击时触发的事件。另外，还可以为按钮配置id属性。配置id属性的好处是，在点击按钮后，我们希望按钮禁用。然后，等待事件处理完毕，再启用按钮。

$('#按钮id').linkbutton('disable');
$('#按钮id').linkbutton('enable');

buttons

　　buttons的使用和toolbar一样，下面通过一个例子演示一下。

<body>
    <input type="button" id="add" value="添加" />
    <div id="dialog" style="display: none;">
        姓名：
        <input type="text" id="name" /><br />
        年龄：
        <input type="text" id="age" />
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#add").click(function () {
                $("#dialog").show();
                $("#dialog").dialog({
                    title: '添加',
                    width: 400,
                    height: 200,
                    modal: true,
                    buttons: [{
                        text: 'Edit',
                        id: 'Edit',
                        iconCls: 'icon-edit',
                        handler: function () {
                            $('#Edit').linkbutton('disable');
                            $.ajax({
                                type: "POST",
                                url: "..",
                                async: false,
                                data: null,
                                success: function (data) {
                                    $('#Edit').linkbutton('enable');
                                }
                            });
                        }
                    }, {
                        text: 'Help',
                        iconCls: 'icon-help',
                        handler: function () {
                            alert('');
                        }
                    }]
                });
            });
        });
    </script>
</body>

Events

dialog的事件从window中继承，而window又从panel中继承。所以，dialog可定义onLoad、onClose这些事件来进行相关处理操作。

通过href将对话框内容和当前页面分开

function akmaterial_add() {
    $("<div></div>").dialog({
        id: "akmaterial_add_dialog",
        href: "AkMaterial/Add",
        title: "添加物料",
        height: 400,
        width: 500,
        modal: true,
        buttons: [{
            id: "akmaterial_add_btn",
            text: '添 加',
            handler: function () {
                $("#akmaterial_addform").form("submit", {
                    url: "AkMaterial/AddProcess",
                    onSubmit: function () {
                        $('#akmaterial_add_btn').linkbutton('disable');
                        if ($(this).form('validate')) {
                            return true;
                        }
                        else {
                            $('#akmaterial_add_btn').linkbutton('enable');
                            return false;
                        }
                    },
                    success: function (data) {
                        var result = eval('(' + data + ')');
                        if (result.Success) {
                            $("#akmaterial_add_dialog").dialog('destroy');
                            $.show_warning("提示", result.Message);
                            akmaterial_databind();
                        } else {
                            $('#akmaterial_add_btn').linkbutton('enable');
                            $.show_warning("提示", result.Message);
                        }
                    }
                });
            }
        }],
        onLoad:function() {
                
        },
        onClose: function () {
            $("#akmaterial_add_dialog").dialog('destroy');
        }
    });
}

在WebForm中，弹框里的服务器控件无响应

var dlg = jQuery("#dd").dialog({
                draggable: true,
                resizable: true,
                closed:true,
                show: 'Transfer',
                hide: 'Transfer',
                autoOpen: false,
                width:600,
                minHeight: 10,
                minwidth: 10
            });
            dlg.parent().appendTo(jQuery("form:first"));

posted on 2014-07-10 16:56 凡一二三阅读(31110) 评论(1) 编辑收藏举报

EasyUI-dialog

在WebForm中，弹框里的服务器控件无响应

搜索

积分与排名

随笔分类

阅读排行榜

评论排行榜

推荐排行榜