關於easyUI的模態對話框

本文版權歸博客園和作者吳雙本人共同所有，轉載和爬蟲請注明原文地址。博客園蝸牛cnblogs.com/tdws

會用easyUI的模態對話框會是我們的開發更加簡潔，只需下載這個插件，把需要的文件拖到項目中，下面展示一個easyUI的模態對話框，以及使用方法和屬性。這里是一個常用功能小展示，試試上easyUI自帶的說明文檔非常全面，*****學會查看文檔很重要，看幾次就會熟練*****

<script type="text/javascript" src="../Script/jquery-1.8.3.js"></script>
    <script src="../Script/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script src="../Script/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
    <link href="../Script/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" />
    <link href="../Script/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" />
//以上是必須引用的

//下面展示一段

//加載的時候，要把你的模態div先隱藏
$(function () {
            $("#addNewsDiv").css("display", "none");
}

//點擊添加按鈕顯示添加對話框
        function showAddNewsDialog() {
            $("#addNewsbtn").click(function () {
                $("#addNewsDiv").css("display", "block");  //把隱藏的div可見
                $("#addNewsDiv").dialog({
                    title: "添加新聞對話框",   //一些屬性
                    width: 400,
                    height: 400,
                    buttons: [{
                        text: "添加",
                        iconCls: "icon-add",     //引用此按鈕屬性，會自動為你的按鈕增加樣式和圖標
                        handler: function () {
                            saveNews();//自己的方法
                        }
                    }, {
                        text: "取消",
                        iconCls: "icon-cancel",
                        handler: function () {
                            $("#addNewsDiv").dialo

g("close");//關閉對話框
                        }
                    }]
                });
            });

 

 

如果我的點滴分享對您有點低幫助，歡迎點擊下方紅色關注，我將持續分享，共同進步