2007年2月14日星期三

blogger 3.0:从Shalafi Vos那里学到的新技巧关于折叠侧边栏

其实是从咖啡鱼最早写的在侧边栏展开收缩项目变种而来。原来的hack只能控制单一的侧边栏收缩和关闭。

Shalafi Vos增强了这个hack,让侧边栏可以打开的同时关闭另外一个已经打开的侧边栏项目。其实不该叫侧边栏,是任何被赋予特殊ID的<div>里面的内容。题外话:

Shalafi Vos的新博客已经做好了,大家可以去吸收点作博客的灵感。

修正的JS脚本代码:


var firstwhichpost=null;

function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }

if(firstwhichpost==null){firstwhichpost=whichpost;}

if(firstwhichpost!=null&&firstwhichpost!=whichpost){
firstwhichpost.className="commenthidden";
firstwhichpost=whichpost;
}
}

替换这个脚本代码即可。

要吃年饭,先收笔……

等会还要写怎么把完整的页面元素替换成可以收缩的样式,就像我的标签页面元素和归档页面元素。

吃完饭了,继续写……表问我怎么吃了3个小时@_@!

就说折叠侧边栏还有台湾朋友的无需脚本方法,不过如果要折叠的东西多了就会显得代码格外的多,或者要像我博客这样产生联动效果也是不行的。

好继续说如何折叠整个侧边栏,举个一般的侧边栏代码为例:

<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><a aiotitle='点击展开' href='javascript:togglecomments("独一无二的ID")'><data:title/></a></h2>
</b:if>
<div class='commentshown' id='独一无二的ID'>
<div class='widget-content'>
<data:content/>
</div>

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

红色部分,是要添加的,注意结尾的</div>是放在 <b:include name='quickedit'/>之后。

<div class='commentshown' id='独一无二的ID'>是定位在<div class='widget-content'>之前。

独一无二的ID是指英文字母和数字的不重复组合。<a aiotitle='点击展开' href='javascript:togglecomments("独一无二的ID")'>就是指示展开有相应ID的div内部的东东~~

非折叠整个侧边栏就很简单了,直接把要折叠的东西放进<div class='commentshown' id='独一无二的ID'></div>之间即可。commentshown表示一开始是打开的,点击关闭。改成commenthidden则相反。

已经写的很傻瓜级别了,有什么不懂再问哈。大家一起学习。再次感谢Shalafi Vos的指导,当时搞不清楚div结尾放哪里,还是 Shalafi Vos亲自帮我改的……汗,丢人啊……

3 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