“关闭/显示侧边栏”完美终结版
之前文章《”关闭/显示侧边栏”最简代码版》,先来看看其中的jQuery代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $('#close-sidebar a').toggle(function(){ $(this).text("显示侧边栏"); $('#sidebar').hide(); $('#content').animate({width: "960px"}, 1000); },function(){ $(this).text("关闭侧边栏"); $('#sidebar').show(); $('#content').animate({width: "705px"}, 800); }); |
这段代码有个小小不完美的地方的,其实也有多个留心的童鞋发现并向我反馈过:
当点击“显示侧边栏”时,浏览器右侧的滚动条“急剧变化”,若侧边栏比较长更是明显……
“关闭/显示侧边栏”最简代码版
之前分享过《JQuery 学习笔记之:关闭/显示 WordPress侧边栏》,引燃了很多童鞋的折腾劲,不过代码稍微长了点。这次再次翻开《锋利的jQuery》这本书,突然想到新的代码:
<li id="close-sidebar"><a>干掉侧边栏</a></li> /* 可加在导航ul标签中 */
$('#close-sidebar a').toggle(function(){ //选中id="close-sidebar"内的a标签的内容,即“干掉侧边栏” $(this).text("显示侧边栏"); //点击此中内容后改变成“显示侧边栏” $('#sidebar').hide(); //隐藏id="sidebar"的内容,即“侧边栏” $('#content').animate({width: "960px"}, 1000); //让id="content",即主体部分的宽度伸长至960px,时间为1000毫秒 },function(){ $(this).text("关闭侧边栏"); //点击此中内容后改变成“关闭侧边栏” $('#sidebar').show(); //显示id="sidebar"的内容,即“侧边栏” $('#content').animate({width: "705px"}, 800); //让id="content",即主体部分的宽度缩至705px,时间为800毫秒 });
相比之前,代码逻辑更为清晰简洁!特此分享~
2010-5-8更新:《”关闭/显示侧边栏”完美终结版》
JQuery 学习笔记之:关闭/显示 WordPress侧边栏
这回标题说得很清楚了,就是利用 jQuery 在 WordPress 上的一个应用,什么应用呢?就是关闭或者显示侧边栏。(点击此页面导航最右边,试一试?)

默认显示侧边栏,点击导航最右的“关闭侧边栏”,右侧侧边栏消失,左侧文章主体部分完全显示,并且导航内的文字变为“显示侧边栏”,点击则过程相反。整体效果明显,就是在IE下,经过这样过程后侧边栏内的文字杯具了……
关于 WordPress 侧边栏的种种
几天前正式发布了WordPress主题:Simple-Lines ,为使主题简洁侧边栏也完全采用原生的后台小工具,但问题随之而来,小工具的功能太少了,完全不能满足各位童鞋的需要,侧边栏就显得有点单薄了。下面,木木童鞋就结合上篇文章推荐的WordPress插件:WP Kit CN,尽可能得使侧边栏不再鸡肋,满足我们大众的需求。
首先简单说明一个问题:如何使后台小工具与手动在sidebar添加的功能同时显示于侧边栏?如何解决,其实很简单,不过此方法不能算完美,那就先来看看怎么个简单法吧~

WordPress 侧边栏加强插件:WP Kit CN
此款插件制作目标是:让不懂PHP,不懂HTML的您,可以使用几乎全部的功能!
可使用函数:
wkc_recent_comments() 显示最新评论
wkc_recent_pings() 显示最新回响,包括pingback和trackback
wkc_recent_posts() 显示最新文章
wkc_most_commented_posts() 显示评论最多的文章
wkc_random_posts() 显示随机文章
wkc_most_active_commentors() 显示n天内,评论最多的用户
wkc_recent_commentors() 显示本周或者本月内评论最多的用户
wkc_related_posts() 显示相关文章
wkc_posts_in_the_same_categories() 输出同一个分类下的文章