jQuery and NetFront Browser 3.4

日前做了代謝症候群問答小工具 Motudo SyndromeX QA Gadget之後，想看看是否可以放到這支SAMSUNG SGH-J208手機上面，查了一下資料，這支手機是使用 NetFront Browser v3.4，所以就要測試 Netfront browser v3.4 與 jQuery 的執行情形。

jQuery 本身有個jQuery Test Suite可以測試，不過這是線上版本，為了節省金錢以及方便調整，所以改為離線版本，同時修剪出一個只有 core.js 的測試版本。

結果是無法執行，另外附上其他瀏覽器的 jQuery TestSuite 離線版本測試結果。

Google browser 1.0.154.48

3 tests of 545 failed (core.js) /3 tests of 1120 failed

Firefox 3.0.6

2 tests of 545 failed (core.js) /2 tests of 1120 failed

延伸

1. 代謝癥候群問答 小工具 - Motudo Gadget
2. MOTUDO 網誌: jQuery
3. 摩圖獨專案 - Motudo Project

Motudo Gadgets 小工具破500訂閱

註冊到 igoogle 目錄的小工具有圖有真相，內行的都知道，Motudo Gadget Google 小工具 - 減碳駕駛計算機小工具今天有 401，明天可能變成小于100，所以趕快照下來，記錄一下，沒想到這些冷門 gadget 也有人有興趣。

至于破 500 的算法是加上超過 100 的 3 個小工具而來，大約 600。

延伸

1. Motudo Gadget Google 小工具 - 減碳駕駛計算機小工具
2. Motudo Gadget Google 小工具 - 電力碳標籤小工具
3. Motudo Gadget Google 小工具 - 減碳飲料計算機小工具
4. 摩圖獨專案 - Motudo Project

代謝症候群問答小工具 Motudo SyndromeX QA Gadget

代謝癥候群問答小工具 Motudo SyndromeX QA Gadget 利用之前練習的 jQuery 功能延伸而成，這個小工具幫助你記住相關資訊，當然也可以分享給其他人。

另外關於高度問題需要說明一下，之前 Google gadget 都是利用 Require feature dynamic-height 來自動調整高度，但是代謝症候群問答小工具 Motudo SyndromeX QA Gadget里面的下方說明是利用 jQuery 動態加上去的，這種做法會導致 dynamic-height 無效，所以需要加上 height 300 來固定高度。

至于寬度盡量不要在 css 里面設定，留給 gadget 自己調整。

延伸：

1. 代謝症候群問答小工具 Motudo SyndromeX QA Gadget
2. jQueryQuiz Gadget 問答小工具
3. 國民健康局　－　代謝症候群
4. MOTUDO 網誌: 早死的腰圍 Belly Fat
5. MOTUDO 網誌: Metabolic Syndrome 代謝症候群
6. 摩圖獨專案 - Motudo Project
7. 註冊到 igoogle 目錄的小工具
   

jQueryQuiz Gadget 問答小工具

利用做過MOTUDO 網誌: jQuery 做簡易問答網頁的經驗，選幾個 jQuery 的簡單問題來做 jQueryQuiz Gadget 看看。

程式碼請參閱jquery-quiz-2009-0213.xml，可以放到 igoogle 看看，或是利用Add Gadget to Your Webpage來產生 javascript 程式碼，內嵌到網頁看看。

延伸

1. MOTUDO 網誌: jQuery 做簡易問答網頁
2. MOTUDO 網誌: 利用 jQuery 做網頁區塊折疊

jQuery 做簡易問答網頁

經過MOTUDO 網誌: 利用 jQuery 做網頁區塊折疊練習之後，將網頁區塊折起來可以用來幫忙做個簡易問答網頁應用。

程式碼請參閱 hello-survey-2009-0204.xml，checkAns 是個簡單的 jQuery extension，直接掛在 div.children().filter(":checkbox:enabled") 後面確認答案，正確答案需要在 checkbox 的 value 後面加上 YES 當作辨識之用。

如果需要看看操作的樣子，可以將 hello-survey-2009-0204.xml加入 igoogle就可以，要改一般 HTML 只要改用 $(document).ready() 方式就可以。

更新：使用 children 這類位置的 selector 需要注意可能會因為位置改變而失效，例如將 checkbox 放入 p 里面就可能發生這類問題，建議改為 mydiv.find(':checkbox') 比較可靠，因為 find 是按照條件找出 checkbox，與位置無關。

利用 jQuery 做網頁區塊折疊

有的時候網頁區塊需要如圖示一樣折疊，先用 div#motudo div:gt(0) 找出除了第一塊之外的區塊，然后使用 hide() 加以隱藏，當觸發下一頁事件，如 div.hide().next().show() 所做，先將目前區塊隱藏，然后讓下一個區塊展現出來。

細節請參閱 hello-fold-2009-0204.xml，也可以將這個 gadget 加到 igoogle 去測試看看。

利用 jQuery 做點擊前確認

網頁常常需要做點擊前確認，例如檢查連結到其他網站，或是多一次確認，或是如上圖的提醒等，都可以用 jQuery 的 Selector 的 Attribute Filters 來完成。

首先利用 $("a[href$=pdf]") 將連結找出來，$=代表最後的字是 pdf，再用 bind 將 click 的確認 confirm 功能加上去，這樣就完成。

程式碼：

$("a[href$=pdf]").bind(
'click',
function(event){
return confirm("PDF檔案很大，確定要下載?");
});

如果要檢查是否外部網址，可以考慮用a[href^=http://]來完成。或是加上跳出新視窗 attr("target","_blank")的功能等等。

最近 jQuery 1.3 已經出來了，有興趣的人可以進一步參閱下面連結。

1. jQuery: » jQuery 1.3 and the jQuery Foundation
2. jQuery 1.3來了!! - 黑暗執行緒
3. jQuery 1.3 at Gea-Suan Lin’s BLOG