HINA :: 工程幼稚園


偏執與強迫症的患者,算不上是無可救藥,只是我已經遇上我的良醫了。
 Author
 
Blog Image

my Gmail

Blog Look Score and Rank



Sitetag
 

Category

ALL (787)
Chats (199)
Life (36)
Photography (124)
Novel (60)
Fake stories (146)
Technical support (195)
WACOM (17)
Graphic arts (10)

Authors

Archive

Calendar

«   2010/02   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28            

  • Total : 520928
  • Today : 113
  • Yesterday : 193
Creative Commons License

本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權,台灣並依循所適用的授權條款。
views: 333 times

超大字體(180%)放大字體(130%)原始字體(100%)
今天工作的時候,為了要在畫面上加入一些動態效果,並且讓他循序自動執行。所以有這方考量:
  1. 使用 setTimeout 或是 setInterval
  2. 利用 animate 可以延遲的方式重新呼叫
  3. 使用 queue
首先我嘗試了第一個方法,將要執行的東西,包成 function,然後利用 setTimeout 或是 setInterval 呼叫。很好,他可以運作了,但是我遇到另一個問題,當我需要中斷他,或是暫停的時候,用這種方式呼叫就相對的麻煩。因為我加入了動態(Effect)的效果,如果直接強制中斷,那該怎麼知道他做到 function 中的哪一段呢?

後來我換了第二個方法,使用 animate 就可以延遲,也可以利用 callback 回呼自己,更有 stop() 可用。那,第二個問題來了,當我 stop() 之後,需要重新開始時,只能重新呼叫一次那個 callback 並把整個程序全部重做一次。如果沒有其他的事件時,他是可以很順利的走完,但倘若參雜了其他的事件,那就會有干擾的狀況發生。其實所謂干擾的狀況,並不是 API 本身的問題,我相信那是可以人為控制的,就是我寫的太爛才會發生干擾的意思啦。

後來我在 API 中找到了 queue 這個東西。先來簡單介紹一下他是做甚麼用的。他的作用是將你要執行的 function 丟到陣列裡面去依序執行。舉個簡單的例子,倘若我們要做一個動態效果:
$('#div-a').animate({ left: "+=20" }, 1000, function() {
    $('#div-a').animate({ top: "+=30" }, 1000, function() {
        $('#div-a').animate({ left: "+=50" }, 1000, function() {
            alert('動態效果結束了');
        });
    });
});
這種東西如果一多起來,跟噩夢沒兩樣。如果使用 queue 來做的話,那麼我可以改寫成這樣:
var myAnimate = function() {
    $('#div-a').animate({ left: "+=20"}, 1000).queue(function() { $(this).dequeue(); } );
    $('#div-a').animate({ top: "+=30"}, 1000).queue(function() { $(this).dequeue(); } );
    $('#div-a').animate({ left: "+=50"}, 1000).queue(function() { alert('動態效果結束了'); } );
};

myAnimate();
這樣就可以了。如果要讓他循序,就把最後一個 alert 換成 myAnimate(); 就可以達到循序。

其實 queue 可以把他看做是一個陣列,而 dequeue 則是呼叫陣列中下一個元件出來執行。
// 將要循序執行的程序寫成陣列
var FUNC = [
    // animate 結束的 callback 再次呼叫 myAnimate,等於告訴他,請執行下一個 queue 元件
    function() { $('#div-a').animate({ left: "+=20"}, 1000, myAnimate); },
    function() { $('#div-a').animate({ top: "+=30"}, 1000, myAnimate); },
    function() { $('#div-a').animate({ left: "+=50"}, 1000, myAnimate); },
    function() { alert('動態效果結束了'); }
];

// 將 dequeue 指定給變數 myAnimate 並包裝成 function
var myAnimate = function() {
    $('#div-a').dequeue("myAnimation");
}

// 把 FUNC 這個陣列指定給名稱為 myAnimation
$('#div-a').queue("myAnimation", FUNC);

