参考cbmland实现的侧边栏滑动模块 « 晓 - Life Journal

参考cbmland实现的侧边栏滑动模块

考虑到博客主题使用到CSS3.0标准中的圆角啊之类的东西,以及大量的透明效果的使用,IE下本站的显示效果非常惨淡,所以之前特意写了个浏览提示放在侧边栏。写的时候想到哪儿写到哪儿,不留神写了一大串。预览一看占掉了大半个侧边栏。遂而精简精简,到几十个字再精简不能,仍旧嫌多。苦于没有良方。

前几天路过cbm的站点cbm's land,偶然发现侧边栏区域里rss订阅块的自动伸缩效果不错——默认只显示两行,当鼠标移至框块上方时则块下边缘下滑,露出藏着的四行链接——很好的解决了侧边栏内容过多的问题,而且动态效果非常令人满意。于是偶决定把它迁移过来。

迁移的过程中遇到很多问题,起先是不知道原页面是如何调用js函数的(后来在MSN上问cbm得知是通过page_load()实现绑定),随后又发现原代码里的实现方式并不适合我的主题——原代码里是让要隐藏的块高度为0,使得下面的内容上浮,并且用背景色遮住隐藏块的内容,而我的主题里,所有内容的背景都是透明的,上下无法遮挡只能重叠在一起显示——于是略加修改,让要隐藏的块的visibility属性也参与了进来(缺点是滑动效果不如从前),当然最大的问题是:偶不太懂js代码。。。

无论如何,这些困难算是克服过去了。下面给出最终的实现方法:

1、script.js文件一只:用于存放所有js代码,放置于当前主题文件夹下。

?Download script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/* 原作者cbm */
function $(t){return _.getElementById(t);}
//初始化入口
function pageInit(){
}
/* Syn 动画的处理区块 */
function Syn_mouseover(){
	Syn_mouseouted = false
	clearTimeout(zoomOut_inter)
	if(pageOnLoad){
		Syn_zoomIn();
	}
}
function Syn_mouseout(){
	Syn_mouseouted = true
	if(tween_opened){
		zoomOut_inter = setTimeout(Syn_zoomOut,800)
	}
}
function Syn_zoomIn(){
	if(!tween_started && !tween_opened){
		z=setInterval(Syn_zoomIn_tween,10);
		tween_started=true;
	}
}
function Syn_zoomOut(){
	if(!tween_started && tween_opened){
		z=setInterval(Syn_zoomOut_tween,10);
		tween_started=true;
	}
}
function Syn_zoomIn_tween(){
	height+=Math.round((zoomInHeight-height)*.3);
	if(height>=zoomInHeight-1){
		height=zoomInHeight;
		feeds.style.visibility="visible";
		clearInterval(z);
		tween_started=false;
		tween_opened=true;
 
		var h = parseInt($('sidebar').lastChild.style.height)
		if((h-zoomInHeight)>0){
			$('sidebar').lastChild.style.height = (h-zoomInHeight)+'px'
			zoomInFix = true
		}
		if(Syn_mouseouted){Syn_mouseout()}
	}
	feeds.style.height=height+'px';
}
function Syn_zoomOut_tween(){
	height-=Math.round((height-zoomOutHeight)*.3);
	if(height-1<=zoomOutHeight){
		height=zoomOutHeight;
		clearInterval(z);
		tween_started=false;
		tween_opened=false;
 
		var h = parseInt($('sidebar').lastChild.style.height)
		if(zoomInFix)$('sidebar').lastChild.style.height = (h+zoomInHeight)+'px'
 
	}
	feeds.style.height=height+'px';
	feeds.style.visibility="hidden";
}
//隐藏欢迎信息
function hide_refer_info(){
	hide_target($('refer_info'))
}
function hide_target(target){
	target.style.visibility='hidden'
}
/* 键盘处理 */
function ffdoc_keydown(e){
  if(e.ctrlKey && e.keyCode == 13)keySubmit();
  else if(e.altKey && e.keyCode == 83) keySubmit();
}
function keydown(){
  if(event.ctrlKey && window.event.keyCode == 13)keySubmit();
  else if(event.altKey && window.event.keyCode == 83)keySubmit();
}
/* 鼠标处理 */
function ffdoc_click(e){
	if(e.button==0){
		onclick(e.target)
	}
}
function doc_click (e){  
	e = event || e; e=e.srcElement ;
	onclick(e)
}
 
