布洛格公告
此部落格的開站日期是 2005-7-9 已營運了

發卡布洛內所有文章係採用創用 CC 「姓名標示─禁止改作 2.5 台灣版」授權條款釋出。

今天看痞客邦blog原始碼的時候,發現它有用jQuery來撰寫:
(如圖所示)
jquery1.jpg
jQuery是什麼東西呢,它是一種增加javascript函式庫的frameworks
有興趣的話可以參考這篇文章的說明:http://jsgears.com/thread-63-1-1.html
如果你還是不懂它是什麼東西,簡單的說,它就是能夠讓你的網頁變得更活潑的一支程式啦~~~


當我們在自己寫網頁的時候,如果想使用jQuery的功能就必需自己去jQuery官網下載這支程式來使用,不過由於痞客邦的blog本身就有使用到jQuery的函式庫,已將它代入到網頁中了,所以我們就可以直接在blog中使用jQuery的強大功能。


jQuery能做什事呢?

jQuery能做的事情可多了,你可以使用它的函式庫來寫一些動態的頁面像是:
(請在下面的框框中點一下)

注意:框內有作品情節、結局或其他相關內容,可能降低欣賞原作時的興緻。


當然它還可以實現其它更炫的效果啦,但這已是屬於jQuery程式撰寫的技術層次,我就不在本篇中探討了。


以下來介紹這個隱藏框的效果要怎麼弄出來:

首先呢,在你的側邊欄位中(隨便選一個欄位)寫入以下javascript:


例如我是寫在BlogAD這個區塊 jquery2.jpg

接著你就可以在寫布洛格的時候,切換到原始碼編輯器,貼上以下內容來使用這個隱藏文章的切換效果了:


注意:隱藏框的樣式為#hbox,標題的樣式為#tbox,請自行設計,如果不會設計可以直接跟我用一樣的:
(加在css中)


Posted by bshadow at 痞客邦 PIXNET Comments(6) Trackback(0) Hits(684)


open trackbacks list Trackbacks (0)

Comments (6)

Post Comment
  • 那...yam適用嗎?


    我在yam的檢視碼看到的
    <meta http-equiv="imagetoolbar" content="no">
    <link rel="shortcut icon" href="http://pics.blog.yam.com/images/favicon.ico">
    <script type='text/javascript' src='http://pics.blog.yam.com/js/jquery-1.2.6.min.js'></script>
    <script type='text/javascript' src='http://pics.blog.yam.com/js/flashobject2.js'></script>
    <script type="text/javascript" src="http://pics.blog.yam.com/js/utils.js"></script>

    這樣也算可以用嗎?

    還有隱藏欄位的呢??
  • 我剛試了一下,可以~ :]
    隱藏欄位是指?

    bshadowreplied on 2009/01/31 14:04

  • Private Comment
  • 就是旁邊的文章分類、誰來我家、參觀人氣和放小玩意等等的欄位

    yam可以用的跟你一樣伸縮自如嗎?

    我是看到兔子這篇文章的http://bluegirl73623.pixnet.net/blog/post/25670540

  • 可以,請在自由欄位中輸入:
    <script type="text/javascript">
    jQuery(document).ready(function($){
    $(".sideColumn div").next().css({display:"none"})
    $(".sideTitle").css({cursor:"pointer"});
    $(".sideColumn div").click(function(){
    $(this).next().toggle("normal");
    });
    });
    </script>

    bshadowreplied on 2009/02/01 10:56

  • 超好弄
    本來一直弄不好
    哈哈哈
    最後終於成功了

    好用好用
    而且不佔空間
    推推推推
  • Private Comment
  • dsdq

    都用不好 會的交一下 3Q

Comment Permissions: Allow commenting

Leave Comment

*Name/Nickname
E-mail
Personal Website
Comment Title
*Comment
* Private Comment