jQuery validation 的 addMethod

Thursday, March 27, 2008

jQuery 的 Validation plugins 是很強大的，基本上可以滿足各種需要。剛剛被一個小問題困擾了好一陣子，特此記下。我寫了類似的東西：

PLAIN TEXT
HTML:
  1. <div id=“error” style=“display:none”><ul></ul></div>
  2.  <form id=“form1”>
  3.      <input type=“hidden” name=“fff” id=“fff” value=“” class=“special” />
  4.  </form>

PLAIN TEXT
JavaScript:
  1. $.validator.addMethod(“special”, function(value, element, params){
  2.     //validate….
  3.     return result;
  4.  }, “This is a special checking”);
  5.  
  6.  $(document).ready(function(){
  7.      $(“#form”).validate({
  8.         messages:{ fff: {special: “This is a special checking!”} },
  9.         errorContainer: “#error”,
  10.         errorLabelContainer: “#error ul”,
  11.         wrapper: “li”
  12.      });
  13.  });

結果怎樣也出不到那個自訂的 validation rule，苦苦深研追踪 source code 後才發現，問題在於 addMethod 裏的 method 參數問題，而正確的寫法是：

PLAIN TEXT
JavaScript:
  1. $.validator.addMethod(“special”, function(){
  2.     //validate…
  3.     return result;
  4.  }, “This is a special checking”);

那個 method 的參數數量如果大於 3，plugins 會認為你所加的是有參數的 validation，即在 element class 可能是 {special:abc} 之類，所以當看到 input 裏只是 special 就不會偵測到。

這樣很「正路」吧？但花了不少時間去看才知道。

Tags: , , , ,
Filed in 電腦 | 回應(2) | 永久連結

Appjet 陽春 Outliner

Monday, March 3, 2008

最近在 Appjet 試寫了一個簡單的 Outliner 程式，主要是想試用這個服務，也想寫一個自己可能會用得著的程式。

Appjet 早在上年十二月就已經出現了，可以在瀏覽器完成所有開發、測試、發佈等動作，本身也提供 hosting 服務。使用 Javascript 為後台語言，上手不難。簡化了後台儲存，只需直接寫入 StorableObject 。其提供的 library 可作簡單的 request dispatch。加上 wget 等一類存取其他網站的功能，可以很方便做出一些 mashup 應用。

而這個 Outliner 也是很簡單的，用戶登入後可以建立不同的 outline (其實也只是 nested list)。我的要求是：

  • 可以快速地記下一些 idea 或 draft，因此 outliner 的介面必需可以使用鍵盤作全面運作
  • 定時自動儲存
  • 可以列印

在開發上，用戶 login 直接使用 lib-user 庫，所以十分簡單。至於介面則要寫 Javascript 了，我使用了 jQuery 並開發了一個 outliner plugin 來使用，主要處理所有 add/delete/edit node 的運作和鍵盤連接。至於排版則使用了 YUI Grids CSS 。

開發上，Appjet 的部份並不難，反而是花比較多時間在頁面 Javascript 上的啄磨，不過基本上沒有遇上甚麼大難題,出來的東西也算是做到心中想要的效果，比較麻煩的是現在預設的控制鍵大都是英文字母，如果想打一個中文 outline 就要不停切換…

而對於 Appjet 的開發環境，有以下感想：

  • 因為 source code 是單一頁的關係，所以程式碼一多時就會有些亂
  • Appjet 並沒有 file hosting 的服務，除非你將所有檔當成 storage 物件來存，否則也是要找一些免費空間來放一些 scripts、css 等，我使用了 cachefile.net 和　　googlepages.com 來放置。
  • Appjet 本身有 dispatch request 的 library，但就太簡單了些，如果慣於 MVC 模式的話可能會覺得亂。
  • Template 要自己想辦法。看到這個 lib-templates 不錯，不過今次並沒有使用。
  • 若果未來要更改 data structure，看來暫時只可以用 shell 做 up/down 的程序。

總括來說，Appjet 可以來開發簡單至中等複雜的應用，但若果是大型的，就必須自己開發一堆 library/framework 來支持了，還好在 Appjet 裏建立和引用 library 很簡單。

各位也可以試用這個 Outliner ，也是 Open Source 的 (基本上全部 Appjet 上的應用也是啦)，但緊記這只是實驗性質，不要將重要資料放上去就是了。

Tags: , , , ,
Filed in 網絡 | 回應(0) | 永久連結

Javascript 一路走來

Tuesday, August 21, 2007

在那個 DHTML 的時代，市面上有很多很多不同的 Javascript 書藉，教你做很多不同的特效、小程式、小工具，很多時都是 Quick and Dirty，再加上瀏覽器戰大家各推不同的 HTML tags 以綑綁用家，結果就是一大堆的文件碼、程式碼、排版碼、修飾碼等等混在一起，難以維持。

在 Ajax 大行其道的今天，Javascript 不單單是一種小腳本，而再被重視為一種語言，大家開始深入探討其語言的運用、設計、模式，各種 Javascript Libraries 出籠來克服各種瀏覽器支援的頭痛問題，製作令人眼前一亮的特效。再加上推廣使用網頁標準，HTML、CSS、Javascript 終於各歸其位。

一些比較「認真」的 Javascript 書也開始出現，由基礎 OO，到 code resue、debug、Ajax，甚至於網頁標準有關的 Unobtrusive Javascript、Progressive enhacement 等等。無論是新舊的開發者，也可以重新認識這一在每個瀏覽器都有的語言。

