[作品] Yullio Layout Generator 讓你的網頁增色

8 views
Skip to first unread message

lukhnos

unread,
Dec 26, 2006, 6:48:57 AM12/26/06
to HappyDesigner
Yullio Layout Generator: 將 YUI Grids 與 Mollio 主題
整合進你的 Rails App 中

hlb根據YUI Grids與Mollio CSS/HTML
Templates,製作了一套名為"Yullio"
的模版(Yullio = YUI + Mollio)。原來 Mollio
已經有不錯的佈景主題
與版面配置(type-a 到 type-f 六種)。我們把 Mollio
的版面配置部份
抽掉,改用 YUI Grids 來處理,這樣做有幾個好處:

* YUI Grids 提供至少三種頁面寬度設定,增加彈性
* YUI 的二欄式設計較為靈活
* YUI 二欄式的主欄,裡面還可以再切分為各子欄位

對於 Rails 的開發者來說,我們還製作了一個名為 Yullio
Layout Generator
的產生器,現已發表到 RubyForge
上。取得及安裝方法非常簡單:

gem install layout_yullio_generator

然後針對你要生 layout 的 controller,例如 Expense
,下達以下指令:

script/generate layout_yullio Expense sidebar

此時你的 app/views/layout 目錄下會增加一個名為
expense.rhtml 的版面,
而 app/views/expense 下方則會多一個名為 _sidebar.rhtml
的部份頁面檔
(partial)。同時這個產生器還會將相關需要的
CSS、JavaScript 及 plug-in
拷進你的 public/ 及 vendor/plugins/ 目錄下。

重新載入你的 Rails app ,然後叫出 Expense
相關的頁面,你會發現已經套上了
Yullio layout。

要更改 layout 的方法很簡單,在你的 Expense controller
下,增加下面兩行:

class ExpenseControler < ApplicationController
...
yullio_page_width :doc2
yullio_column_template :yui_t2

yullio_page_width 後面的參數,目前有 :doc, :doc2, :doc3
三種,分
別對應至 YUI 的 #doc, #doc2, #doc3 ,至於
yullio_column_template
後面的參數,則為 :yui_t1 至 :yui_t7 ,分別對應至 .yui-t1
至 .yui-t7
等七種版面(由於 Ruby 的 symbol 不能用 dash
,因此改代換以底線)。

在程式碼更改後,版面也就隨之改變。需注意的是,如果你還需要主欄位內的分
欄版面,得自己去填入 .yui-g 相關 HTML 程式碼。

進一步的使用說明,可參考本產生器的說明文件:

script/generate layout_yullio

可使用的版面,則可以參考 Yahoo! UI Grids CSS
文件。佈景主題的各種用
法,則可以參考 Mollio。

Yullio Layout Generator 是使用 BSD
授權公開發表的軟體套件,由 hlb
和 lukhnos 製作。YUI Grids 及 Mollio
的授權,請參考其各自的網頁。

參考連結:

* Yullio Layout Generator: http://rubyforge.org/projects/layout-yullio
* Yahoo! UI Grids CSS: http://developer.yahoo.com/yui/grids/
* Mollio: http://mollio.org/

Reply all
Reply to author
Forward
0 new messages