Archive for 技術文章

jQuery 實用入門（二）表單篇

Posted by essoduke - 8 月 17, 2008 at 07:08:17 am - 437 User Views

網頁 Form 表單可以有很多 Javascript 應用，比如說表單驗證、聚焦提示、防錯誤措施等等，而這些功能通常可以經由 jQuery 簡化程式寫法，以下就是本期案例。

案例（觀看範例）

頁面讀取完成即聚焦於第一個表單元件，並加入聚焦提示。送出時驗證是否都有填寫資料，若無則浮現提示文字，表單送出後將 submit 按鈕停用。

※這個案例使用了 jQuery 的語法串接特色，將多個函式串接為一行，大大節省程式行數。

繼續閱讀jQuery 實用入門（二）表單篇…

jQuery 實用入門（一）

Posted by essoduke - 8 月 15, 2008 at 10:08:04 pm - 430 User Views

什麼是 jQuery？

jQuery 是一個快速又簡潔的 JavaScript 程式庫，簡化了讓你在 HTML 文件裡面尋找 DOM物件、處理事件、製作動畫和處理 Ajax 互動的過程，簡單地來說，jQuery 是一套足以改變傳統撰寫 JavaScript 的超酷函式庫方式。

雖然如此簡單，不過對於剛接觸的人要立即入門應用還是會有些摸不著頭緒，而網路上眾多範例都是屬於進階、甚至高階技巧，所以我會盡量將這陣子接觸到並實際應用於專案內的實用案例寫成一系列文章，而第一篇就鎖定在網頁元素的操作，希望對於入門者有所幫助。

剛開始的準備

當然就是下載最新版本的 jQuery 並引入網頁的 head 區段，並準備好方便編輯 HTML 源碼的編輯器，我推薦 PSPad，一套支援中文、FTP 編輯以及高亮度語法的免費文書編輯程式。

  1. <head>
  2. <script type="text/javascript" src="jquery.js"></script>
  3. </head>

PsPad

基礎：網頁元素控制

我合作過不少網頁設計師，對於網頁通常都是慣用 Adobe Dreamweaver 來規劃設計，所以對於 HTML 原始碼通常都一知半解，但是要活用 jQuery 就必須了解這些標籤元素和屬性的基本作用。

舉個最常在 DW 源碼內出現的 id 屬性，多數使用 DW 的設計師都不清楚這個 id 有什麼用途？簡單來說，id 就是所謂的 identity（識別）也就是該元素的唯一識別名稱，單一網頁的一個 id 只能出現一次，為的就是方便使用 DOM 的方式來控制這些元素。
繼續閱讀jQuery 實用入門（一）…

L1J in Linux

Posted by essoduke - 8 月 9, 2008 at 12:08:43 pm - 237 User Views

看到不少人在 Linux 上架設 L1JI 出現問題，就來稍微說明安裝的流程。

安裝前注意事項：

  • 是否已安裝 Java Standard Edition（Java SE）JDK for Linux 並正常運作？
  • MySQL 是否正常運作？
  • 所取得的 L1J 是否有包含 c3p0-0.9.1.1.jar, mysql-connector-java-5.1.5-bin.jar, javolution.jar？

上述條件都確認過後，接著就是將 sql 批次執行檔匯入 MySQL，然後就是執行下列指令啟動伺服器：

  1. java -Xms512m -Xmx512m -cp l1jserver.jar:lib/c3p0-0.9.1.1.jar:lib/mysql-connector-java-5.1.5-bin.jar:lib/javolution.jar l1j.server.Server &

如果上述三個 jar 檔都不是位於 lib 內也無所謂，只要替換成正確路徑即可，而最後的「&」用意是讓 L1J 採用背景執行。

執行過程中如果有發生 java 錯誤，必須仔細檢視錯誤訊息，通常都能找出問題。我在安裝時最常遇到就是 lib 資料夾內的檔案缺少以及 L1J 版本和所匯入的 sql 不符，而這些錯誤通常只要查看錯誤訊息都能略知一二。

若是發生外部無法連入的情況，可能要檢查一下是否有安裝 iptables 把所使用的 port 2000 擋了下來。

參考資料：

–
這是個有點危險的主題…XD

Regular Expressions in MySQL

Posted by essoduke - 7 月 14, 2008 at 06:07:52 pm - 69 User Views

regular expression
圖片來源：Analytics Talk

當要比對的規則已經超乎 LIKE 時，適時地使用正則表達式會更為方便！

列出 A 開頭的所有資料

SELECT name FROM employees WHERE name REGEXP '^A';

列出大寫 A 開頭的所有資料（使用二進位比對）

SELECT name FROM employees WHERE name REGEXP binary '^A';

列出 A, D, F 開頭的資料

SELECT name FROM employees WHERE name REGEXP '^(A|D|F)';

列出數值資料

SELECT age FROM employees WHERE age REGEXP '^[0-9]+$';

更新 url 內的 www.google.com.tw 為 tw.yahoo.com

UPDATE website SET url =  REPLACE('url', 'www.google.com.tw', 'tw.yahoo.com');

當然，天下沒有白吃的午餐，REGEXP 比對所花費的時間大約是 LIKE 的 6 倍，所以，並不是所有情況都需要 REGEXP 來解決，建議只有在比對規則複雜的情況下使用，才不會影響效能。

參考資料：

Technorati Tags: , ,

Multiple File Upload by AjaxFileUpload of jQuery

Posted by essoduke - 4 月 25, 2008 at 08:04:44 pm - 386 User Views

AjaxFileUpload 是 jQuery 的擴充套件之一，可以使用 Ajax 來即時上傳檔案，不過缺點就是一次只能上傳一個。

但是今天在研究 Multiple File Upload 搭配 AjaxFileUpload 時，找到一個土法煉鋼的方式可以達成一次上傳多個檔案。

這是 AjaxFileUpload 原本的使用方法：

  1. $.ajaxFileUpload ({
  2.         url:'doajaxfileupload.php',
  3.         secureuri:false,
  4.         fileElementId:'fileToUpload',
  5.         dataType: 'json',
  6.         success: function (data, status){
  7.             if(typeof(data.error) != 'undefined'){
  8.                 if(data.error != ''){
  9.                     alert(data.error);
  10.                 }else{
  11.                     alert(data.msg);
  12.                 }
  13.             }
  14.         },
  15.         error: function (data, status, e){
  16.             alert(e);
  17.         }
  18. });

土法煉鋼法就是利用 Multiple File Upload plugin 所建立的 Array 讓上述過程跑 n 次… XD

  1. //取得 uploads 表單內，input 類型為 file 表單元素並依序執行迴圈
  2. $('input:file', $('#uploads')).each(function(){
  3.   $.ajaxFileUpload({
  4.         url:'doajaxfileupload.php',
  5.         secureuri:false,
  6.         //重點就是這行，依序傳入 file 表單元素的 id 值
  7.         fileElementId:$(this).attr("id"),
  8.         dataType: 'json',
  9.         success: function (data, status){
  10.           //後端處理回傳 json...
  11.         },
  12.         error: function (data, status, e){
  13.             alert(e);
  14.         }
  15.     });
  16. });

目前測試使用上都沒有問題，下一個實做就是要像 GMail 的夾帶檔案一樣，讓已選取上傳的檔案清單可以在點選 remove 時移出清單，同時也刪除已上傳的檔案…

DEMO 測試

延伸閱讀：

Technorati Tags: , ,

Pages: 1 2 3 Next

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.