// 呼叫 myAnimate,由於呼叫了 dequeue,他便會開始從 myAnimation 的第一個程序開始執行
myAnimate();
這樣就是 queue 的做法,更詳盡的資料可以查看 jQuery 的未壓縮格式關於 queue 的部分。

再來,在 jQuery 1.4 中,新加入了一個新的方法 .clearQueue,他的作用是用於清除(或是取消)所有從 queue 中所加入的任何 function,換句話說,如果你在 queue 的 callback 中有使用任何程序的話,是可以使用 clearQueue 把他強制給取消的。

另外,官方有說他可以停止 fx 相關的動態效果,類似於使用 stop() 的效果,但是我是用過的之後覺得,動態效果還是用 stop() 去停止比較妥當啦。所以還是來個例子,以上面的例子來說,如果我中途要暫停某一個動態效果,那麼我必須要這麼做:
// 我們用一個 click 來停止他
$('stop-button').click(function() {
    $('#div-a').stop();
});
這樣,動態效果就會停止了。但是,你有發現什麼問題嗎?那就是,你要重新使用他的時候,就得重新在呼叫一次 myAnimate(); 這個程序。
// 我們用一個 click 來啟動他
$('start-button').click(function() {
    myAnimate();
});
看出問題了嗎?如果沒有 clearQueue 的話,你重新啟動他的時候,他並不會接著之前暫停的地方去執行,而是直接跳過上一個 queue,直接執行下一個 queue 內容!這樣知道差別了嗎?所以,我們需要做這樣的修改:
// 我們用一個 click 來停止他,並且清除這次的 queue 執行
$('stop-button').click(function() {
    $('#div-a').clearQueue();
    $('#div-a').stop();
});
這樣一來,如果我們重新呼叫 myAnimate(); 重新啟動的時候,就會從上次的結果繼續下去。這次的需求就是這樣。這裡有我做的簡單的範例(就是這次工作要用的東西)。
創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權,台灣並依循所適用的授權條款。
Bookmarks
 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
作者資訊
author image
偏執與強迫症的患者,算不上是無可救藥,只是我已經遇上我的良醫了。

Leave your greetings here.

[登入][OpenID是?]
views: 427 times

超大字體(180%)放大字體(130%)原始字體(100%)
其實在許久之前,我有寫過一篇關於 Blueprint CSS 的介紹了,但是我覺得還是有些地方稍嫌不足。特別是今天為了要找一些東西,又繼續看了 Bblueprint CSS,覺得上次那一篇時在是寫的不夠,所以就來補充一下。

特別提一下這個,Blueprint CSS How To Customizing Typography Baselines,他是介紹怎麼樣修改在 Blueprint CSS 中的 Typography  基準,請務必要看看。

首先還是回到 Grid 這個設定上面,你可以從 src 裡面看到這個檔案的基本設置:
   grid.css
   * Sets up an easy-to-use grid of 24 columns.

   By default, the grid is 950px wide, with 24 columns
   spanning 30px, and a 10px margin between columns.
基本的寬度就是 950px,共有 24 欄,每個欄寬 30px,每個欄位間隔 10px 的留白(使用 margin-right)。倘若你要增加或是減少這個預設的寬度,需要自己去執行 lib/compress.rb 這個程序(使用 Ruby)。我們假設都以這種寬度來開發,暫時不考慮重新製作新的 Grid 為前提。

首先,你確認好自己的 Layout 之後,就可以開始利用 Grid 來編排 Layout 中所有元件的位置。這裡需要提醒一下的是,這個 Grid 他是依照預設的欄寬去做編排的,所以若你的 Layout 不符合欄位寬度的設置,就必須小心處理這個部分。雖然他只是個 Grid,但是做為參考的標準,規則還是不要太輕易的打破比較好。

