jQuery外掛程式學習筆記

標籤：div2   系統   jquery   xtend   option   hit   引用   html   效率   

近期在研究jQuery外掛程式，外掛程式編寫的目的是給已經有的一系列方法或函數做一個封裝，以便在其它地方反覆使用，方便後期維護。 

JQuery除了提供一個簡單、有效方式進行管理元素以及指令碼，它還還提供了例外一種機制：即給核心模組添加自己的方法和額外的功能。通過這樣的機制，Jquery同意我們自己建立屬於我們自己的外掛程式，提高我們在開發過程中的效率。

儘管在jQuery命名空間中，我們禁止使用了大量的javaScript函數名和變數名。可是仍然不可避免某些函數或變數名將於其它jQuery外掛程式衝突。因此我們習慣將一些方法封裝到還有一個自己定義的命名空間。 

第一個示範範例：

1.外掛程式檔案 MyFirstPlugin.js

註：用$.extend()把預設值和使用者傳進來的值是聯合在一起，這樣子的話，就把使用者自己定義的值覆蓋了預設使用者的值。假設使用者沒定義值，就用系統自己定義的。

   this.each(function () { 這個前面加了一個 return。這樣就實現了我們的鏈式操作。 

(function ($) {    $.fn.textHover = function (options) {        var defaultVal = {            Text: ‘滑鼠懸浮事件‘,            ForeColor: ‘red‘,            BackColor: ‘#B9FDD8‘        };        //預設值        var obj = $.extend(defaultVal, options);        return this.each(function () {            var selObject = $(this);  //擷取當前對象            var oldText = selObject.text();  //擷取當前對象的Text            var oldBgColor = selObject.css("background-color"); //擷取當前對象的背景色             var oldColor = selObject.css("color"); //擷取當前對象的字型的顏色             selObject.hover(            function () {                selObject.text(obj.Text);  //進行賦值                selObject.css("background-color", obj.BackColor);                selObject.css("color", obj.ForeColor);             },            function () {                selObject.text(oldText);                selObject.css("background-color", oldBgColor);                selObject.css("color", oldColor);            }            );        });    }})(jQuery);

2.前台HTML代碼

<form id="form1" action="#">        <div id="div1" style="width: 400px; height: 150px; background-color: #B9FDD8;">            Hello world</div>        <br />        <div id="div2" class="textBar" style="width: 200px; height: 150px; background-color:#F0FBFF;float:left; border:1px solid gray;">            哈哈  我是第二個 DIV        </div>        <div id="div3" class="textBar" style="width: 200px; height: 150px; background-color:#EDEAFF;float:left; border:1px solid gray; margin-left:2px;">            哈哈  我是第三個 DIV        </div></form>

3.JS代碼

3.1匯入jQuery庫檔案

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    <!--jQuery檔案必須放在自己定義外掛程式的前面！防止自己定義外掛程式引用對象時報錯。-->

<script src="MyScripts/MyFirstPlugin.js" type="text/javascript"></script>

3.2 JS代碼

<script type="text/javascript">        $(function () {            $(‘#div1‘).textHover({                Text: ‘滑鼠懸浮在第一個 DIV 上面。。。‘,                ForeColor: ‘yellow‘,                BackColor: ‘Red‘            });            $(‘#div2‘).textHover({ Text: ‘我是第二個 DIV 。。。‘ });            $("#div3").textHover({ Text: ‘我是第三個 DIV 。
。。
‘ }).css("background-color", "#B1B0FE");  //初次載入的時候  給出改變其顏色        });</script>

OK，到這裡，一個簡單的外掛程式就完畢了。

jQuery外掛程式學習筆記