今天簡(jiǎn)單說(shuō)說(shuō)JQuery插件的封裝。
- 首先上一份簡(jiǎn)單的模板
//傳進(jìn)來(lái)參數(shù)有window和document，如果插件用不上，可以不寫(xiě)。目的是為了快速查找window和document。
;(function($,window,document){
//設(shè)置插件的名字
var pluginName = "defaultPluginName";
//默認(rèn)參數(shù)配置項(xiàng)
var defaults = {
propertyName : "value"
}
//插件類的構(gòu)造方法
function Plugin(element,options){
//拿到dom元素，獲得對(duì)應(yīng)jq對(duì)象，要$(element)
this.element = element;
//覆蓋默認(rèn)配置項(xiàng)
this.options = $.extend({},defaults,options);
//緩存配置項(xiàng)
this._defaults = defaults;
//緩存插件名字（并沒(méi)神馬用）
this._name = pluginName;
//調(diào)用初始函數(shù)
this.init();
}
// 插件初始化函數(shù)
Plugin.prototype.init = function(){
//做你想做的事情
}
// 也可以這樣 能定義更多函數(shù)
Plugin.prototype = {
init: function () {
this.fun*(); // 這樣可以用來(lái)調(diào)用其他函數(shù)
}
fun1: function() { }
fun2: function() { }
.....
}
//fn就是prototype
$.fn[pluginName] = function(options){
//each表示對(duì)多個(gè)元素調(diào)用，用return 是為了返回this，進(jìn)行鏈?zhǔn)秸{(diào)用
return this.each(function(){
if(!$.data(this,'plugin_'+pluginName)){
//生成插件類實(shí)例。
$.data(this,'plugin_'+pluginName,new Plugin(this,options));
}
});
}
})(jQuery,window,document);
插件封裝中，需要注意的是this的使用。不多說(shuō)。通過(guò)上面的模板便能很輕松的封裝自己的插件啦~~~
- 然后上一份這是我自己寫(xiě)的輪播圖插件
使用方式 很簡(jiǎn)單的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/slider.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<title>輪播插件</title>
</head>
<body>
<div id="myDiv" style="margin-top: 50px; width: 90%; margin: 0 auto;">
<ul>
<li style="background-image: url('img/1.jpg');">
<!-- 添加想要的內(nèi)容 -->
</li>
<li style="background-image: url('img/2.jpg');">
<!-- 添加想要的內(nèi)容 -->
</li>
<li style="background-image: url('img/3.jpg');">
<!-- 添加想要的內(nèi)容 -->
</li>
<li style="background-image: url('img/4.jpg');">
<!-- 添加想要的內(nèi)容 -->
</li>
</ul>
</div>
<script type="text/javascript">
$('#myDiv').SliderImg(); // 通過(guò)id的必須的
//$('#myDiv').data('myDiv_SliderImg').ToggleImg(2);
</script>
</body>
</html>
將輪播圖當(dāng)做背景圖，可以繼續(xù)在輪播圖上添加需要的內(nèi)容。提供兩種輪播效果，淡入淡出和左右滑動(dòng)，默認(rèn)參數(shù)在插件中可以看到
var defaults = {
Type: 'default', // fade淡入淡出|default左右滾動(dòng)
ShowPrevNext: true, // 是否顯示下一個(gè)上一個(gè)
ShowBtn: true, // 是否顯示切換圓按鈕
BtnAlign: 'center', // 切換按鈕位置 left|center|right
AutoPlay: true, // 是否自動(dòng)滾動(dòng)
TimeOut: 5 // 自動(dòng)滾動(dòng)間隔時(shí)間
}
可以調(diào)用時(shí)通過(guò)以下方式自定義參數(shù)
$('#myDiv').SliderImg({
Type: 'fade'
});
通過(guò)data方法獲取到輪播插件對(duì)象，便可以通過(guò)該對(duì)象調(diào)用內(nèi)部方法。如下
$('#myDiv').data('myDiv_SliderImg').ToggleImg(2);
調(diào)用ToggleImg()方法切換到第三張圖。
該輪播插件使用方式就這樣，插件如何封裝就根據(jù)模板和這份插件便可以學(xué)會(huì)，很簡(jiǎn)單的。