假設我們要做兩欄式的網站,那麼我們就有左邊(或右邊)跟中間兩個欄位。那左(或右)的欄位寬度可以這樣計算,這裡我們以左邊欄位跟中間欄位的例子來說:
5 * 40 - 10 = 210px(Grid 範圍)
5 * 40 = 200px(內容範圍)
我要 5 個欄位(30 * 5 + 10 * 6)來當做左邊(或右邊)的欄位,那剩下的就是中間的區塊:
19 * 40 - 10 = 750px
要留意的是,左邊的欄位會多出 10px 的留白,是無法被使用的區塊,真正能使用到的範圍其實只有 200px 而以。當然,你的欄位切割的越多,可以使用的區塊相對的就會越少,因為每切割一次就會少 10px。



問題來了,萬一我的 Layout 沒那麼剛好符合 Grid 怎麼辦?

有兩種解決方法:
  1. 計算出欄位與留白,重新產生 Grid.css!
  2. 犧牲 1 欄!
第一種解法是比較正規的做法,利用 Blueprint CSS 自帶的程序來重新產生新的樣式檔案,好處是他會重新製做整套 grid,甚至是做成你需要的 grid 檔案,所產生出來問題比較不會那麼多,也不會發生奇怪的問題。缺點是數學要很好,如果你的 Layout 剛好可以整除,那恭喜你,如果不行,那就想辦法讓他整除(沒有誤)。

如果嫌自己算太累,那麼這個網站應該可以幫你一些忙(他還幫你做好 grid.css),但是請留意 Blurprint CSS 的版本,因為他所算出的 grid.css 版本未必會是最新喔!

第二種方式,我不建議 CSS 生手來做這件事情,不過話又說回來,有能力使用 Blueprint CSS 這種 Framework 的應該不能算是生手了吧(認真)。其實這個方法是我自己硬幹想出來的,萬一手頭上的 Layout 我草泥馬的複雜,很難處理的話,以上述運算為例,倘若一樣是切兩個欄位,但是我的尺寸是:左 220px 右 720px 的話呢?
( 220 + 720 ) / 20 = 47(可以切成 47 欄,各寬 20px 的欄目,倒過來也可)
47 是質數,所以 20 已經是最大因數,最大切割為 20 欄,每欄 47px!
但上利須採用左 11 欄,右 36 欄來處理,也可直接重新產生 Grid.css。
所為的犧牲 1 欄的意思,就是一樣採用原有設置,但是在尺寸誤差的地方,將靠近接合的那個欄位犧牲掉,也就是說,利用 Blueprint 中的 pull 與 push 來做這件事情!但我還是得說,必須要是 CSS 熟手,不然那個 Layout 可能就因為這樣 pull & push 被推到地獄裡去了!

兩欄目的方式處理起來比較簡單,左邊欄目依舊使用 Grid 的 5 欄目設定,另外再套入自訂義的 Styling 改變寬度,右欄目亦同!差別在於,我可以在右欄目寫入 PUSH,讓他推齊右邊界,這樣在接合處或許會與原本的 Grid 不相符,但是目的一樣達到了。只是我們把 Grid 的方式拿到了左、右邊界去使用!而不是由左至右的對齊。

相對於較複雜的 Layout,其實最主要的精神是,你要以哪個地方當做基準,然後再去實作。畢竟,在我看來 Grid 是一種工具,也是一種精神,他可以無所不在,只要你知道你自己的基準在甚麼地方。其實這個東西並不難,也不複雜,他就只是很單純的一個 CSS 設定而已,就像是畫滿方格的草稿紙一樣,要填甚麼上去,還端看客官您啊!

人人 Layout 都有一把尺,請當寶劍用!
創用 CC 授權
Creative Commons License
本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權,台灣並依循所適用的授權條款。
Bookmarks
 HEMiDEMi  Technorati  Del.icio.us  Digg  funP  Yahoo!  Furl
 相關文章 
作者資訊
author image
偏執與強迫症的患者,算不上是無可救藥,只是我已經遇上我的良醫了。

Leave your greetings here.

[登入][OpenID是?]
Previous : 1 : 2 : 3 : 4 : 5 : ... 394 : Next