March 23,2007

樂多 BlockWrapper

噗噗,一直覺得樂多側邊欄的結構很畸形,理論上應該是一個功能欄位用一個Div包起來,裡面再分sidetitle和sidebody。但是現存的架構卻是用了兩個分開的div。因為變成一個Block,在CSS操作上比較方便,而且可以突破了一些位置的限制。

我把每個項目當成一個Block,利用jQuery寫了一個簡陋JS。
blockWrapper ver0.1 - 由於夜已深加上我功力不足,所以僅以簡單實現為目的。
blockWrapper ver0.2 - 參考阿土伯Blogger Hack Tip #2 - Javascript Code Style,我有很認真看文章阿,所以就應用了這些code style來改寫。

圖解一下整個想法,想法好像過於簡單也沒啥好說的,就請見下圖吧。首先樂多的sidebar的結構大概是這樣



目標是變成下面這各樣子




JS如下(請接下載,並照下面步驟填寫完後再上傳)
BlockWrapper ver0.2

使用方法:
舉例,如果我要包裝的項目有兩個,class名稱分別為one和two,像下面這樣
var tw_kuni_blockWrapper_config = new Array("one", "two");

如果是要取名為new, recentpost,則是改成
var tw_kuni_blockWrapper_config= new Array("new", "recenpost");

以上,噗噗,我個人是蠻需要這個功能的,這樣的話比較可以讓每一個功能有可能隨意跑來跑去,當然你還需要設定其對應的css才有用,由於目前也還在修改也沒經過太多測試其穩定度如何,有興趣的再拿去玩吧。

把js檔案改副檔名好像已經沒用,眼睛又喵到word檔。哈,我就改成word檔,就可以上傳了。要編輯的話,記得改回來,或者是用ultraedit之類的編輯工具修改。

另:程式結構上應該寫的不好看,也沒優化(因為還沒時間看阿土伯的教學),還望各路高手能給我些指點來改進。






Posted by shinbang at 樂多Roodo! │02:26 │回應(1)引用(0)【Web】
樂多分類:日記/一般 工具:編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/2896241
回應文章
Hello!

剛看但您的回應所以過來參觀一下!
非常喜歡你這裡的設計,很清爽的感覺!
其實關於您對 #links 的問題,用 jQuery
的確可以很輕鬆的解決,而且我讚賞您將
一些邊欄改為底欄的作法!
(我怎麼沒想過啊,呵呵)

不知道您有沒有看過,但我有寫了一套樂多優化插件:
http://blog.roodo.com/withoutboundaries/archives/2883877.html

關於您提到的這個功能(改個別邊欄 CSS)
會不會介意我把他放在下一版的插件裡!?
Posted by Anubis From Memphis at March 23,2007 05:31