//其他对象的事件绑定和处理
function page_onload(){
	pageOnLoad=true;
 
	pageInit()
 
	feeds=$('feeds');
	feeds.style.height=height+'px';
	feeds.style.visibility="hidden";
	//订阅区块
	if(t=$('Syn')){
		t.onmouseover = Syn_mouseover;
		t.onmouseout = Syn_mouseout;
	}
 
}
/* 全局变量声明 */
var _ = document;
var height=0;
var zoomInHeight=191;
var zoomOutHeight=0;
var noError = true; //表单错误
var hasHide=true;
var pageOnLoad=false;
var tween_started=false;
var tween_opened=false;
var end,val,zoomInFix,Syn_mouseouted;
var sidebar_inter,tag_inter,zoomOut_inter,scrollToCommInter;
var sidebarEnd,tag_v;
var t,feeds,tweenDIV;
var b,ver;
var ua = navigator.userAgent;
 
//绑定页面加载完成事件调用函数
window.onload=page_onload;  
 
//监听鼠标键盘事件
if(_.addEventListener){
	_.addEventListener("click",ffdoc_click,false);
	_.addEventListener("keydown",ffdoc_keydown,false);
}else{
	_.onclick = doc_click;
	_.onkeydown = keydown
}
//调试用函数
function watchObj(obj){
	var s='';
		for(var i in obj){
			s+=i+'="'+obj[i]+'" ';
		}
	return s;
}
 
///初始化入口
pageInit();

2、修改主题的header.php,在head部分添加这么一句话:

1
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script.js"></script>

3、将下面这段代码添加到sidebar.php中,添加的时候要确保写在了id=sidebar的层中(虽然根据测试,不写也没什么关系)

1
2
3
4
5
6
7
8
<div id="Syn">
<ul>
<!-- 此处放置显示层的内容 -->
</ul>
<div id="feeds" style="height: 0px; visibility: hidden;">
<!-- 此处放置隐藏层的内容 -->
</div>
</div>

如果怕手动更改PHP,可以在widget里添加一个文本widget,将上述代码复制进去也行。

其实script.js放在哪里无所谓,如果主题里已经有同名文件了,改个名称就好,当然,第二步里的代码里的文件名称也得改啦。

经过这么一番折腾之后,觉得应该把这个东西做成插件。那样使用就方便多了。无奈个人毫无wordpress插件开发经验——说一点不会也不为过。所以这几天正努力折腾,争取弄成一个像样的插件!

Sid 晓 星期六, 十一月 1st, 2008 11:47 下午 GMT +8
  1. 醉倚西风

    侧边栏的Top Friends好邪恶
    我做完刚更新的
    竟然显示我是一个月前更新的

    星期日, 十一月 2nd, 2008 12:14 下午 GMT +8
    • 晓晓

      早先我就和你提过这事,你没放在心上——貌似你的rss里读不出时间。。。

      星期日, 十一月 2nd, 2008 12:25 下午 GMT +8
  2. super37

    效果很酷,不过我觉得浏览提示的话,很少有人会知道要把鼠标移到那里去吧~

    星期日, 十一月 2nd, 2008 10:09 下午 GMT +8
    • 晓晓

      确实,偶也在考虑这个问题,比如在“浏览提示”周围加上指示箭头?不过某种意义上来看,那样就破坏侧边栏整体的一致风格了。。。哎。。。很苦恼呃。。。

      如果能做成自定义的插件的话,实现其他的功能还是很合适的嘛。。。。o(∩_∩)o...

      星期日, 十一月 2nd, 2008 10:13 下午 GMT +8
And a comment!
Your name
Your mail (will not be published)
Your website