Life Journal

随笔,及其他

我是 Xiao Xiao,在日本的产品经理,偶尔也写代码,iOS/Mac/Web,偶尔也做设计,爱用 Sketch,偶尔写文字,存在这里。


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

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

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

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

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

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

[?](http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples "WP-CodeBox HowTo?")Download [script.js](http://xiaolife.com/wordpress/wp-content/plugins/wp-codebox/wp-codebox.php?p=83&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 =trueif(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.keyCode13)keySubmit();elseif(e.altKey&& e.keyCode83) keySubmit();}function keydown(){if(event.ctrlKey&& window.event.keyCode13)keySubmit();elseif(event.altKey&& window.event.keyCode83)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部分添加这么一句话:
[?](http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples "WP-CodeBox HowTo?")[View Code](javascript:;) HTML
1
3、将下面这段代码添加到sidebar.php中,添加的时候要确保写在了id=sidebar的层中(虽然根据测试,不写也没什么关系)
[?](http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples "WP-CodeBox HowTo?")[View Code](javascript:;) HTML
1 2 3 4 5 6 7 8

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

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

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