動手寫乙個jquery外掛程式實踐

目錄結構：index.html,index.css以及tab.js

首先搭建乙個jquery外掛程式的框架

tab.js

;(function ($) 
tab.prototype = 
window.tab = tab
}(jquery))

index.html 裡呼叫tab建構函式

然後我們先配置一些預設引數

tab.js

```
var tab = function (target) 
}```

使用者(使用者)配置引數的方法

預設引數配置好以後，我們需要獲取使用者的配置引數，

函式傳參的方式大家應該都很熟悉了，在這裡我們不用傳參的方式獲取，我們採用設定dom屬性的方式設定引數。這種配置方法很常見，比如element-ui

index.html

img*4

在最外層的div即我們選中的dom節點上設定了乙個名為config的屬性，config的值為一串json

這樣子我們就設定了引數，那麼怎麼獲取呢？我們寫乙個函式來獲取

獲取使用者的配置引數

tab.js

tab.prototype = else
},}

函式我們寫在tab.prototype{}裡，這裡的邏輯是：

1、attr()獲取我們在dom節點裡的配置引數

2、如果有的話就將我們獲取到的值轉換為js物件，沒有的話就返回null

這裡要注意的是我們的宿主dom，即我們在呼叫 new tab('#box1')傳入的物件要用jquery包裹一下，這樣才能正常獲取到該節點，因為我傳入的僅僅是宿主dom的id，當然也可以在呼叫時直接將這個id包裝一下，在這裡就可以省去這一步而直接使用傳過來的物件。

index.html

引數處理

在解決了使用者引數配置的問題後，我們就要處理引數了

tab.js

var tab = function (target) 
}

這裡用到$.exten的()方法,如果有使用者的配置引數則會追加修改this.config，如果使用者沒有配置引數，那麼程式就會使用我們的預設引數

獲取具體節點

tab.js / var tab = function (){}

this.tabitems = $(this.target).find(".title ul.tab-list li")
this.contentitems = $(this.target).find(".content img")

為每個tab標籤頁繫結節點

tab.js / var tab = function (){}

var config = this.config
//繫結滑鼠互動事件
if(config.tiggertype==="click"))
}else if(config.tiggertype==="click"||config.tiggertype!=="click"))
}/* this.tabitems.bind(config.tiggertype,function () )*/

1、在config配置裡獲取到滑鼠互動的方式，我在這裡寫了'click'和'mouseover'兩種，並且考慮到使用者配置引數時可能會寫錯所以在else if 判定了一下，如果使用者寫錯了那麼預設的互動方式是mouseover

2、當然也可以向***注釋的那樣直接繫結引數裡的方法,然後你們可以自己加一些錯誤提示什麼的

3、在繫結了互動方式後呼叫改變tab 樣式的函式changestyle()

我們給每個tab節點繫結了互動事件，在事件觸發後就呼叫changestyle()函式來該變tab標籤的樣式

該變tab選中的樣式

tab.js / tab.prototype={}

changestyle:function (currenttab) else
}

1、我們在呼叫的時候將目標節點傳參傳進來了

2、index()方法獲取當前索引，用與匹配下面的content內容區

3、去配置引數裡找有沒有配置切換效果，這裡我只配置看一種淡入淡出效果，如果有的話則淡入淡出的切換，如果沒有配置切換方式，那麼就是預設引數null則直接切換無效果

4、在給標籤頁addclss()新增選中狀態的同時，要將其它非選中狀態標籤頁的樣式清除

配置元件初始化時預設顯示的標籤頁

tab.js / var tab = function (){}

//預設顯示的tab
if(config.default<=this.tabitems.length) else

拿到引數裡的default之後走一遍changestyle()流程這樣就完成了預設標籤頁的設定

這裡要注意的就是因為陣列是從0開始的，但我們的習慣是從1開始，配置的時候想要第幾個標籤頁預設顯示就用第幾個，所以實際上這裡選中標籤頁時要將default-1

我在配置引數裡有寫，auto這個引數，本來是想寫自動切換這個功能的，但因為我在之前寫物件導向tab標籤頁時已經寫過了，這裡寫的有點煩就不寫了，無非就是加個定時器

終於走到了最後一步，將我們寫的建構函式註冊為jquery方法

之前我們使用方法是new 乙個新物件

tab.js / var tab = function (){}

$.fn.extend(
})

這樣子註冊一下，我們就可以按照jquery的方法去操作這個元件了

index.html

動手寫乙個jquery外掛程式實踐

動手寫乙個jquery外掛程式實踐

動手寫乙個阻塞佇列

Spring Boot 動手寫乙個 Start

動手寫乙個jquery外掛程式 實踐

動手寫乙個jquery外掛程式 實踐

動手寫乙個阻塞佇列

Spring Boot 動手寫乙個 Start

相關推薦

動手寫乙個jquery外掛程式實踐

動手寫乙個jquery外掛程式實踐