【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>
演示请查看RunJS:
http://sandbox.runjs.cn/show/us82aiml
需要完成的功能点包括:
- 不同页面,tab数是不固定的,所以每个tab的宽度需要自适应,比如2个时各占1/2,3个时1/3,四个时1/4,默认是1/3。tab数超出4个时,会折行显示。这个是通过“元素范围选择器”来实现的,即综合利用
nth-child
、nth-last-child
、first-child
、last-child
来组合实现。 - tab之间,可能有分界线。如果通过margin实现,很容易导致不合理的折行,因此利用border模拟分隔符的效果。此时需要设置盒模型为border-box,并且不支持完全透明效果。
- 屏幕向下滚动足够距离时,自动吸附到顶部(固定定位)。通过
fixed
样式实现。 - 固定定位状态下,导航栏可以“变身”为另一种形式,也可以不变。通过
fixed+multi
组合样式实现。 - 变身模式下,支持折叠和展开效果。通过
fixed+fold
组合实现。 - 变身模式下,展开层的tab列表和原本的tab列表是一一对应的,只是样式不同。通过初始化时复制一份拷贝,外加独立
multi
样式重定义实现。 - 切换tab时,需要保持两个列表状态同步更新。通过类似于
jQuery.index()
方法检索当前tab的顺序。
需要达成的目标是:
- DOM结构尽可能简单明晰。
- 展开、折叠、变形都通过CSS定义,JS仅仅需要在合适的时机添加或删除一个
class
。 - 通过细粒度的样式定义,方便各个页面自定义视觉效果。
最后,不得不说,css3的伪类,太强大了!
参考链接:
- http://www.w3cplus.com/css3/using-css-mod-queries-with-range-selectors.html
- http://alistapart.com/article/quantity-queries-for-css
来源:oschina
链接:https://my.oschina.net/u/2324376/blog/790024