動態選項卡的效果

日常常常看到的是靜態的選項卡，也就是一開始選項數量固定。可是也有一些場合，好比：相似sublime的編輯器，能夠同時打開多篇文章，就用到了動態選項卡。

圖示以下：

 

動態選項卡是基於靜態選項卡基礎之上，因此要實現動態，得先實現靜態。

因此本視頻中，首先用一半左右的時間來詳細的分析靜態選項卡的實現過程和遇到的各類問題以及解決方案，而後將其動態化。

 

靜態選項卡的實現過程當中，除了實現普通的切換效果以外，還增長了淡入淡出的實現方案。

 

動態選項卡中遇到的難點有：

1：動態添加選項；

2：刪除選項；

3：動態綁定事件，也就是後續新增的選項一樣具備以前已經存在的選項的功能！

 

動態選項卡效果以下：

一開始，默認3個選項：

具體有基本的選項卡功能，如切換到「文章2」：

 

添加新文章功能測試：

點擊添加以後：

再點添加：

 

對於新添加的選項，一樣有切換功能：如：切換到「文章4」

 

同時又伴隨着擁有刪除功能，如刪除「文章2」

 

相關源代碼截圖

 

所有源代碼刊登太麻煩，請到這裏來看吧。

http://www.phpkhbd.com/note/93/2907

 

全程配套視頻（2018年6月27日錄製）：

http://www.phpkhbd.com/v/348

 

視頻中實現了動態選項卡的基本行爲，但還有不少能夠改進的地方，如：

增長選項太多了，可讓選項收縮起來...

讓選項頭部邊緣有相似sublime波浪形式的平滑...