首頁 > web前端 > js教程 > jquery ui bootstrap 實作自訂風格_jquery

jquery ui bootstrap 實作自訂風格_jquery

WBOY
發布: 2016-05-16 16:31:31
原創
1592 人瀏覽過

先看一下自訂提示框的效果圖

alert 普通的提示當然可以自訂樣式

confrim 確認框 支援callback

複製程式碼 程式碼如下:

//message 提示的資訊 ,callback(true/false)回呼函數
 window.shconfirm = function (message, callback)
回呼函數參數為 true/false

prompt 邀請使用者輸入框

複製程式碼 程式碼如下:

//message 提示的資訊 ,callback(msg)回呼函數(使用者輸入的訊息), param:regex 輸入的 正規驗證,regexmsg 正規驗證不通過的提示
 window.shprompt = function (message, callback, regex, regexmsg)
這裡 message 為提示訊息  *
    callback 為回呼函數 *  回傳參數為 使用者輸入的值(userinputmsg)
   regex 和 regexmsg 這2個參數是 選填項目 用於驗證使用者輸入,2個參數需要同時出現。不能單獨使用。

以下是js的實現,

目前這個是整合了 jquery ui 和 bootstrap 自己封裝的一個 alert 提示。

複製程式碼 程式碼如下:

(函數(){
    var _shconfirm = {};
    var _shprompt = {};
    //閉包初始化;
    $(函數 () {
        $("#dialogalert").dialog({
            模態:true,
            自動開啟:假,
            顯示:{
                效果:「致盲」,
                長度:500
            },
            隱藏:{
                效果:「爆炸」,
                長度:500
            },
            按鈕:{
                決定: function () {
                    $(this).dialog("關閉");
                }
            }
        });
        $("#dialogconfirm").dialog({
            模態:true,
            自動開啟:假,
            顯示:{
                效果:「投影片」,
                長度:500
            },
            隱藏:{
                效果:「下降」,
                長度:500
            },
            按鈕:{
                決定: function () {
                    _shconfirm.shconfirmCallBack(true);
                    $(this).dialog("關閉");
                },
                取消: function () {
                    _shconfirm.shconfirmCallBack(false);
                    $(this).dialog("關閉");
                }
            }
        });
        $("#dialogprompt").dialog({
            模態:true,
            自動開啟:假,
            顯示:{
                效果:「致盲」,
                長度:500
            },
            隱藏:{
                效果:「泡芙」,
                長度:500
            },
            按鈕:{
                決定: function () {
                    if (_shprompt.shpromptObj.regex) {
                           t.shpromptObj.regex.test($("#dialogprompt .text").                             $("#dialogprompt .alert .prompmpcm                             $("#dialogprompt .alert").slideDown();
                           回復使用)
                        } 其他 {
                            $("#dialogprompt .alert").hide();                         }
                    }
                    _shprompt.shpromptObj.callback($("#dialogprompt .text").val());
                    $(this).dialog("關閉");
                },
                取消: function () {
                    _shprompt.shpromptObj.callback($("#dialogprompt .text").val());
                    $(this).dialog("關閉");
                }
            }
        });
    });
    window.shalert = 函數(訊息){
        $("#dialogalert .msgcontent").html(訊息);
        $("#dialogalert").dialog("開");
    };
    //message提示的訊息,callback(true/false)回呼函數
    window.shconfirm = 函數(訊息,回呼){
        $("#dialogconfirm .msgcontent").html(訊息);
        $("#dialogconfirm").dialog("開");
        _shconfirm.shconfirmCallBack = 回呼;
    };
    //message提示的資訊,callback(msg)回呼函數(使用者輸入的訊息),param:regex輸入的正規驗證,regexmsg正規驗證不通過的提示
    window.shprompt = 函數(訊息、回呼、正規表示式、regexmsg){
        $("#dialogprompt .msgcontent").html(訊息);
        $("#dialogprompt").dialog("開啟");
        _shprompt.shpromptObj = {
            回調:回調,
            正規表示式:正規表示式,
            正規表示式訊息:正規表示式訊息
        };
    }
})();

以下是呼叫程式碼

confirm //比可惜的是 js沒辦法模擬 js腳本暫停 所以只能以回呼函數的方式 來繼續下一步操作。

複製程式碼 程式碼如下:

function ShConfirm() {
            shconfirm("確定要這麼做嗎!", function (result) {
                if (result) {
                    alert("點選了確定");
                } else {
                    alert("取消取消");
                }
            });
        }

  function ShPrompt() {
            shprompt("請問1 1等於幾!", function (text) {
                alert("使用者輸入了:" text);
            }, /^d{1,}$/, "請輸入數字!");
        }

shalert 就直接用就行了。和 js的alert 效果一樣。

複製程式碼 程式碼如下:


   
   

源碼我已經放在 百度網盤上,歡迎大家學習交流了。

原始碼下載位址

http://pan.baidu.com/s/1c00Cl36

這個控制其實還有可重構的部分,像是初始化方法等等這些都沒有提取出來,因為任務緊所以先這麼用。

下一次最佳化時會處理這些問題。

原版風格是這樣的,可以透過修改引用的css上實現 demo上有詳細說明。

以上就是本文全部內容了,怎麼樣,受益匪淺吧。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板