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 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

jQuery 的斑馬條紋做法

經過朋友提醒，jQuery 可以有不同的斑馬條紋做法，延續 MOTUDO 網誌: jQuery 整合 Blogger Data API 小工具 的內容來修改為 dev-motudo-zht-json-200901.xml，結果如上。

程式碼如下：

$("ul li:nth-child(even)").addClass("striped");

減碳駕駛朋友小工具 Motudo EcoDriving2 Gadget

減碳駕駛朋友小工具 Motudo EcoDriving2 Friend Gadget 是 Motudo EcoDriving Gadget 減碳駕駛計算機小工具的改版，新加入下面幾個工具：

1. Google Chart API
   
2. jQuery
   

其實這個版本是去掉 OpenSocial 的 Motudo Gadget 減碳駕駛朋友版小工具，只是該工具因為 IE7 問題還沒有擺上去，細節參閱 OpenSocial 客製小工具 Custom Gadget，於是拿掉 Google Friend Connect 的部份，直接用小工具形式呈現。

下面就是剪貼網頁內嵌 script 的呈現結果。

延伸

1. Motudo Gadget Google 小工具 - 減碳駕駛朋友小工具
   
2. 摩圖獨專案 - Motudo Project
   
3. MOTUDO 網誌: 減碳駕駛 Green Driving
   
4. MOTUDO 網誌: 超里 Hypermiling
   

OpenSocial 客製小工具 Custom Gadget

延續之前的MOTUDO 網誌: Google Friend Connect 的客製小工具 Custom Gadget測試，這次結合 Motudo EcoDriving Gadget 減碳駕駛計算機小工具 的概念來做，目前結果放在 Motudo Gadget 減碳駕駛朋友版小工具。

這個小工具目前無法放在 motudo-zht.blogspot.com 這個網誌邊欄，主要是因為 IE7 會掛掉 Google Friend Connect 裡面的 Custom Gadget，這是 IE 的 Bug，可以在The Reference Frame: Fix: IE7 with Sitemeter: Operation aborted 或是 Question: Why do I receive an "Operation aborted" error message when you visit a Web page in Internet Explorer? 找到進一步的資訊。


在 Google 還沒修正如何繞過這個 IE7 問題之前，暫時將不考慮放置這 Motudo Google Gadget - 減碳駕駛朋友版小工具 到網誌邊欄裡面，由於每一個頁面都會載入邊欄，會因為 IE 的因素，將整個網站內容全擋掉了，要求客戶升級 IE8 或是使用 Firefox 等不衝突的瀏覽器也是種解決方案，不過對於網誌部落格這類不特定讀者的應用，這樣搞不太可能。

一開始以為是自己程式的關係，於是試著移除 jQuery / Chart API / OpenSocial 的部份，等到剩下 HelloWorld 還執行不出來的時候，大概問題非開發者這端可以解決，你可以利用最簡單的官方 XML 來自行產出這個 IE7 問題測試看看。

1. OpenSocial HelloWorld Gadget XML
2. Google Friend Connect - Social Gadgets - Custom Gadget
3. Blogger Edit Layout - Add JavaScript/HTML
4. IE7
   

另外使用 Gene: The Man and His Dream: Custom Gadgets for Google Friend Connect 也一樣有這個問題，另外有人提到Bug report: friend connect + Google maps crashes IE7 - Google Friend Connect Discussion 也是類似情形。

除了 IE7 的議題之外，幾個 OpenSocial 相關的想法記錄一下。

1. 還沒有即時的預覽工具，現在必須上網站或是 Blogger 的邊欄來測試，問題是有些 Google Gadget 會有暫存快取的議題，有時候在 Google Gadgets Editor 改完存檔，並不會馬上看到反應，可能要等一下。
2. 使用 Google Gadgets Editor 可以取巧解決快取議題，不斷 Save As 更新 Gadget XML 的檔名來做測試，因為檔名是新的，不會有快取問題，等到除錯完成在做出最後版本。只是這類免洗 XML 作法最後會變成很多，所以非必要還是少用。
   
