“解耦”的字符分隔tag
大概所有人都会接触到这样的设计：
于是逝去的日子里发生过类似下面的变迁：
-
有时它是静态的，我们会这样写：
<a href="#">音响</a> | <a href="#">课本</a> | <a href="#">西红柿</a>缺陷：内容动态修改非常麻烦、不便扩展。 -
相当长的一段时间里，变成了这样：
<style>缺陷：样式与程序耦合，可能前后端都要麻烦个遍。
li {float:left;padding:0 0 0 7px;margin:0 0 0 6px;background:url(竖线.gif) no-repeat}
.first {padding:0;margin:0;background:none}
</style>
<ul>
<li class="first"><a href="#">音响</a></li>
<li><a href="#">课本</a></li>
<li><a href="#">西红柿</a></li>
</ul> -
再后来开始利用overflow:hidden以及text-indent：
<style>缺陷：溢出隐藏，无法在<li>中放置其他元素，比如气泡、下拉菜单等等。
ul {overflow:hidden;text-indent:-13px}
li {display:inline-block;text-indent:0;padding:0 0 0 7px;margin:0 0 0 6px;background:url(竖线.gif) no-repeat 0}
</style>
<ul>
<li><a href="#">音响</a></li><li><a href="#">课本</a></li><li><a href="#">西红柿</a></li>
</ul>
最终的解决方案（简化）：
<style>
.noDis {display:none}
.tags {*zoom:1;display:block;text-align:left;_text-indent:0!important}
.tag {display:inline-block;*display:inline;*zoom:1;padding:0 0 0 5px;margin:0 0 0 5px;text-indent:0;_text-indent:-10px!important;white-space:nowrap; vertical-align:top;background:url(竖线.gif) no-repeat 0}
.tag a {text-indent:0!important}
.tag:first-child,
.tag[class~='noDis']:first-child + .tag {padding-left:0!important;margin-left:0!important;background-image:none!important}
</style>
<ul class="tags" onmouseover="this.firstChild.className='tag'">
<li class="tag noDis"><a href="#">音响</a></li><li class="tag"><a href="#">课本</a></li><li class="tag"><a href="#">西红柿</a></li>
</ul>
几点说明：
- 利用IE6的一个bug：父元素hasLayout、子元素position:static时，子元素溢出父元素不会被显示
- <ul>和<li>之间不能存在注释，IE7会把注释当作childNodes导致firstChild选择错误
- noDis是一个附加需求，即：鼠标滑过tags区域才显示“音响”，所以产生了一个问题：如果不将“音响”remove掉，那么浏览器仍然认为“音响”是tags的firstChild，这样“课本”的竖线仍然会显示，这不是我们想要的，还好除了IE6，多数浏览器都支持相邻选择器“+”，于是我们增加一条逻辑：“当firstChild的className包含noDis时，它的nextSibling同样隐藏竖线”
- 之所以ul、li都加上了className：tags、tag，是为了避免li中再出现ul、li，稍显冗余，可避免后患。
- 有一个小遗憾是竖线用了图片，不便换肤，但考虑到这样可以很方便地换成横线、点、虚线等乱七八糟的分隔符，这点牺牲还是值得的。
- IE7的firstChild有个bug：在静态firstChild前面插入新元素，IE7不会更新样式，此类需求很少，不管了
呼…… 世界和平。
Related posts: