你的位置:快乐忆站 \ 前端 \ 文章正文

主题效果之关闭边栏

今天实验室回来早,就折腾一下文章吧。话说实验初期设计阶段已经结束,明天进入正式的实验阶段,哈哈~前两天折腾出嵌套评论,结果貌似有点悲剧,在IE6下显示有点问题,而且很大,很麻烦,很囧啊,不想管IE6了,就这样吧,小松在这里劝所有还在用IE6的访客:该升级了,至少得用IE7或8了呀,不然你就OUT了!昨天从奇遇那得知emlog4.0极有可能将嵌套评论加入,哈哈,那样就不用这么麻烦自己折腾了,万岁!

接下来是折腾了,大家准备好了吗?

jQuery代码:(代码仅适用于《clean》主题,其他需相应的修改)

$(function(){
(function(){
    function SetCookie(c_name,value,expiredays){
        var exdate=new Date();
        exdate.setTime(exdate.getTime()+expiredays*24*3600*1000);
        document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString())+";path=/";
    }
    window['RootCookies'] = {};
    window['RootCookies']['SetCookie'] = SetCookie;
})(); //设置cookie的函数
$('.close-sidebar a').click(function(){
    RootCookies.SetCookie('show_sidebar', 'no', 30);
    $('.close-sidebar').hide();
    $('.show-sidebar').show();
    $('#contentA').hide();
    $('#holder,#page').animate({width: "720px"}, 800);
    $('#contentB').animate({width: "700px"}, 800);
});//隐藏边栏按钮 
$('.show-sidebar a').click(function(){
    RootCookies.SetCookie('show_sidebar', 'no', -1);
    $('.show-sidebar').hide();
    $('.close-sidebar').show();
    $('#holder,#page').animate({width: "960px"}, 800);
    $('#contentB').animate({width: "620px"}, 800, function(){
    $('#contentA').show();
    });
}); //显示边栏按钮
})

打开模板的header.php,在</head>前加入如下代码:(代码仅适用于《clean》主题,其他需相应的修改)

<?php if($_COOKIE['show_sidebar']=='no'):?>
<style type="text/css">
#holder,#page{width:720px}
#contentB{width:700px}
#contentA{display:none}
</style>
<?php endif;?>

接下来打开模板的某一文件(加在不同的地方则按钮显示在不同地方,请自行确定),在你想要添加关闭边栏和现实边栏按钮的地方加入如下代码:

<div class="close-show-sidebar">
<?php if(!$_COOKIE['show_sidebar']=='no'):?>
<span class="close-sidebar"><a href="javascript:void(0);">关闭边栏</a></span>
<span class="show-sidebar" style="display:none"><a href="javascript:void(0);">显示边栏</a></span>
<?php else: ?>
<span class="close-sidebar" style="display:none"><a href="javascript:void(0);">关闭边栏</a></span>
<span class="show-sidebar"><a href="javascript:void(0);">显示边栏</a></span>
<?php endif;?>
</div>

方法比较复杂,代码比较冗长,时间比较仓促,我也只能先写这些了,有时间慢慢优化吧~基本功能已经能实现了。本想考虑用jQuery的“toggle”,不过貌似这个方法有时候会失灵,可能是我的问题吧,下次再测试下看看吧~

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 35#
    木本无心
    木本无心 2010-12-12 10:59 回复
    该死的垃圾又来骚扰我们小松了。
  2. 34#
    nfl jersey
    nfl jersey 2010-10-14 11:12 回复
    哈哈哈
  3. 33#
    小邪
    小邪 2010-10-11 04:11 回复
    嘿嘿,提个建议 ~
    给你的class="location"里面的效果加一个等待时间吧 ~
    要是一定时间内显示不了,就显示个类似twitter is down的内容 ~
    不然页面显示不全 ~
    看不了你牛逼的主题,很杯具啊 ~
    小松
    小松 2010-10-11 09:25 回复
    下午回来再弄了~
  4. 32#
    老实人博客
    老实人博客 2010-10-10 19:33 回复
    小松真能折腾。折腾出学问呀。
    小松
    小松 2010-10-10 19:41 回复
    会折腾确实学会了很多很多~
  5. 31#
    joyla
    joyla 2010-10-10 17:20 回复
    哈哈 我来测试嵌套评论的!呵呵!
    小松
    小松 2010-10-10 18:30 回复
    这样怎么测试啊?
    小子
    小子 2010-10-10 18:49 回复
    我来测试吧~
    小松
    小松 2010-10-10 18:54 回复
    你这网址能换一个不?
    joyla
    joyla 2010-10-11 09:22 回复
    你的邮件自动打开IE  IE下面又不能评论!
    小松
    小松 2010-10-11 09:24 回复
    这个我就不知道了,可能因为你默认浏览器是IE吧,所以邮件默认是以IE打开的
  6. 30#
    Ray Chow
    Ray Chow 2010-10-10 16:27 回复
    关闭边栏的动作蛮大的
    小松
    小松 2010-10-10 16:47 回复
    呵呵,确实蛮大的,一起动的东西比较多~
  7. 29#
    软件盒子
    软件盒子 2010-10-10 14:58 回复
    能半闭侧栏的效果很炫
    小松
    小松 2010-10-10 16:49 回复
    呵呵,这个是从别人那偷来的啦~
  8. 28#
    时时彩平台
    时时彩平台 2010-10-10 12:49 回复
    很实用的代码  收藏啦!
    小松
    小松 2010-10-10 13:06 回复
    测试一下~
  9. 27#
    dengmin
    dengmin 2010-10-10 10:32 回复
    js被你玩的出神入化了
    小松
    小松 2010-10-10 12:09 回复
    我只会一点点jQuery~
  10. 26#
    yesureadmin
    yesureadmin 2010-10-10 09:23 回复
    这功能还是非常值得推荐的!
    小松
    小松 2010-10-10 12:09 回复
    还是看个人需要吧,喜欢折腾的可以边折腾边学习~
1 2 3 4

随机日志:

推荐日志:

彩色标签:

sitemap