利用做過MOTUDO 網誌: jQuery 做簡易問答網頁的經驗，選幾個 jQuery 的簡單問題來做 jQueryQuiz Gadget 看看。程式碼請參閱jquery-quiz-2009-0213.xml，可以放到 igoogle 看看，或是利用Add Gadget to Your Webpage來產生 javascript 程式碼，內嵌到網頁看看。
延伸
2009年2月13日 星期五
jQueryQuiz Gadget 問答小工具
利用做過MOTUDO 網誌: jQuery 做簡易問答網頁的經驗，選幾個 jQuery 的簡單問題來做 jQueryQuiz Gadget 看看。程式碼請參閱jquery-quiz-2009-0213.xml，可以放到 igoogle 看看，或是利用Add Gadget to Your Webpage來產生 javascript 程式碼，內嵌到網頁看看。
延伸
2009年2月12日 星期四
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，與位置無關。
2009年2月11日 星期三
利用 jQuery 做網頁區塊折疊
有的時候網頁區塊需要如圖示一樣折疊，先用 div#motudo div:gt(0) 找出除了第一塊之外的區塊，然后使用 hide() 加以隱藏，當觸發下一頁事件，如 div.hide().next().show() 所做，先將目前區塊隱藏，然后讓下一個區塊展現出來。細節請參閱 hello-fold-2009-0204.xml，也可以將這個 gadget 加到 igoogle 去測試看看。
2009年1月15日 星期四
利用 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 已經出來了，有興趣的人可以進一步參閱下面連結。
jQuery 的斑馬條紋做法
經過朋友提醒，jQuery 可以有不同的斑馬條紋做法，延續 MOTUDO 網誌: jQuery 整合 Blogger Data API 小工具 的內容來修改為 dev-motudo-zht-json-200901.xml，結果如上。程式碼如下：
$("ul li:nth-child(even)").addClass("striped");
2009年1月14日 星期三
2009年1月6日 星期二
訂閱：
文章 (Atom)
發表文章
