首页 > 代码库 > EasyUI-dialog

EasyUI-dialog

2024-07-11 13:30:28   222人阅读

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

基本属性

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>

 

 


联系
我们