JAVASCRIPT網頁應用程式設計

jQuery 入門

|

263

第一個步驟，是先建立一組 div 標籤：

#container

，稍後我們的訊息就會放在這組 div

標籤裡，並且會以向下滑動的方式呈現。這裡我們會需要用到 jQuery 和 jQuery UI 函式

庫（用來新增一些特效）。當網頁載入時，就會把這組用來當作訊息容器的 div 標籤，

加進網頁裡：

//= require <jquery>

//= require <jquery.ui>

(function($){

var container = $("<div />");

container.attr({id: "growl"});

$(function(){

// 載入網頁時，把這組 div 加進 body 標籤裡

$("body").append(container);

});

/* ... */

})(jQuery);

接下來要開始撰寫外掛程式裡的程式邏輯。每當我們有新訊息時，都會把一組新的 div

加進

container

元件裡。而且還要讓訊息以

drop

特效呈現，等訊息出現了一段時間之

後，再以淡出特效消失在畫面上—就像 OS X 上的 Growl 的行為一樣：

$.growl = function(body){

// 新增一組 div 標籤

var msg = $("<div />").addClass("msg");

msg.html(body);

// 把 div 標籤加進清單裡

container.append(msg);

// 設定 drop