标签: 侧边栏

“关闭/显示侧边栏”完美终结版

8 五月, 2010

之前文章《”关闭/显示侧边栏”最简代码版》,先来看看其中的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);
 
});

这段代码有个小小不完美的地方的,其实也有多个留心的童鞋发现并向我反馈过:

当点击“显示侧边栏”时,浏览器右侧的滚动条“急剧变化”,若侧边栏比较长更是明显……

“关闭/显示侧边栏”最简代码版

6 十二月, 2009

之前分享过《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侧边栏

2 十一月, 2009

这回标题说得很清楚了,就是利用 jQuery 在 WordPress 上的一个应用,什么应用呢?就是关闭或者显示侧边栏。(点击此页面导航最右边,试一试?)

csidebar_01.jpg csidebar_02.jpg

默认显示侧边栏,点击导航最右的“关闭侧边栏”,右侧侧边栏消失,左侧文章主体部分完全显示,并且导航内的文字变为“显示侧边栏”,点击则过程相反。整体效果明显,就是在IE下,经过这样过程后侧边栏内的文字杯具了……

关于 WordPress 侧边栏的种种

15 七月, 2009

几天前正式发布了WordPress主题:Simple-Lines ,为使主题简洁侧边栏也完全采用原生的后台小工具,但问题随之而来,小工具的功能太少了,完全不能满足各位童鞋的需要,侧边栏就显得有点单薄了。下面,木木童鞋就结合上篇文章推荐的WordPress插件:WP Kit CN,尽可能得使侧边栏不再鸡肋,满足我们大众的需求。

首先简单说明一个问题:如何使后台小工具与手动在sidebar添加的功能同时显示于侧边栏?如何解决,其实很简单,不过此方法不能算完美,那就先来看看怎么个简单法吧~

cbl.jpg

WordPress 侧边栏加强插件:WP Kit CN

15 七月, 2009

此款插件制作目标是:让不懂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() 输出同一个分类下的文章