3. iGoogle Sandbox 裡面有個社群網路，現 Google Friend Connect 也建構一個，同一個 Google Gadget XML 放不同 OpenSocial Container 容器，呈現的結果會不一樣。
4. 請先用假資料先把外觀跑出來，等到調到滿意後，然後再來上線測試。也就是 OpenSocial 的資料先用假的，上線再改過來就好。
5. 關於 Google Chart API 有個比例的地方 chxr 跟 chds 要一起調整，否則會有比例問題，如果是 0-100 就不用改了，用預設值就可以，進一步參考 How to use Google Charts API with 6 examples at psychopyko
   

延伸

1. Google Friend Connect Discussion
2. Gene: The Man and His Dream: Sorry for Custom Google Friend Connect Gadget
3. Gene: The Man and His Dream: Google Friend Connect Custom Gadget work on IE now....
4. OpenSocial Demo XML
5. OpenSocial API Specification - OpenSocial
6. Google Gadgets Editor
7. Google Friend Connect: Add social features to your site
8. dev-opensocial-2008-1208.xml
9. Google Chart API
10. Using Visualizations - Google Visualization API
11. 摩圖獨專案 - Motudo Project

使用 Blogger Data API 連接遠端 AJAX 應用

常常會有一些小資料，不常異動的資料，如果可以結合 Blogger Data API，將資料放在部落格的某一筆文章裡面，然後如 MOTUDO 網誌: jQuery 整合 Blogger Data API 小工具一般用 alt=json-in-script來取用，就可以編修這些公開的小資料。

這樣作法的好處是直接使用現成 Google 服務組合即可，雖然是只有幾筆的簡單資料，偏偏有時候又需要改動，這樣的應用實在不需要使用到資料庫來使事情複雜化。

也許會有疑問既然資料異動不多，直接寫入 Google Gadgets Editor (GGE) 寫的程式碼裡面，不是一樣可以存起來。不過必須考慮到有些使用者不是開發者，改部落格文章可能比較容易一些，而且資料與程式分開也比較好維護，不過缺點就是其中一個掛了，這種服務模式就不行了。

要使用 Blogger Data API 來取得 JSON 需要知道所謂的 postID，這個數字大約十幾個字，目前的找法是先登入 Blogger 編輯之後，換成觀看頁面模式，這時候會出現一支筆在每篇文章的下面，取得該連結就可以得到所謂的 postID。

例如要取得 MOTUDO 網誌: jQuery 整合 Blogger Data API 小工具 這篇的內容，就需要 feeds/posts/default/postID 的 URI，然後加上 alt=json-in-script 就可取出內容來使用。不過這裡已經建立 MOTUDO 網誌: Json Data 20081205這個資料服務連結，所以測試是用新建立的資料集連結。

測試的 Google Gadgets XML 參閱 dev-motudo-zht-json-content-200812.xml，測試結果如圖展示，只是簡單的取出需要的 JSON 物件，然後取出屬性而已，下面為內嵌網頁可以參考。



延伸

1. jQuery 整合 Blogger Data API 小工具
2. jQuery 與 Google Gadgets 整合測試
3. Json Data 20081205

jQuery 整合 Blogger Data API 小工具

之前做了 MOTUDO 網誌: jQuery 與 Google Gadgets 整合測試，雖然 Google Gadgets 也有提供類似的功能，為何要用 jQuery 來寫？主要是移到別的地方，jQuery 還是可以用，脫離 Google Gadgets 的容器，例如 iGoogle 這類環境，很多東西都沒有用。

這次測試的連接這個網誌的功能，同樣的 Google Gadgets 也有提供相關的範例，可以直接改一下就可以用，參閱 dev-motudo-zht-blog-2008-12.xml，不過為了練習，所以使用 jQuery 連接 Google Blogger Data API 輸出的 JSON 格式。

該格式請參閱 Using JSON with Google Data APIs - Google Data APIs - Google Code 說明，注意的是一定要設 max-results 這參數，不然可能拉出幾百筆的資料，會讓客戶端等很久而且也沒有必要。

