關於jQuery寫外掛程式及其演示

2021-07-03 19:14:09 字數 3785 閱讀 2447

關於寫jquery外掛程式是很有必要的,這是前端學習當中必須經過的乙個過程

對於初次寫外掛程式先想清楚原理      

(function($) 

var options = $.extend(defaults, options); 

this.each(function()); 

}; })(jquery); 

這是乙個基礎的模板

其中的var options = $.extend(defaults, options); 

1.$.extend()方法

$.extend()方法在jquery中有兩個用法,第一次是擴充套件方法,

第二個方法是

jquery.extend([deep], target, object1, [objectn])

返回值:object

把2個物件合併得到新的target,deep是可選的(遞迴合併)

合併 settings 和 options,修改並返回 settings。

jquery **:

var settings = ;

var options = ;

jquery.extend(settings, options);

結果:
settings ==
描述:

合併 defaults 和 options, 不修改 defaults。

jquery **:

var empty = {};

var defaults = ;

var options = ;

var settings = jquery.extend(empty, defaults, options);

結果:
settings == 

empty ==

2中擴充套件:

第一種,看**

view source

print?

$(function()

}

//這裡是$.extend的第二種用法

var opts = $.extend({},defaults, options);

if($("#"+ opts.triggerid)[0] ==null) );

$("body"

}else)

}

}

});

$.modalshow();//這裡是呼叫的地方,id為'loginshow'的button可以先不再html中新增可以自動生成

})

第二種擴充套件

view source

print?

$(function()

}

//這裡是$.extend的第二種用法

var opts = $.extend(defaults, options);

$("#"+ opts.triggerid).bind("click",function() )

}

});

$("#loginshow").modalshow();//這裡是呼叫的地方,這裡需要先在html中加入元素

})

我在這裡寫了乙個比較完整的外掛程式是關於選項卡的

//這個是html檔案  我寫的外掛程式時引入的tab.js

aaabbb

ccc

//下面的是tab.js檔案注釋我寫的比前清楚了

/***

***/

;(function($)

var opts = $.extend(defaults, options),  //這裡面兩個引數的順序不能改變,因為後面的那個時不會被覆蓋掉的

//$.extend(defaults, options);表示的是如果options中的引數總是有值的話,那麼options中的值將會代替defaults中的值

//如果options引數傳入的值為空,那麼就可以使用預設設定的值。

self = $(this),  //獲取當前的tabs

items = self.children('ul.menu').children('li'),   //獲取上面的是那三個

tabbox = self.children('div.main'),  //獲取到了main這個節點

tabboxitems = tabbox.children('div'),  // 獲取mian下面的div

timer;   //設定了乙個定時器

var tabhandle = function(index),

delay = function(elem),opts.delaytime) :tabhandle(elem); 

},

start = function(),

var on = self.find('li.on'),    //獲取當前on所在的li

firstitem = items.eq(0),//設定預設第乙個li

len = items.length,  //

index = on.index()+1,

item = index ===len ? firstitem : on.next('li'),   //當前的索引如果等於li的總長度就返回預設的第乙個,如果不是就是下乙個

on.removeclass('on');    //移除當前li上面的樣式

item.addclass('on');  //把該選中的增加樣式

tabboxitems.siblings().hide().end().eq(index).show();  // 更換div中的內容  和tabhandle 執行一樣的操作

}

//bind() 方法為被選元素新增乙個或多個事件處理程式,並規定事件發生時執行的函式。

//第乙個引數傳遞事件,第二個引數還改事件對應的函式

items.bind(opts.operate, function () );

if (opts.auto) , function () )

}

})

}

})(jquery);

寫jquery外掛程式的思路

不要覺得寫外掛程式很難,只是你把問題想的太複雜了,本文教你在10分鐘內搞定乙個簡單的外掛程式。其實就是把一些常用 實用 通用的功能封裝起來而以,簡單的來講就是把這些 放在乙個方法裡面,可以達到重複使用的效果,這樣就可以不需要每次要用此功能的時候都去重新寫一遍。1.先定義乙個外掛程式 function...

jQuery外掛程式的怎麼寫

對於jquery之前一直用,也看到過別人寫的外掛程式,直到最近才想著學習怎麼寫自己的jquery外掛程式,今天看了網上的一些資料,發現其實很簡單的。先看乙個簡單的jquery外掛程式的例子 使用的時候要先導入jquery外掛程式,比如 p bold red 這樣p標籤內容就會變為紅色粗體。那麼,如何...

關於jQuery外掛程式中datatables的學習

reference function inittable ajax function data,callback,settings else columns data的名字和你返回引數裡面json裡的名字相對應,title相當於th,表頭這樣子的,class代表樣式。else return data...