彈出框(artDialog7)

時間 2019-12-07

標籤彈出 artdialog7 artdialog 简体版

原文原文鏈接

Q1:使用(記得下載artDialog7)css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="js/artDialog7/css/dialog.css">
    </head>
    <style>
        #dislogs{
            display: none;
        }
    </style>
    <body>
        <input type="button" value="彈出" id="btnDialog"/>
        <fieldset id="dislogs">
            <legend>添加</legend>
            <p>
                <label for="cname">名稱</label>
                <input type="text" id="cname" name="cname" placeholder="請輸入名稱"/>
            </p>
            <p>
                <label for="cspeed">速度</label>
                <input type="text" name="cspeed" id="cspeed" placeholder="請輸入速度"/>
            </p>
            <p>
                <label for="cplate">車牌</label>
                <input type="text" id="cplate" name="cplate" placeholder="請輸入車牌"/>
            </p>
            <p>
                <label>詳細</label>
                <textarea cols="80" rows="10" id="details" style="width:600px;"></textarea>
            </p>
            <p>
                <input type="button" value="添加" id="btnadd"/>
                <input type="button" value="修改" id="btnupdate"/>
            </p>
        </fieldset>
        <script src="../js/jquery-1.11.3.js"></script>
        <script src="js/artDialog7/dist/dialog.js"></script>
        
        
        <script>
            //彈出框
            var dialogAgu;
            $("#btnDialog").click(function(){
                dialogAgu=dialog({
                    title:"添加用戶",
                    modal:true,
                    backdropOpacity:0.2,
                    width:'700px',
                    height:'420px',
                    content:$("#dislogs"),
                    backdropBackground: 'blue',
                    ok: function() {
                        var that = this;
                        that.title('提交中..');//改變狀態
                        var s=setInterval(function() {//設置等待時間
                          alert("dd"); 
                          clearInterval(s);//中止時間
                          dialogAgu.close();//關閉彈出框
                        }, 500);
                        return false;
                    },
                    cancel:function(){
                        dialogAgu.close();
                    },
                    okValue:'肯定',
                    cancelValue:'取消'
                });
                dialogAgu.show()
            });
        </script>
    </body>
</html>

結果:html

Q2:屬性jquery

// 對齊方式
    //align: 'bottom left',
    
    // 是否固定定位
    //fixed: false,
    
    // 對話框疊加高度值(重要：此值不能超過瀏覽器最大限制)
    //zIndex: 1024,

    // 設置遮罩背景顏色
    backdropBackground: '#000',

    // 設置遮罩透明度
    backdropOpacity: 0.7,

    // 消息內容
    content: '<span class="ui-dialog-loading">Loading..</span>',
    
    // 標題
    title: '',

    // 對話框狀態欄區域 HTML 代碼
    statusbar: '',
    
    // 自定義按鈕
    button: null,
    
    // 肯定按鈕回調函數
    ok: null,
    
    // 取消按鈕回調函數
    cancel: null,

    // 肯定按鈕文本
    okValue: 'ok',
    
    // 取消按鈕文本
    cancelValue: 'cancel',

    cancelDisplay: true,
    
    // 內容寬度
    width: '',
    
    // 內容高度
    height: '',
    
    // 內容與邊界填充距離
    padding: '',
    
    // 對話框自定義 className
    skin: '',

    // 是否支持快捷關閉（點擊遮罩層自動關閉）
    quickClose: false,

    // css 文件路徑，留空則不會使用 js 自動加載樣式
    // 注意：css 只容許加載一個
    cssUri: '../css/ui-dialog.css',

Q3:事件瀏覽器

/**
     * 顯示對話框
     * @name artDialog.prototype.show
     * @param   {HTMLElement Object, Event Object}  指定位置（可選）
     */
    
    /**
     * 顯示對話框（模態）
     * @name artDialog.prototype.showModal
     * @param   {HTMLElement Object, Event Object}  指定位置（可選）
     */

    /**
     * 關閉對話框
     * @name artDialog.prototype.close
     * @param   {String, Number}    返回值，可被 onclose 事件收取（可選）
     */

    /**
     * 銷燬對話框
     * @name artDialog.prototype.remove
     */

    /**
     * 重置對話框位置
     * @name artDialog.prototype.reset
     */

    /**
     * 讓對話框聚焦（同時置頂）
     * @name artDialog.prototype.focus
     */

    /**
     * 讓對話框失焦（同時置頂）
     * @name artDialog.prototype.blur
     */

    /**
     * 添加事件
     * @param   {String}    事件類型
     * @param   {Function}  監聽函數
     * @name artDialog.prototype.addEventListener
     */

    /**
     * 刪除事件
     * @param   {String}    事件類型
     * @param   {Function}  監聽函數
     * @name artDialog.prototype.removeEventListener
     */

    /**
     * 對話框顯示事件，在 show()、showModal() 執行
     * @name artDialog.prototype.onshow
     * @event
     */

    /**
     * 關閉事件，在 close() 執行
     * @name artDialog.prototype.onclose
     * @event
     */

    /**
     * 銷燬前事件，在 remove() 前執行
     * @name artDialog.prototype.onbeforeremove
     * @event
     */

    /**
     * 銷燬事件，在 remove() 執行
     * @name artDialog.prototype.onremove
     * @event
     */

    /**
     * 重置事件，在 reset() 執行
     * @name artDialog.prototype.onreset
     * @event
     */

    /**
     * 焦點事件，在 foucs() 執行
     * @name artDialog.prototype.onfocus
     * @event
     */

    /**
     * 失焦事件，在 blur() 執行
     * @name artDialog.prototype.onblur
     * @event
     */

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。