Javascript 還會不斷地發展，新的 libraries，新的版本，甚至有人研究 server-side 的 Javascript 應用 (使用 rhino)。另一方面，Ajax 重燃 RIA熱潮下各大廠推出不同的 runtimes/Platform，究竟未來是「一個瀏覽器走天涯」，還是桌面可離線的網絡應用為主？ Javascript 又會變成怎樣呢？太多因素影響太難估計，但也令開發者期待。

Tags: ,
Filed in 網絡, 電腦 | 回應(0) | 永久連結

@media 07 在香港

Friday, February 23, 2007

在 Happy Designer 看到原來 @Media 07 會在 香港 搞！日期是 31/5 和 6/1 兩天。一眾 Web Standards 猛人 Dave Shea 、 Molly Holzschlag 、Jeremy Keith 等等都會是主講嘉賓！

在香港這個 Web Standards 荒蕪之地，竟然會舉辦如此盛事，實在令我很意外。莫非是政府宣傳「亞洲國際都會」的形象夠力？ (想起上年也是在香港搞 維基年會 的) Zonble 提醒了我，原來人家都這樣說了：

Andy Budd, Molly Holzschlag, Jeremy Keith, and Dave Shea will help to raise the awareness and teach the application of best practices in modern web design in an area of the world that is slightly behind the likes of North America and Europe

就是因為夠「落後」才被人家選上的。其主講內容暫時還未有定好，但已經有好些題目，看上去真的很有「教育」意味呢 (也可能是我主觀了) ，如：

  • A Best Practice Overview of (X)HTML and CSS
  • Making the Jump to Tableless Design
  • Web Accessibility Foundations
  • More Than Layout: Ultimate Design Control with CSS
  • The Behaviour Layer: Using Javascript for Good, not Evil
  • The Broken World: Solving the Browser Problem Once and For All

再看一下入場費用如何：Conference only HK$5,000。我自己並沒有參加這類 Conference 的經驗，但對我來說實太貴了… 所以，官方的宣傳用圖片，這個最合我心情了：

@media07

相關連結： @Media07

Tags: , , ,
Filed in 網絡, 電腦 | 回應(3) | 永久連結

修改使用 Snap Preview

Wednesday, December 20, 2006

最近看到有一些 Blogger 都加入了 Snap Preview 的功能，就是當滑鼠在連結上時，會自動彈出該網站的抓圖。對此，有些 Blogger 覺得這增加了實用性，有些則覺得彈出來的圖很煩人和阻礙閱讀。

我自己定期有做網摘，所以我覺得這個預覽功能應該能幫助到瀏覽的人吧？至少在點選連結之前可以先預覽網站。不過，這些彈出來的圖也的確會煩人，最好是讓讀者有選擇權。因此有了些修改念頭，目標是：

  1. 只在網摘篇章出現 Snap Preview
  2. 預覽不直接加到連結上，而是後補一個「預覽」連結
  3. 點擊「預覽」才出現預覽，而不是 mouse over

首先，Snap Preview 本身有提供可修改的參數，令到預覽功能只在特定連結上，只要將其參數 ap=1 改成 ap=0 就可以了：

PLAIN TEXT
HTML:
  1. <script defer=“defer” id=“snap_preview_anywhere” type=“text/javascript”
  2.  src=“http://spa.snap.com/snap_preview_anywhere.js?ap=0&key=SAMPLE_KEY&sb=0&domain=www.example.com”></script>

修改這個後，預覽功能只會加於所有 class=“snap_preview” 的連結上。

然後，就是替網摘文章加入預覽連結，因為不想改動文章連結結構，而且反正這個功能只有開啟了 Javascript 才可以用，所以就索性用 Javascript 插入連結好了。這樣的話，在 RSS Reader 也不會見到預覽。我使用了 jQuery 來做，代碼如下：

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.     $(“div.post”).each(function(){
  3.         var hasTag = false;
  4.         $(this).find(“span[@id^=tags]> a”).each(function(){
  5.             if(this.innerHTML==‘bookmark’)  hasTag=true;
  6.         }).end();
  7.         if(hasTag){
  8.             $(this).find(“div.entry a”).not(“.snap_preview”).each(function(){
  9.                 var preview_link = document.createElement(“a”);
  10.                 $(preview_link)
  11.                     .href(this.href)
  12.                     .addClass(“snap_preview”)
  13.                     .css({“font-size”:“0.7em”,“padding-left”:“0.5em”})
  14.                     .html(“[預覽]”)
  15.                     .mouseover(function() {   
  16.                         $(‘#snap_preview_anywhere_main’).hide();   
  17.                      })
  18.                     .click(function() {   
  19.                         $(‘#snap_preview_anywhere_main’).show();   
  20.                         return false;   
  21.                      })
  22.                     .insertAfter(this);
  23.             });
  24.         }
  25.     }); 
  26.  });

代碼做的是：找所有頁面上的文章，如果該文章的 tag 有 ‘bookmark’ 的話，就在該篇的連結後再加一個「預覽」連結，而其 class=“snap_preview“。

至於目標 3，將 attach 在 onmouseover 的 event 變成 onclick，可能要 hack snap preview 的 script，因為不想有 tight coupling，所以還是放棄了。各位如果有可以不用 hack script 的方法，煩請指教。

Update: 使用了 Augus 提議的方法，現在已可達成目標 3 了。不過有時候 Preview 出現的位置會有點怪

Tags: ,
Filed in 電腦 | 回應(5) | 永久連結

« 較舊篇章