JQuery實用技巧--學會你也是大神(1)——插件的制作技巧
前 言
JRedu
學習之前，首先我們需要知道什麽是JQuery?
JQuery是一個優秀的javascript框架。
JQuery是繼Prototype之後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。它是輕量級的js庫，這是其它的js庫所不及的，它兼容CSS3，還兼容各種常用瀏覽器。
JQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX交互。
JQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。JQuery能夠使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只需定義id即可。進行jQuery插件開發前，首先要知道兩個問題：什麽是jQuery插件？jQuery插件如何使用？ 第一個問題，jQuery插件就是用來擴展jQuery原型對象的一個方法，簡單來說就是jQuery插件是jQuery對象的一個方法。其實回答了第一個問題，也就知道第二個問題的答案了，jQuery插件的使用方式就是jQuery對象方法的調用。JQuery有著豐富的第三方的插件，例如：樹形菜單、日期控件、圖片切換插件、彈出窗口等等基本前臺頁面上的組件都有對應插件，並且用JQuery插件做出來的效果很炫，並且可以根據自己需要去改寫和封裝插件，簡單實用。
| 1、自定義插件的基礎知識 |
1.1 插件的分類
插件分為兩類。
一類叫做全局插件，另一種叫做局部插件。從名字我們就可以了解到兩者的區別。
全局插件是作用於整個文檔的插件。
局部插件是作用於某一塊區域的插件。
1.2插件的聲明和調用
1. 全局插件的聲明
$.extend({ func:function(){} // func-->插件名 })
調用方式和函數類似
$.func();
2. 局部插件的聲明
$.fn.func = function(){}
調用方式有所不同
$("選擇器").func();
| 2、 自定義插件的準備工作 |
2.1插件的功能介紹
該插件實現了Banner圖的滾動效果。
插件具有以下屬性：
images : 接受數組類型，數組的每個值應為對象。對象具有屬性： src->圖片的路徑 title->圖片指上後的文字 href->點擊圖片跳轉的頁面
scrollTime : 滾動時間，單位毫秒。 5000
bannerHeight : Banner圖的高度. 500px
iconColor : 提示圖標的顏色。默認 white
iconHoverColor : 提示圖標指上之後的顏色。 默認 orange
iconPosition : 提示圖標的位置，可選值left/center/right。 默認center
2.2基礎文件的準備
首先，我們需要新建一個HTML文件和一個JS文件。
然後將JS文件和JQuery文件導入進來。
然後新建一個空div。
<div id="banner">
</div>
用JQuery導入幾張圖片
<script type="text/javascript"> $("#banner").scrollBanner({ images : [ {src:"img/banner1.jpg",href:"http://www.baidu.com"}, {src:"img/banner2.jpg",href:"http://www.sina.com"}, {src:"img/banner3.jpg",href:"http://www.qq.com"}, {src:"img/banner4.jpg",href:"http://www.jredu100.com"}, ], }); </script>
這樣基本的準備工作就完成了，接下來就是插件的實現了。
| 3、 自定義插件的制作 |
3.1聲明屬性值
這是一個十分實用，使用起來也非常簡單的banner圖滾動插件。
首先創建一個作用於div的局部插件，然後設置屬性默認值
$.fn.scrollBanner = function(obj){ // 聲明各個屬性的默認值 var defaults = { images : [], scrollTime : 2000, bannerHeight : "500px", iconColor : "white", iconHoverColor : "orange", iconPosition : "center" } // 將默認值與傳入的對象比對，如果傳入的對象有未賦值屬性，則使用默認對象的屬性 obj = $.extend(defaults,obj);
}
後面的代碼全部寫入這個函數中。
3.2組建DOM布局
這是一個比較清晰的過程，直接用代碼展示給大家。
$("body").css({
"padding":"0px",
"margin" :"0px"
});
this.empty().append("<div class=‘scrollBanner-banner‘></div>");
$.each(obj.images,function(index,item){
$(".scrollBanner-banner").append("<div class=‘scrollBanner-bannerInner‘><a href=‘"+item.href+"‘ target=‘_black‘><img src=‘"+item.src+"‘ title=‘"+item.title+"‘ /></a></div>");
});
$(".scrollBanner-banner").append("<div class=‘scrollBanner-bannerInner‘><a href=‘"+obj.images[0].href+"‘ target=‘_black‘><img src=‘"+obj.images[0].src+"‘ title=‘"+obj.images[0].title+"‘ /></a></div>");
this.append("<div class=‘scrollBanner-icons‘></div>")
$.each(obj.images,function(index,item){
// data-*屬性 ：是H5允許用戶自行在HTML標簽上保存數據的屬性。
// 保存在data-*中的數據，可以使用JS讀取調用。
$(".scrollBanner-icons").append("<span data-index="+index+" class=‘scrollBanner-icon‘></span>");
});
$(".scrollBanner-icons").css({
"width":25*obj.images.length+"px",
"height":"5px",
"position":"absolute",
"bottom":"40px",
"left":"0px",
"z-index":"100",
});
switch(obj.iconPosition){
case "left":
$(".scrollBanner-icons").css({
"left":"50px",
});
break;
case "right":
$(".scrollBanner-icons").css({
"right":"50px",
});
break;
case "center":
$(".scrollBanner-icons").css({
"left":"50%",
"margin-left":"-"+12.5*obj.images.length+"px"
});
break;
}
$(".scrollBanner-icon").css({
"width":"15px",
"height":"5px",
"background-color":obj.iconColor,
"display":"inline-block",
"margin":"0px 5px",
});
3.3設置CSS的屬性
通過一段代碼，進行簡單的CSS設置。
this.css({ "width":"100%", "height":obj.bannerHeight, "overflow":"hidden", "position":"relative" }) $(".scrollBanner-banner").css({ "width":obj.images.length+1+"00%", "height":obj.bannerHeight, "transtition":"all .5s ease" }) $(".scrollBanner-bannerInner").css({ "width":100/(obj.images.length+1)+"%", "height":obj.bannerHeight, "overflow":"hidden", "float":"left" }) $(".scrollBanner-bannerInner img").css({ "width":"1920px", "height":obj.bannerHeight, "position":"relative", "left":"50%", "margin-left":"-960px" }) $(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor);
3.4實現banner圖的滾動
實現banner圖的不停滾動，基本原理是利用定時器。
然後不停改變最外面大div的margin-left屬性，改變顯示在屏幕上的圖片，再加上適當的動畫效果，形成滾動。
最後通過設定好的參數變量，修改滾動的速度。
同樣的，附上一段代碼。
var count=1; var icons = $(".scrollBanner-icon"); setInterval(function(){ $(".scrollBanner-banner").css({ "margin-left":"-"+count+"00%", "transition":"all .5s ease" }); $(".scrollBanner-icon").css("background-color", obj.iconColor); $(".scrollBanner-icon:eq("+count+")").css("background-color", obj.iconHoverColor); if (count>=obj.images.length){ $(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor); } if (count>obj.images.length) { count=0; $(".scrollBanner-banner").css({ "margin-left":"0px", "transition":"none" }); } count++; },obj.scrollTime);
這樣之後，banner圖就可以自動滾動了，可是一個只能不停滾動的banner圖，可能並不符合我們的預期。
我們更想要的是一個可以隨意切換自己想要的圖片的效果。
3.5實現圖片的自由切換
我們順帶做一個圖片指上導航小圖標，不僅切換圖片，還讓小圖標變色的效果。
原理如下：
// 小圖標指上以後變色並且切換banner圖 $(".scrollBanner-icon").mouseover(function(){ $(".scrollBanner-icon").css("background-color",obj.iconColor); // 由span觸發mouseover事件，則this指向這個span。 // 但是，這this是JS對象，必須使用$封裝成JQuery對象。 $(this).css("background-color",obj.iconHoverColor); var index = $(this).attr("data-index"); count = index; // 將計數器count修改為index的值，讓Banner滾動的定時器能夠剛好滾到所指圖片的下一張。 $(".scrollBanner-banner").css({ "transition":"none", "margin-left":"-"+index+"00%", }); })
這樣，一個非常好用的banner圖滾動插件就完成了。
當我們使用的時候，只需新建一個div，起好ID，然後用JS將需要滾動的圖片導入即可。
這便是制作一個小插件的基本原理和思路了，希望能幫助到一些初學者。
之後會陸續更新這一系列，給大家帶來更多的實用小技巧。
希望大家多多批評指正。
JQuery實用技巧--學會你也是大神(1)——插件的制作技巧