jquery messagetip信息語提示控件

編寫原因：

作為提示框，jquery有個messagebox的控件，也就是彈出的提示框。但這個控件如果不是用在需要確認的時候，單單警告提示、消息提示、失敗提示時，用戶還需要去點下確認，有時這操作還是挺煩的（盡管可以設置timeout，會自動消失）。

 

控件需求：

現在需要一個簡潔消息提示控件，不需確認。

1.提示框可以從頂部或底部滑入，在失效后滑出。

2.可以設置滑入時間，內容停留時間、滑出時間。

PS:比較簡單的控件

效果如下

 

編寫過程：

1.在無文檔的情況下， 我建議將用戶能傳的參數的定義寫在控件的最前面。

    var defaults = {
        zIndex : 9999 ,
        fadeInTimeOut : 1,   //second
        contentTimeOut : 3,  
        fadeOutTimeOut : 1,
        position : "top"     //show position     top  or bottom
    };

這樣使用者對他能夠設的就非常清楚了，即便是沒有文檔，也能愉快的玩耍。

2.考慮瀏覽器的兼容性

因為控件的提示框是固定在底部或頂部的，不可避免的就是position:fixed的問題

 IE6 IE7 IE8 固定定位元素 position:absolute 用設置，所以定位計算也要變化。

3.滑動效果的實現

滑入、內容停留、滑出。

具體的實現就不在這里說明，最后面會有源碼鏈接。

PS:最主要東西就是上面這三個。

 

總結：

1.在強調的用戶體驗的年代，做這個控件也是為了用戶能有更好的感受。

2.在做東西（編碼）時，也時刻想能否這東西能否通用，而控件和框架也無非就是為了通用。

3.另附上我這個控件的下載鏈接

   點擊下載->  jquery.messagetip

 

DEMO:

 

$.messageTip.info({
　　   message:"我是提示消息.......",
      fadeInTimeOut : 1,   //滑入秒數
      contentTimeOut : 3,  //內容停留秒數
      fadeOutTimeOut : 1, ////滑出秒數
});

 

 

分類:  javascript

標簽:  jquery