封裝基於jq彈窗外掛程式

2022-04-01 22:21:08 字數 1925 閱讀 9752

相信碼友們對於$.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);

7var defaults =,

14 htmls:'\15\

16\17彈窗內容\18

\19\20

\21\22

按鈕\23

按鈕\24\25

\26'27

};28

29 $.fn[__info__.plug] = $[__info__.plug] = function

(options),defaults,options);

3132

//初始化

33var initdom = function

(conf),settings,conf);

35//

獲取元素

3637

var $main = $mask.children("#jqurey_dn_dialog_main");

38var $title = $main.children("#jqdndialog_title");

39var $tips = $main.children("#jqdndialog_tips");

40var $txt = $main.find("#jqdndialog_txt");

41var $ok = $main.find("#jqdndialog_button a:first");

42var $cancel = $main.find("#jqdndialog_button a:last");

43//

賦值44

$title.html(settings.title);

45$tips.html(settings.tips);

46if(settings.txt === null

)else

5152

$ok.html(settings.ok);

53if

(settings.cancel)else

5859 $main.find("#jqdndialog_button a").bind("touchstart click",function

(e);

64if(settings.txt !== null) res.texts =$txt.val();

6566

if(settings.callback) settings.callback(res);

67$mask.remove();

6869 }).hover(function

(), function

());

74};

7576

this.bind("touchstart click",function

(e));

8182

if($.isfunction(this

)) initdom();

83this.showspwialog = function

(options)

8687

return

this;88

};89 })(jquery);

JQ外掛程式封裝造輪子

檢視jq 發現好多方法都是使用 fn來封裝方法,但fn又是什麼,控制台console後發現都是jq的方法 prototype fn,結果為true prototype 可以為物件新增方法和屬性。這樣就可以理解為給jq原型新增方法及屬性。自己寫個小例子 1.實現字串轉int方法 同parseint h...

jq 外掛程式寫法

1.一次宣告乙個函式 fn.函式名 function options fn.red function options var settings extend defaults,options this.css settings return this 2.一次宣告多個函式 fn.extend fn....

vue彈窗外掛程式實戰

vue做移動端經常碰到彈窗的需求,這裡寫乙個功能簡單的vue彈窗 元件html結構,外層divposition fixed定位,內層div顯示彈窗內容 export default time data methods this.time hide popup.vue只有2個屬性 文字和顯示時間。元件...