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

主题效果之关闭边栏精简版

两天的时间真的很快,我折腾的速度已经跟不上这更新速度了,所以今天没什么新的东西折腾,只是完善了下上次的文章,精简了一部分代码,上次在文中最后也提到过jQuery的toggle方法,确实能使代码精简不少,今天下午做完实验就折腾了一下,然后自己博客也换上了最新的精简代码,效果还不错呢,欢迎大家测试。下面分享出代码:

jQuery代码:

$(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;
    })();
    $('#close-show-sidebar').toggle(function(){
        RootCookies.SetCookie('show_sidebar', 'no', 30);//cookie保存30天,可自行修改,下同
        $(this).html('显示边栏');
        $('#contentA').hide();
        $('#holder,#page').animate({width: "720px"}, 800);
        $('#contentB').animate({width: "700px"}, 800);},function(){
        RootCookies.SetCookie('show_sidebar', 'no', -1);
        $(this).html('关闭边栏');
        $('#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 id="close-show-sidebar">关闭边栏</div>

至此,代码精简完毕,和上一篇文章相比代码是不是精简了很多啊?哈哈,神奇的jQuery很给力哈~大家感兴趣的可以去查看下jQuery的api,对折腾有很大的帮助的~

此文存在bug,推荐使用上一篇文中的方法!

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 48#
    箴言
    箴言 2010-10-15 17:44 回复
    </head>  那个代码怎么修改,我貌似没用,回来在说,先去考试··
    小松
    小松 2010-10-15 18:07 回复
    @箴言:你当然没用,那是我模板特定的,你需要改成你模板对应的id才行
    箴言
    箴言 2010-10-15 20:52 回复
    @小松:ID在哪里找?
    小松
    小松 2010-10-15 20:54 回复
    @箴言:模板喽~
    箴言
    箴言 2010-10-15 21:38 回复
    @小松:问题是不知道在什么位置····
    小松
    小松 2010-10-15 21:39 回复
    @箴言:对比下我模板,然后找到你模板相应的div即可
    箴言
    箴言 2010-10-15 21:43 回复
    @小松:看不懂了,你帮我修改出来··
    小松
    小松 2010-10-15 21:47 回复
    @箴言:一个ID是main,一个ID是sidebar,对应起来就ok了
    箴言
    箴言 2010-10-15 21:52 回复
    @小松: 真看不懂···
  2. 47#
    zomten
    zomten 2010-10-15 03:09 回复
    试试我的头像,博主别见怪。
  3. 46#
    nfl jersey
    nfl jersey 2010-10-14 11:13 回复
    折腾吧
  4. 45#
    搜搜
    搜搜 2010-10-14 09:04 回复
    默认主题 jQuery代码 还要改,可是改好了,居然要还得改css好麻烦
    小松
    小松 2010-10-15 18:07 回复
    @搜搜:那必须的
  5. 44#
    山头人
    山头人 2010-10-13 22:17 回复
    为什么要把边栏关了啊。能加快速度?
    小松
    小松 2010-10-13 22:29 回复
    @山头人:不是,是为了耍酷
  6. 43#
    屠龙团队
    屠龙团队 2010-10-13 19:19 回复
    你的主页打广告多少钱?
    小松
    小松 2010-10-13 19:23 回复
    @屠龙团队:需要的话联系QQ:516041060
    小松
    小松 2010-10-13 19:23 回复
    @屠龙团队:错了,是516841060
  7. 42#
    朵未
    朵未 2010-10-13 14:40 回复
    我现在的主题没侧边栏。
    小松
    小松 2010-10-13 17:37 回复
    @朵未:呵呵,你现在的主题很不错了~
  8. 41#
    林西老九
    林西老九 2010-10-12 21:11 回复
    我来无视一下
    小松
    小松 2010-10-13 13:38 回复
    @林西老九:
  9. 40#
    Frank
    Frank 2010-10-12 21:02 回复
    跟着学都学不来。
    小松
    小松 2010-10-13 13:36 回复
    @Frank:慢慢来嘛,并不是一下就能学会的~
  10. 39#
    踏雪残情
    踏雪残情 2010-10-12 19:58 回复
    这样读起来更清晰了.
    小松
    小松 2010-10-12 19:59 回复
    @踏雪残情:是的,我个人觉得这样很爽!
1 2 3 4 5

随机日志:

推荐日志:

彩色标签:

sitemap