动态选项卡的效果

日常常常看到的是静态的选项卡，也就是一开始选项数量固定。可是也有一些场合，好比：相似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波浪形式的平滑...