2007-04-21

新版bloger模板设置[3]

这两天才发现新的bloger模板中有一个“Lables”模块,实现的就是那些分类的功能。
不过如果你的Bloger中有很多Lables的话,会出现一大版……影响美观啊~
于是我小改一下(添加 显示/隐藏 功能):
修改后Lables模块如下:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2 onclick="NodeExpand('lable_list');" style="cursor:pointer;"><span id="mk1">&gt;</span><span id="mk2" style="display:none;">V</span> <data:title/></h2>
</b:if>
<div class='widget-content' id="lable_list" style="display:none;">
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

还要在Bloger的模板中添加一个Javascript模块,添加内容如下:
<script language=javascript type=text/javascript>
function NodeExpand(divName) {
objDiv = document.getElementById(divName);
objMark1 = this.document.getElementById('mk1');
objMark2 = this.document.getElementById('mk2');
if (objDiv) {
if (objDiv.style.display == "block") {
objDiv.style.display = "none";
objMark1.style.display = "";
objMark2.style.display = "none";
} else {
objDiv.style.display = "block";
objMark1.style.display = "none";
objMark2.style.display = "";
}
}
}
</script>


还有怎么让那些labels不要显示在一条长列里面呢,模板中添加如下style:
#lable_list ul{list-style:none;}
#lable_list li{float:left;width:100px;}

规定lable_list中每列只占用100px宽,以及横向排列。


BTW: 开始那个手形光标把我搞晕了,很久以前记得应该是 cursor:hand; 的,结果这样竟然无效!?
后来google了才发现原来 hand 是M$的标准,W3C 标准应该用 cursor:pointer; !!
(哎~ M$ 太恶劣了,毒害了一代人啊!)
//EOF

0 comments: