折腾了一下单双栏切换

axiu 撰写于 2009/11/04 | 48 条评论

今天很忙,上午一直忙着收钱、统计,而且亲身经历了从万元户到穷光蛋的杯具过程。整整9900元,瞬间化作一纸收据……好了,还是扯扯今天的主题吧——单双栏切换。

因为我的主题 content 部分设置得比较小(只有900px),所以字稍微堆多一点,就直接能刷很多行,因此我觉得折腾边栏是很有必要的。请先点着玩玩吧,就是标题右边那个“切换到双栏/单栏”。

这个问题的解决,首先当然要感谢我溜达到 林木木 同学的 JQuery 学习笔记之:关闭/显示 WordPress侧边栏 这篇文章,他博客风格很简单但是很厉害很整齐哦,而且看内容绝对属于速度类折腾狂类型的,能找到很多好的WP解决方法。

这个边栏变换基本上用的他的思路,但是由于我的主题比较有意思(自带单栏、双栏、三栏、左右栏等不同风格),所以折腾起来更简单啦。

一般方法请去林木木那里。我想提个函数:document.getElementsByTagName

这个函数主要用于获取标签类别。平时用到document.getElementsByID的地方比较多,不过前面一个就不太多了,因为整个页面一样的标签名有很多,例如获取

< input name="myInput" type="text" size="20" />

当中的“input”,可以写成 document.getElementsByTagName(“input”),但是如果分散着有3、4个input怎么办呢?用数列document.getElementsByTagName(“input”)[?]是一个方法,但是最好,还是用ID区分吧,因为ID才是唯一的,除非你对于这个函数和你的页面很熟悉。

评论:48

  1. Leo.N Leo.N 09/11/04

    我也准备折腾下。。。另:这沙发也是我的。。。 :razz:

  2. 林木木 林木木 09/11/04

    你是直接增加主体的宽度?侧边栏没有隐藏,直接下掉……

    • axiu axiu 09/11/04

      不是的,这个主题自带单栏双栏和三栏混合栏的样式,我只是用JS更改了一下主题的样式。直接下掉应该不会分两栏显示在最下面吧~呵呵

    • 林木木 林木木 09/11/04

      @阿修 哦,明白了!这个更高级!

    • axiu axiu 09/11/04

      @林木木 哈哈,主要还是借鉴你的思路的。这个主题碰巧有这功能罢了,不过不太舒服的是你那个平滑切换用不上了 :sad:

  3. 万戈 万戈 09/11/04

    你也整上这个功能啦,有意思,等有时间我也要玩玩

    • axiu axiu 09/11/04

      还挺合适的,改天装个三栏切换……哈哈

  4. sleepy sleepy 09/11/04

    你这个对chrome无效,我只试了下,IE是OK的,其他我也不知道,你自己再看看

    • axiu axiu 09/11/04

      请用ctrl+f5 强制刷新~~chrome是用本地JS缓存的。我在IE、FF、chrome浏览器都测试过了,应该没问题的~~

    • sleepy sleepy 09/11/04

      @阿修
      看到效果了,不过最好加点渐显渐隐的效果,直接显示和关闭感觉有点生硬

    • axiu axiu 09/11/04

      @sleepy 我也在想这个问题,不过实现起来有点麻烦~~我还在试 :oops:

    • axiu axiu 09/11/05

      @阿修 渐进搞出来了~欢迎测试~~

    • mimzyx mimzyx 09/11/05

      我在Chrome下测试是可以的。

  5. 小y 小y 09/11/04

    不会折腾。。 :sad:

    • axiu axiu 09/11/04

      :sad: 你其实折腾的挺不错

  6. wolfe wolfe 09/11/04

    强啊,羡慕ing~~~~~~~~~~ :arrow:

  7. Louis Han Louis Han 09/11/04

    Firefox下面正常 很cool

    • axiu axiu 09/11/04

      我也发现这个 单栏 挺好玩的~哈哈

  8. FORECE FORECE 09/11/05

    LOGO的边没有擦干净~~

    • axiu axiu 09/11/05

      真是细心~~我改天改改。现在觉得PS挺有意思~~哈哈

  9. Always.Life Always.Life 09/11/05

    不爱折腾的人路过 :roll:

    • axiu axiu 09/11/05

      别谦虚了,说你还有哪种博客系统没用过?现在连论坛都要插手~~ :sad:

    • Always.Life Always.Life 09/11/06

      @阿修 :wink: 说的好像我像世界末日似的

    • axiu axiu 09/11/06

      @Always.Life 哈哈哈哈,就是这意思~多面手~ :smile: ~

  10. 回憶 回憶 09/11/05

    變成單欄很清爽簡潔

    • axiu axiu 09/11/05

      是啊,我开始喜欢单栏啦~~

  11. kevin kevin 09/11/05

    我就不折腾了,喜欢三栏的,哈!

  12. Dianso Dianso 09/11/05

    效果很好!!!

  13. JuJue JuJue 09/11/06

    曾经喜欢三栏, 现在喜欢两栏 :!:

  14. zwwooooo zwwooooo 09/11/06

    都是折腾狂!!!

  15. 虾 09/11/06

    :lol: 有写程序。。晕。。

    • axiu axiu 09/11/07

      只是段代码而已啦,虾同学淡定哦~

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

:razz:

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">