借用 Google Gadgets 的 UserPref 來做出設定功能，所以可改設為其他 xxx.blogspot.com 的網誌，使用於 getJSON 的連結如下。

http://"+prefs.getString("blogSite")+
"/feeds/posts/default?max-results=5&
alt=json-in-script&callback=?

另外輸出的 JSON 中要找出這個貼文的連結比較麻煩，連結放在 link 陣列之中，需要找那個有 alternate 屬性的才是，需要加個迴圈並判斷如下。

if(entry.link[k].rel=='alternate')
{alturl=entry.link[k].href;break;}

測試的 Google Gadgets XML 在 dev-motudo-zht-json-200812.xml ，另外嵌入到網頁的結果結果如下。



延伸

1. Google Gadgets Editor (GGE)
2. Google Data APIs Samples - Google Data APIs - Google Code
3. 使用 JSON 來讀取你的 Google Data
   
4. Using JSON with Google Data APIs - Google Data APIs - Google Code
5. Simple example of retrieving JSON feeds from Blogger Data API
6. dev-motudo-zht-blog-2008-12.xml

jQuery 與 Google Gadgets 整合測試

日前寫 MOTUDO 網誌: 八日小工具 Motudo Gadget Day8 的時候，利用的是 Google Gadgets Editor (GGE) 這個編輯器，這工具可以線上編輯觀察，實在很方便，不需要自己做好 Gadget XML 上傳到網頁空間。

雖然 Google Gadgets 有提供自己的 ajax 功能，不過這裡想要測試一下 jQuery 放在 Google Gadgets XML 裡面的效果。jQuery 一樣使用線上 AJAX Libraries API 提供的，所以不需要自己準備網頁空間。

首先要引入 jQuery ，需要先加入下面連結到 script 的 src 屬性裡面

http://www.google.com/jsapi

然後用 AJAX Libraries API 將 jQuery 載入使用。

google.load("jquery", "1");

使用的範例就是 AJAX Libraries API 裡面的範例，只是查詢改為 motudo 而已，另外載入後執行的 google.setOnLoadCallback 也需要換成 Google Gadgets 的 _IG_RegisterOnloadHandler 才會執行載入後的動作。

測試的結果可以參考 dev-jquery-ajax-200812.xml 或是下面網頁所展示。



延伸

1. jQuery: The Write Less, Do More, JavaScript Library
2. Google Gadgets
3. Getting Started: Legacy Gadgets API - Gadgets - Google Code
4. AJAX Libraries API
5. MOTUDO 網誌: 八日小工具 Motudo Gadget Day8
6. 摩圖獨專案 - Motudo Project

Tabs and jQuery 頁籤設計

MOTUDO上方有個調整幾個方格的頁籤，做這個已經一陣子了，想要改一下比較活潑，幾年前買的Don't Make Me Think書現在又拿出來看，主要是書中強力推薦使用 tab 頁籤的方式來當做網頁的導覽，這種技巧的好處書中 Four reasons why I love tabs (P79) 提到四點。

• self-evident 一看就明白用途
  
• hard to miss 很難視而不見
  
• slick 感覺有趣但是 HTML 可以很輕巧
  
• suggest a physical space 頁籤活化後，形成該頁浮到前面的視覺效果

基本上原來格式已經差不多，現在像要做的是滑鼠移過去的圖示效果，請參閱 jQuery Tutorials for Designers 的 5b. Animated hover effect #2，因為用 title 比較方便排版。

這裡的 jQuery: The Write Less, Do More, JavaScript Library 直接用 AJAX Libraries API 的版本。 載入 http://www.google.com/jsapi 之後，加上 google.load("jquery", "1.2.6") 就可以用 jQuery 1.2.6 版了，不用另外上傳 jquery.js。

結論是做完就後悔了，第一是 IE7 中，hover.png 會先出現一個黑框然後才變成透明，看起還好像壞掉，另外沒有預期中資訊比較豐富，雜訊反而等於多一層，最後還是拿掉，但是把字體改大一點。

延伸

1. MOTUDO 網誌: jQuery 做簡易問答網頁
2. MOTUDO 網誌: jQuery