jQuery網頁設計插件︰ Jquery Notification提示插件

今次介紹的jQuery網頁設計插件比較適合網頁程式(Web Application)使用，例如網頁管理系統(CMS) 這類經常需要顯示提示的系統，這個Jquery Notification 提示插件的功能就是在網頁的上方顯示不同顏色的提示訊息，在配合AJAX的使用下，就可以在不跳頁(Refresh-less)的情況下顯示執行結果。例 如在用戶打入登入資料後，瀏覽器只要通過AJAX去聯繫伺服器，再利用插件顯示結果就可以，不用再跳新一頁，大大提高使用者親和度(User Friendliness)。



使用方法十分簡單，先利用以下的語句導入jQuery﹑插件碼和有關的CSS。

再在需要的地方執行showNotification()就可以了。

插件支援不同的提示訊息類別(type)﹑自動關閉(close)和顯示時間(duration)，詳細資料可以到Jquery Notification 提示插件查看。

原文網址:
http://www.aveego.com/html/o_37472_/jquery網頁設計插件-jquery-notification提示插件.html

Firefox 8有關網頁設計的新改進

Firefox 8昨天正式提供給公眾下載，對一般用戶來說，最主要的新功能就是整合twitter到搜尋欄。但作為網頁設計師，每次瀏覽器更新總要看看有沒有跟網頁開發的新東西，今次算是比較失望的一次，兩個新增功能應該都不太會用到。

insertAdjacentHTML支援

第一個跟網頁開發有關的功能就是支援insertAdjacentHTML，這其實就是jQuery的before﹑prepend﹑append和 after的原始Javascript函數，由於筆者早就不會使用這麼低階的函數，故可以說是沒有任何用途。當然，由於瀏覽器直接支援，這極可能會令 jQuery未來版本在Firefox8上執行以上四個函數時比較快一點。

加強CSS hyphen的支援

很久以前在[英語系網頁設計的排版工具 Hyphenator]已經介紹過hyphen的用法，這對好像筆者一樣主要客戶都是中文語系的網頁設計師來說，意義亦是不大。

原文網址:
http://www.aveego.com/html/o_37463_/firefox-8有關網頁設計的新改進.html

css3網頁設計實驗室︰ 創意無限的動感型菜單

早前介紹<網頁設計實驗室: CSS3朦朧效果菜單>的作者Mary Lou又有新作品 - 創意無限的動感型菜單。作為網頁設計師，每一次看到這些漂亮的CSS3作品示範，就難免又期盼著將來90%的用戶都在使用新瀏覽器的日子﹗真的不厭其煩再說一次︰用戶們，升級呀﹗



今次實驗主要都要玩鼠標覆蓋(Hover)的效果，同樣是利用css3的transition和easing等最基本的css3技巧。老實說，技術層面來說，沒有什麼驚奇的地方，但不得不佩服網頁設計師Mary Lou的創意，實在是配合得太好了。

有興趣及已升級(筆者真煩!)的朋友，可以到Creative CSS3 Animation Menus一看。

原文網址:
http://www.aveego.com/html/o_37462_/css3網頁設計實驗室-創意無限的動感型菜單.html

jQuery網頁設計插件︰ jquery.hotkeys熱鍵控制

筆者介紹的jQuery網頁設計插件大都是控制圖像為主的，無它，因為網絡上本身就是最多這類插件，對一般的網頁設計師而言，這亦是最感興趣的，始終網頁程式或網頁系統的需求相對地少，主流的客人都是設計網頁居多。今次就特別介紹一個給網頁程式開發人員十分有用的jQuery網頁設計插件 - jquery.hotkeys熱鍵控制。

jquery.hotkeys的使用十分簡單，只要利用bind()把DOM元件聯結到有關的熱鍵和函數(function)就可以，例如以下的簡單程式便會令使用者按下Esc時彈出"You cannot escape!"的視窗。

jQuery(document).bind('keydown', 'esc', function (evt) {
  alert('You cannot escape!'); return false;
});

插件厲害的地方是不單止支援單一的按鈕，而且支援由多個按鈕組成的熱鍵，例如'alt+ctrl+z'，對網頁設計師來說可以想像的空間也很多，例如利用上下左右鍵來作簡單的移動等。

瀏覽器支援

IE6+
Firefox 1.5+
Safari3 +
Chorme 0.2+

jQuery支援

jQuery1.4.2+

原文網址:
http://www.aveego.com/html/o_37461_/jquery網頁設計插件-jquery-hotkeys熱鍵控制.html

jQuery 1.7 正式推出

現在大部份網頁設計師都應該或多或少在使用jQuery，而jQuery剛剛推出了1.7版本，效能又再提升。



這次版本增加了不少API，大家可以到jQuery API 1.7列表查看。

重大更新

1. 新事件API: .on() 及 .off()
2. Delegate事件效能提升，根據jQuery的數據，1.7版本比1.6.3快了一倍
3. 增強在ie6/7/8的html5支援
4. 修正動畫系列的toggle
5. Asynchronous Module Definition(AMD)
6. jQuery.Deferred
7. jQuery.isNumeric()

有關的詳細資料，請到jQuery Blog - JQUERY 1.7 Released查看。


原文網址:
http://www.aveego.com/html/o_37393_/jquery-1-7-正式推出.html

jQuery網頁設計插件︰jQuery Waypoints

今次介紹的jQuery網頁設計插件是jQuery Waypoints，功能非常簡單好用，就是當瀏覽器捲動到有關的dom元件，就會啟動你需要的程序碼。基本上所有的dom元件都可以使用，以下的簡單編碼就會使瀏覽器捲動到有關的h1標題時彈出警告了。

$('h1').waypoint(function() {
  alert('h1 is here!');
});

瀏覽器支援

IE6+
Firefox 3+
Safari4 +
Chorme 6+
Opera 11

jQuery支援

jQuery1.4.3+

另外插件的官方網頁亦有多個有趣的示範，有興趣可以一看。


原文網址:
http://www.aveego.com/html/o_37383_/jquery網頁設計插件︰jquery-waypoints.html

網頁設計實驗室: 超酷的css3鼠標覆蓋效果

今次介紹的是Alessio Atzeni的Original Hover Effects with CSS3，就是利用css3來製造鼠標覆蓋時的超酷效果。若果大家喜歡上次網頁設計實驗室: CSS3朦朧效果菜單的效果，今次介紹的比上次更加漂亮，絕對比以前用flash做的效果更加賞心悅目。由於是大量利用css3，所以記謹要使用新版本的瀏覽器。

作為網頁設計師，筆者最欣賞的就是其簡單的技巧，基本上都是利用css3的 translate﹑rotate和scale，再加上不同的transition效果和時間，但配合起來就變得十分精彩了，筆者在日後將會多介紹一下 css3，希望能夠推動一下，當然也希望大家儘快升級瀏覽器。



原文網址:
http://www.aveego.com/html/o_37382_/網頁設計實驗室--超酷的css3鼠標覆蓋效果.html