平时经常看到的是静态的选项卡,也就是一开始选项数量固定。但是也有少量场合,比方:相似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波浪形式的平滑…
作者:谷应平
来源:灵感编程(www.phpkhbd.com),转载请注明来源。