EasyUI插件:Dialog使用示例

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">  
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">  
    <script type="text/javascript" src="easyui/jquery.min.js"></script>  
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#dialog1").html("<img src='http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif'/>");

                $("#dialog1").dialog({
                    title: "Dialog Demo",
                    iconCls: "icon-tip",
                    modal: true,
                    closed: false,
                    toolbar: [{
                        text: 'Help',
                        iconCls: 'icon-help',
                        handler: function () { alert("help"); }
                    }],
                    buttons: [{
                        text: "Save",
                        handler: function () { alert("save"); }
                    }, {
                        text: "Close",
                        handler: function () {
                            $("#dialog1").dialog("close");
                        }
                    }]
                });
            });
        });
    </script>
    <div id="dialog1"></div>
    <input type="button" id="btn1" value="click" />
</body>
</html>

效果预览:



评论: 0 | 引用: 0 | 查看次数: 3689
发表评论
登录后再发表评论!