封裝基於jq彈窗插件

相信碼友們對於$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的瞭解；我闡述一下我自己對於$.fn.custom和$.custom的理解、有理解錯誤或是有更好的建議直接噴我就好！

下麵咱們進行簡單插件的封裝；

Jquery為開發插件提供了兩個方法，分別是：

$.fn.INFOplug= $.INF_Oplug=function(){}

先簡單的闡述下這兩種方法：

這兩個分別是:

$.INFplug;是為了擴展jquery本身，為類添加新的工具方法;

$.fn.INFOplug;給jquery對象添加方法。

例子：

$.fn.INFOplug=function(a,b){

alert(a+b)

};

$.INF_Oplug=function(a,b){

alert(a+b)

}

該兩種方法分別：

在jquery對象上創建了一個INFOplug方法；該方法中列印a+b；

在jquery上拓展了工具INF_Oplug方法；列印如上a+b；

兩者的使用方法是不同的，下麵舉個實例：

INFOplug方法:

$('div).INFOplug(4,5);

INF_Oplug方法：

$.INF_Oplug(4,5)

這是兩者大致的意思，下麵我們用這兩個方法進行封裝一個基於jquery的彈窗插件，代碼如下:

 1 (function($){
 2     var __INFO__ = {
 3         plug:'jquerySpwialog',
 4         ver:'1.0.1.2',
 5         author:'sunpengwei'
 6     };
 7     var defaults = {
 8         title:"",
 9         tips:"",
10         txt:null,
11         ok:"確定",
12         cancel:"",
13         callback:function(){},
14         htmls:'<div id="jquery_dn_dialog_mask" style="background:rgba(0,0,0,0.3);width:100%;height:100%;position:fixed;top:0;left:0;z-index:2147483647">\
15                 <div id="jqurey_dn_dialog_main" style="background:#dedede;left:50%;top:50%;position:absolute;transform:translate(-50%,-50%);border-radius:10px;overflow:hidden;min-width:270px">\
16                       <h1 id="jqdndialog_title" style="text-align:center;font-size:22px;padding:10px 0 0 0;magring:10px 5px">彈窗標題</h1>\
17                       <div id="jqdndialog_tips" style="font-size:18px;margin:0 17px;padding:0 0 20px 0">彈窗內容</div>\
18                     <p style="margin:5px 20px">\
19                         <input id="jqdndialog_txt" type="text" style="border-radius:5px;width:100%;line-height:30px;font-size:20px;border:0px">\
20                     </p>\
21                     <div id="jqdndialog_button" style="border-top:1px solid #b8b8b8;display:flex;justify-content:space-around;">\
22                         <a href="javascript:;" style="color:#007aff;font-weight:bold;display:inline-block;height:44px;line-height:44px;text-align:center;text-decoration:none;width:100%">按鈕</a>\
23                         <a href="javascript:;" style="color:#007aff;font-weight:bold;display:inline-block;height:44px;line-height:44px;text-align:center;text-decoration:none;width:100%;border-left: 1px solid #b8b8b8" >按鈕</a>\
24                     </div>\
25                 </div>\
26             </div>'
27     };
28 
29     $.fn[__INFO__.plug] = $[__INFO__.plug] = function(options){
30         var settings = $.extend({},defaults,options);
31 
32         //初始化
33         var initDOM = function(conf){
34             if(conf) settings = $.extend({},settings,conf);
35             //獲取元素
36             var $mask = $(settings.htmls).appendTo(document.body);
37             var $main = $mask.children("#jqurey_dn_dialog_main");
38             var $title = $main.children("#jqdndialog_title");
39             var $tips = $main.children("#jqdndialog_tips");
40             var $txt = $main.find("#jqdndialog_txt");
41             var $ok = $main.find("#jqdndialog_button a:first");
42             var $cancel = $main.find("#jqdndialog_button a:last");
43             //賦值
44             $title.html(settings.title);
45             $tips.html(settings.tips);
46             if(settings.txt === null){
47                 $txt.hide();
48             }else{
49                 $txt.val(settings.txt).focus();
50             }
51             
52             $ok.html(settings.ok);
53             if(settings.cancel){
54                 $cancel.html(settings.cancel);
55             }else{
56                 $cancel.hide();
57             }
58 
59             $main.find("#jqdndialog_button a").bind("touchstart click",function(e){
60                 console.log(e.type);
61                 e.preventDefault();
62                 e.stopPropagation();
63                 var res = {result:$(this).text()};
64                 if(settings.txt !== null) res.texts = $txt.val();
65 
66                 if(settings.callback) settings.callback(res);
67                 $mask.remove();
68 
69             }).hover(function(){
70                 $(this).css("background","#d2d2d2");
71             }, function(){
72                 $(this).css("background","transparent");
73             });
74         };
75 
76         this.bind("touchstart click",function(e){
77             e.preventDefault();
78             e.stopPropagation();
79             initDOM();
80         });
81 
82         if($.isFunction(this)) initDOM();
83         this.showSpwialog  = function(options){
84             initDOM(options);
85         }
86 
87         return this;
88     };
89 })(jQuery);