动态选项卡的效果

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/3412071/blog/1837217