Category: 技術文章

jQuery: 重新繫結事件並傳入參數

2009 年 02 月 17 日

javascript, jquery

狀況：Click event 是直接寫入 <a>，所以使用 unbind 並無法解除這個事件，如果需要在這個函數內重新給定參數並且再次呼叫該怎麼做？ //javascript function abc(x, y){ alert(x + ', ' + y); } //html test 首先要使用 removeAttr 來清除 onclick event： $(selector).removeAttr('onclick'); 再來，利用 bind 可傳入 data object 的特性解決傳遞參數，並使用匿名函數來呼叫： $(selector).bind('click', {x: 'New X', y: 'New Y'}, function(e){ abc(e.data.x, e.data.y); }); 最後，發揮 jQuery 的特長寫成一列： $(selector).removeAttr('onclick').bind('click', {x: 'New X', y: 'New Y'}, function(e){ abc(e.data.x, e.data.y); […]

技術文章, 資訊科技, 軟體分享

jQuery 台灣郵遞區號外掛

2009 年 02 月 13 日

javascript, jquery, twzipcode, zipcode, 郵遞區號

※已發布 twzipcode 1.4.1 版會想要做這種無聊的外掛，起因是目前手上的案子，原本用了傳統的 DOM 做了一組單一頁面適用一組的 js，之後突然有兩組的需求，前天又變成四組，一氣之下就著手寫了這個 Plugin 來用 XD 下載位置（10KB） Badongo XUN6 範例：jQuery 台灣郵遞區號外掛安裝 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="twzipcode.min.js"></script> 用法： javascript $('#container').twzipcode({ county: 'county', //縣市清單 ID area: 'area', //鄉鎮市區清單 ID zipcode: 'zipcode', //郵遞區號輸入框 ID countySel: '高雄縣', //縣市預設值 areaSel: '那瑪夏鄉' //鄉鎮市區預設值 }); HTML <div id="container"> <select id="county"><option value="">縣市</option></select> <select id="area"><option value="">鄉鎮市區</option></select> <input […]

Seagate 7200.11 災情

2009 年 02 月 10 日

這次的機瘟還真是廣泛，Seagate 梭魚 11 代（7200.11）幾乎都中獎，部份企業級也無法倖免，雖然我的兩顆 500GB 沒發作，不過也趁著新購入的 640GB 到手後隨即備份、更新。這裡有韌體更新完整教學：Seagate硬碟開機後抓不到之異常韌體更新說明 – 聯強 e 城市 ※ SD15 更新後為 SD1A 延伸閱讀： Barracuda 7200.11、ES.2 SATA 及 DiamondMax 22 硬碟機韌體建議 [207931] – Seagate 知識庫 Seagate 官方坦承硬碟存在問題以及需要更新韌體 – Mobile01 seagate韌體更新後集中回報用，官方韌體列表更新 – Mobile01 ST31000340AS p/n尾碼303 原韌體SD15 先不要升級成SD1A – Mobile01 — 這段時間 WD 的硬碟竟然趁勢調漲…XD

技術文章, 資訊科技

台灣三碼郵遞區號 JSON 版

2009 年 01 月 21 日

javascript, jquery, json, twzipcode, zipcode, 郵遞區號

最近有個案子有做到三碼郵遞區號填寫的部份，而中華郵政網站上提供的只有 Word, Excel 和 TXT 格式，索性就自己造檔，轉成 JSON 格式可讀性比較高、維護也方便，而且許多伺服端語言都有 JSON Library 可以使用。 zipcode.js 可以使用下列方法來個別取出： //縣市 for (var county in zipcode) { ... } //鄉鎮市區 for (var area in zipcode[county] { ... } 範例應用：那怎麼應用在 3+2 格式？最後兩碼讓訪客自己填就好了啊…XD — 本來是想寫成 jQuery 的 Plugin，不過好像沒必要 :p

技術文章, 資訊科技

如何新增自架 WordPress 網誌到 YouTube

2009 年 01 月 06 日

wordpress, youtube

YouTube 內有個好用的功能可以直接利用 XML-RPC 發佈影片到網誌，不過官方的說明手冊沒有提到要如何加入自己架設的 WordPress，看那些欄位也不知道該填寫什麼，而這篇就是簡易的教學明燈啦。不過根據我測試後的結果發現標題部份並不會正常寫入標題欄位，會變成內文的一部分 :p 步驟一：API Key 首先，你必須先擁有 WordPress.com API Key，如果有安裝 Akismet 的話，直接到「外掛 -> Akismet」內複製，沒有的話直接前往 WordPress.com 註冊新帳號即可。步驟二：確認 XML-RPC 開啟步驟三：登入 YouTube 新增上面的步驟都完成後，準備好你的 API Key 就可以登入 YouTube 進入「我的帳戶 -> 網誌設定」新增網誌。在網誌服務清單，選擇「Wordpress Self-Hosted」，使用者名稱及密碼填寫網誌後台的登入資訊，而最容易混淆的就是 API URL，這個欄位要填寫網誌的 XML-RPC 網址，以我的為例就是 http://essoduke.org/xmlrpc.php，而最後一欄就是填寫在步驟一複製的 API Key。步驟四：完成新增確認填寫無誤並確定新增，若是成功則會出現下列畫面，勾選後再次新增。完成後在「我的帳戶 -> 網誌設定」內就可以看到剛剛新增的網誌了！步驟五：發佈影片接下來，要怎麼直接把影片發佈到網誌呢？每個影片下方都會有「分享」的功能，點選後就會有可以填寫的欄位。最後補上一個嵌入高品質影片的小技巧：只要在影片路徑的最後方加上 &ap=%2526fmt%3D18 即可（前提是該影片得要有高畫質版本 XD）。資源參考： […]

XHTML 1.0 Strict 的 iframe 標籤替代方案

2008 年 12 月 23 日

html, validator, w3c, xhtml

前幾天裝了 XML-Google Maps Plugin，預設會輸出 iframe 來內嵌 Google Maps，只是 XHTML 1.0 Strict 已經不支援 iframe 這個標籤，所以改用下列方式替代：原來的用法： <iframe id="embeddedhtml" src ="http://www.ashcombe.surrey.sch.uk/MM_french/1a_self_family/self_family_fset.htm" width="100%" height="600"></iframe> 改成： <object id="embeddedhtml" type="text/html" data="http://www.ashcombe.surrey.sch.uk/MM_french/1a_self_family/self_family_fset.htm" width="100%" height="600"></object>> 參考來源：[#MDL-17702] iframe is not supported in XHTML 1.0 Strict – Moodle Tracker

技術文章, 資訊科技, 軟體分享

透過 RivaTuner 調整顯卡風扇轉速

2008 年 09 月 23 日

ATI, freeware, vga

ATI HD4800 系列的毛病就是溫度過高，有個不需透過軟體的方式卻只能固定風扇轉速，難道沒有調整各臨界溫度的風扇轉速更好的方法嗎？答案當然是有，只要透過 RivaTuner 即可輕鬆自訂各個溫度所需要的轉速，再也不需要煩惱固定轉速帶來的不安全感。要設定自動轉速功能必須先開啟 RivaTuner 的 Power User 註冊表：點選「Power User」頁籤，展開「RivaTuner \ Fan」更改「AutoFanSpeedControl」為「3」。 MinFanSpeedLimit 應該是固定最小轉速之用切換至「Main」頁籤，點選顯卡旁邊的小方塊，選取第一個「Low-level system settings」點選「Fan」頁籤，勾選「Enable low-level fan control」， Fixed 是固定轉速，不管是文書或玩遊戲，都是固定為這裡所設定的轉速，當然我們要的不是這個，請點選 Auto。 Lookup Entry 0 – 7 第一欄就是溫度，第二欄是此溫度所需要的轉速，請依照實際需求調整即可。請記得勾選「Apply fan settings at Windows startup」讓這些設定在開機時就自動套用。

技術文章, 資訊科技

jQuery 實用入門（二）表單篇

2008 年 08 月 17 日

javascript, jquery

網頁 Form 表單可以有很多 Javascript 應用，比如說表單驗證、聚焦提示、防錯誤措施等等，而這些功能通常可以經由 jQuery 簡化程式寫法，以下就是本期案例。案例頁面讀取完成即聚焦於第一個表單元件，並加入聚焦提示，送出時驗證是否都有填寫資料，若無則浮現提示文字，表單送出後將 submit 按鈕停用。這個案例使用了 jQuery 的語法串接特色: 將多個函式串接為一行，大大節省程式行數。

技術文章, 資訊科技

jQuery 實用入門（一）

2008 年 08 月 15 日

javascript, jquery

什麼是 jQuery？ jQuery 是一個快速又簡潔的 JavaScript 程式庫，簡化了讓你在 HTML 文件裡面尋找 DOM物件、處理事件、製作動畫和處理 Ajax 互動的過程，簡單地來說，jQuery 是一套足以改變傳統撰寫 JavaScript 的超酷函式庫方式。雖然如此簡單，不過對於剛接觸的人要立即入門應用還是會有些摸不著頭緒，而網路上眾多範例都是屬於進階、甚至高階技巧，所以我會盡量將這陣子接觸到並實際應用於專案內的實用案例寫成一系列文章，而第一篇就鎖定在網頁元素的操作，希望對於入門者有所幫助。剛開始的準備當然就是下載最新版本的 jQuery 並引入網頁的 head 區段，並準備好方便編輯 HTML 源碼的編輯器，我推薦 PSPad，一套支援中文、FTP 編輯以及高亮度語法的免費文書編輯程式。 <head> <script type="text/javascript" src="jquery.js"></script> </head> 基礎：網頁元素控制我合作過不少網頁設計師，對於網頁通常都是慣用 Adobe Dreamweaver 來規劃設計，所以對於 HTML 原始碼通常都一知半解，但是要活用 jQuery 就必須了解這些標籤元素和屬性的基本作用。舉個最常在 DW 源碼內出現的 id 屬性，多數使用 DW 的設計師都不清楚這個 id 有什麼用途？簡單來說，id 就是所謂的 identity（識別）也就是該元素的唯一識別名稱，單一網頁的一個 id 只能出現一次，為的就是方便使用 DOM 的方式來控制這些元素。

技術文章, 資訊科技

L1J in Linux

2008 年 08 月 09 日

看到不少人在 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，然後就是執行下列指令啟動伺服器： 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 擋了下來。 […]

技術文章, 資訊科技

Regular Expressions in MySQL

2008 年 07 月 14 日

圖片來源：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 為 […]

技術文章, 資訊科技

Multiple File Upload by AjaxFileUpload of jQuery

2008 年 04 月 25 日

ajax, javascript, jquery

AjaxFileUpload 是 jQuery 的擴充套件之一，可以使用 Ajax 來即時上傳檔案，不過缺點就是一次只能上傳一個。但是今天在研究 Multiple File Upload 搭配 AjaxFileUpload 時，找到一個土法煉鋼的方式可以達成一次上傳多個檔案。這是 AjaxFileUpload 原本的使用方法： $.ajaxFileUpload ({ url:'doajaxfileupload.php', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', success: function (data, status){ if(typeof(data.error) != 'undefined'){ if(data.error != ''){ alert(data.error); }else{ alert(data.msg); } } }, error: function (data, status, e){ alert(e); } }); 土法煉鋼法就是利用 Multiple File Upload plugin 所建立的 Array 讓上述過程跑 […]

form preview within Thickbox via Ajax

2008 年 04 月 22 日

ajax, javascript, jquery, plugin

突然想研究用 Thickbox 搭配 Ajax 來達成表單預覽的功能，就動手實作了一下。 jQuery Ajax var url = "preview.php?" + new Date().getTime(); $.post(url, {c: $("#content").val()}, function(result){ $("#preview_temp").html(result); tb_show('caption', '#TB_inline?height=480&width=640&inlineId=preview_temp', false); } ); 流程其實很簡單，就是把結果 post 到後端處理的程式，再把結果 callback 到頁面元素就行了，會用 post 就是不用受限於 get 的 2KB 限制。整個流程的重點在於「如何在 javascript 中呼叫 Thickbox」，方法就是直接使用 tb_show 函式，把 url 直接替換成呼叫 inline 的方式即可： //tb_show('Your Caption', href, group); tb_show('caption', '#TB_inline?height=480&width=640&inlineId=preview_temp', false); Demo: form preview […]

技術文章, 軟體分享

Flash Satay 轉換器

2008 年 03 月 22 日

圖片來源：Rasa Malaysia 之前為了文章內的 flash 影片能順利被 Google Reader 正確播放，有稍微向 W3C 標準無視了一陣子，不過…還是掩飾不了我是 W3C Standard 偏執狂的事實啊！以往總需要先把 flash satay 複製一份來改 flash movie 的網址、參數，重複單調的動作簡直讓我抓狂，索性就自己動手寫 Flash Satay 轉換器，目的是將使用率極高的 YouTube、Google Video、Yahoo Video 等影音平台的語法標準化，並且只要「單鍵操作」，不用再改一堆 code… Flash Satay 轉換器不過現階段只有把 YouTube 語法實做出來，而且 javascript 還沒整理…XD

技術文章, 資訊科技

Create optgroup element into select list with DOM

2007 年 12 月 20 日

javascript, jquery

今天在研究使用 Ajax 透過 jQuery 動態建立 Optgroup 清單。混沌兩個月，終於寫出稍微有用的文章了… JavaScript var obj = document.getElementById("list"); $.getJSON("ajax.asp", {id: idx}, function(json){ // if json data created... if(json.length > 0) { // get json data of optgroup for(var i=0; i

使用 jQuery 製作樹狀目錄

2007 年 10 月 10 日

javascript, jquery, plugin

過陣子可能有個案子要使用到無限多層的表達方法，參考過 YUI ，但是自己對於 jQuery 比較熟悉，所以就使用 Treeview plugin 來製作。資料表的結構也很簡單，我規劃下列幾個欄位：編號 id – int(4) auto_increment) 標籤名稱 label – varchar(50) 父項目編號 parent – int(4) 排序 sort – int(4) php 端採用遞迴方式實做： function treeview($parent) { $sql = " SELECT * FROM items WHERE parent=$parent"; $result = mysql_query($sql); $output = array(); while($record = mysql_fetch_array($result)){array_push($output, $record);} $cc = count($output); if(!$parent == […]

技術文章, 黑特爆發

How to Reset the Root Password of MySQL？

2007 年 10 月 09 日

剛剛突然發現我上午裝 MyDNS 時不小心把連線帳號的權限都給拿掉了 XD 更糟糕的是，root 的密碼我也搞丟了… 還好有找到這篇：B.1.4.1. How to Reset the Root Password 停止 MySQL Server 將下列文字建立為單行的純文字檔案 SET PASSWORD FOR 'root'@'localhost' = PASSWORD('MyNewPassword'); 使用 –init-file 參數重新啟動 MySQL mysqld_safe –init-file=剛剛建立的檔案登入後再更改密碼差點就嗚呼哀哉了

技術文章, 網站日誌

WordPress 2.3: wp_post2cat does not exist

2007 年 09 月 27 日

在升級 WordPress 2.3 以後，發表文章時可能會噴「wp_post2cat does not exist」錯誤訊息。主因是 2.3 升級程式會將 wp_post2cat 以及 wp_categories 兩個資料表刪除，而下列外掛或佈景會需要用到此兩個資料表： Google Sitemaps Generator older than 3.0 Posts by Author plugin Ultimate Tag Warrior K2 Theme 詳見：Solution for 2.3 database errors / wp_post2cat does not exist 臨時解決方案 – 將這兩個 table 重建回來 wp_post2cat CREATE TABLE wp_post2cat(rel_id bigint(20) NOT NULL AUTO_INCREMENT, post_id bigint(20) NOT […]

技術文章, 無用知識, 資訊科技, 趣味搜奇

本日無用知識

2007 年 09 月 27 日

請使用 Microsoft Excel 2007 計算 850 x 77.1… 答案會是「100000」看來是浮點數出了問題，不過只要將該儲存格的數值繼續做減、乘、除法運算，就會得出正確解答。延伸閱讀： Microsoft Excel : Calculation Issue Update Arithmetic Is Hard–To Get Right 850 * 77.1=？愛用Excel的你快試試看！ – Engadget 癮科技 Excel 2007 Bug : 850 * 77.1 = 100000 ? – 破月的紅軍