移動端dialog組件

移動端dialog組件

dialogView是知足移動端下，用戶自定義的dialog組件，API可擴展性強，使用便捷。現版本是基於jquery庫編寫的，在使用以前須要引入jquery庫或者Zepto庫，後續將會和其餘組件整合成一個輕量級UI組件庫中。

 

引用

頁面引入dialog.min.js和dialog.min.css便可。

 

使用講解

組件提供了一個全局dialogView接口，和一個open()主函數，使用的時候只須要dialogView.open()就能夠了。

dialogView提供了經常使用的幾種移動端dialog類型：alert，confirm，msg，footConfirm，footMsg。對前3種經常使用類型的dailog彈窗，暴露出了3個函數，便於使用，如dialogView.alert()，dialogView.confirm()和dialogView.msg()，三個函數擁有默認的類型值，因此使用這三個函數時不須要傳入type值，固然也能夠這樣使用：dialogView.open({type:"alert"})，dialogView.open({type:"confirm"})，dialogView.open({type:"msg"})。

dialogView支持鏈式調用，如：dialogView.alert({message: "alert默認信息框"}).open({type:"footMsg",message: "我是提示類型框"})。

而且還暴露出了一個close()函數，用於關閉彈窗，使用以下：dialogView.close()，close()函數只支持傳入一個參數，即須要關閉的彈窗的DOM元素，不傳參時，將會默認關閉頁面上全部的彈窗。

 

參數

message: 彈窗區域內容，參數類型能夠是String類型，也能夠是DOM對象。

type: 彈窗類型，參數類型爲String類型，提供了5種默認的類型：alert，confirm，msg，footConfirm，footMsg，彈窗類型值可供用戶自行擴展。

showTime: 彈窗顯示時長，參數類型爲Number類型。

className: 自定義class名，參數類型爲String類型，會在彈窗的最外層元素上擴展class，通常用於特殊狀況下使用。

skin: 彈窗區域自定義皮膚，參數類型爲String類型，用於擴展彈窗區域的樣式，其值會被擴充爲彈框的class，好比你想給彈窗換掉默認背景色，換成本身定義的顏色，就能夠先在樣式文件中定義好一個class樣式，而後skin值爲定義的class值就能夠了，用法以下：

1 dialogView.open({
2     type: "msg",
3     message: "我是提示類型框",
4     shade: false,
5     skin: "dialog-msg" //自定義的皮膚樣式
6 })

項目的css文件下定義dialog-msg樣式：

.mobile-dialogView .dialogView-m-main .dialog-msg{background-color:blue;}

效果以下：

 

styles: 彈窗區域添加自定義css樣式,與skin值得做用一致，不一樣的是skin參數值的自定義css樣式是定義在樣式文件中的，而styles值則是直接擴展到行內樣式中，如：

1 dialogView.open({
2     type: "footmsg",
3     animate: "up",
4     message: $("#info").show() || document.getElementById("info"),
5     styles: "position: fixed;height: 100%;width: 100%;padding: 0;bottom: 0px;opacity: 1;", //自定義css樣式，將直接擴展爲行內樣式
6     showTime: 3000
7 })

shade: 是否須要遮罩層，參數類型爲Boolean值。

shadeClose: 點擊彈窗之外的區域是否關閉彈窗，參數類型爲Boolean值。

closeable: 點擊button按鈕是否關閉彈窗，參數類型爲Boolean值，默認值是true，若有特殊狀況點擊按鈕不須要關閉彈窗，將改值設置爲false就可。

animate: 彈窗動畫效果，定義了兩種彈窗動畫效果，值爲「open」和"up"，第一種彈窗顯示效果"open"，其對應的關閉效果是"close"，另外一種彈窗顯示效果"up"，其對應的關閉效果是"down"，默認動畫效果爲「open」。

buttons: 彈窗按鈕組，參數類型爲Array值，當dialog類型是alert時，有且只容許添加一個按鈕，當dailog類型值是confirm或者footConfirm時，有且只容許添加兩個按鈕，當dailog類型值是msg或者footMsg時，不會添加任何按鈕，其餘dailog類型，用戶寫了多少按鈕，就往按鈕組添加多少按鈕。
按鈕的參數類型爲Object鍵值對類型，有如下幾種參數：

• text: 按鈕文字，參數類型能夠是String類型
• skin: 自定義按鈕皮膚，使用如上面所述
• callback: 回調函數，點擊按鈕時觸發
• closeable：參數類型爲Boolean值，用於斷定按鈕點擊以後是否關閉彈窗，默認值爲true。

使用以下：

dialogView.confirm({
    message: "要前往個人github嗎？",
    buttons: [{
        skin: "yes",
        text: "能夠",
        callback: function(){
            window.location.href="https://github.com/webproblem";
        }
    },{
        skin: "no",
        text: "不要"
    }]
})

注： 在彈窗裏的DOM元素上添加closeable=true屬性，點擊該DOM元素時會觸發事件關閉彈窗，好比在自定義的標題上添加一個關閉按鈕圖標，使其點擊時觸發關閉事件，能夠這樣使用：

dialogView.open({
    title: {
        content: "<span>我是自定義標題</span><i class='demo-title-close' closeable=true></i>"
    },
    message: "自定義風格標題,第一個參數爲標題內容,第二個參數爲自定義的樣式,<br>關閉按鈕是自定義加上去的哦！"
})

title: 自定義標題區域，參數類型爲Object鍵值對類型，有三個參數，一個參數是content，對應的值爲自定義標題內容，參數類型能夠是String類型，也能夠是DOM對象。另兩個參數是styles和skin，都是爲自定義標題添加的樣式，兩個參數的區別如上面所述的同樣。用法以下：

dialogView.open({
    title: {
        content: "<span>我是自定義標題</span>"
    }
})

 

完整代碼及示例見個人github，github地址: https://github.com/webproblem/hello-world/tree/master/dialogDemo
Demo示例效果預覽地址: https://webproblem.github.io/hello-world/dialogDemo/dialog.html若是喜歡，請記得Star哈！若有不對之處，歡迎及時指出！