分類
手機大未來

jQuery Mobile版本

從阿維筆記本這裡 (http://blog.hsdn.net/1465.html) 看來的, 原來 jQuery 也有 mobile 的版本! 官方網址在這裡: http://jquerymobile.com/

隨著手機的效能愈高, 能支援的網頁複雜度及相容性, 也隨著在手機上的行動瀏覽器而提升, 一般早期在做手機網站大多是單純化, 減少不相的 css 及簡單呈現的方式為主, 不過有了 jQuery for Mobile, 相信又有更多的可能.

這個列表是用來說明目前 jQuery Mobile 支援各型手機 os 及瀏覽器的相容狀況, 共分成了 A, B, C, F 4級, A 為品質最好, B 為次之, C 為較差, 而 F 則是無法相容, 圖片引用自: http://jquerymobile.com/gbs/

看起來相容性最好的是 android 方面的瀏覽器.

有 jQuery for Mobile 對於行動網頁開發者來說, 可以節省不少工夫在實作網頁程式上, 不過行動網頁的要求是更精簡, 更容易地操作, 利用這樣的開發工具, 的確也能減低不少負擔. 來看看 ui 上的狀況: http://jquerymobile.com/designs/

相信對於已經上手 jQuery 的 Developer 們, 這個是一個不錯的好工具!

分類
Javascript

jQuery traverse元件屬件

traverse 是程式寫作上一個還算蠻重要的 runtime information. 尤其在 web 上, jQuery 的概念整個就是建立在這樣概念上. 利用 selector 將要找的東西找出來, 再進行更動或讀取這樣的狀況.

現在利用一個小案例來說明這個 case. 我要找出頁面上所有有 onclick 屬性的 anchor, 並加以標註出來, 語法是這樣的:

$("a[onclick]").addClass("highlight1");

是的, 你沒看錯, 就是這樣一句而已. 這句語法的解釋是這樣的:

  1. $(“a”) 是找出所有的 anchor
  2. $(“a[onclick]”) 是找出所有的 anchor 而且有 onclick 屬性的
  3. addClass 就是加上一個 css class

就只是這樣而已. 我們來看看範例吧: http://sample.diary.tw/17/j1.html 其中的 button: [find anchor with onclick attr.] 按下後, 會將有 onclick 屬性的 anchor 用 highlight1 的 lightgreen 的背景色加上, 就很清楚了. 其中只有 f1(), f2() 會呈現出來效果, 而其他的 anchor 沒有下 onclick 屬性的, 都不會被影響.

接下來找出 anchor 的連結屬性, 開頭是 http://www 的, 這個也很有趣, 語法如下:

$("a[href^='http://www']").addClass("highlight2");

也是一樣, 一行搞定, 語法說明如下:

  1. $(“a[href^=’http://www’]”)是指 anchor 中, href 屬性開頭為 http://www 的.
  2. addClass 就是加上一個 css class

(在1.2版時, 還可以使用 @在 href 前, 也就是 @href^=’xxx’ 這樣, 不過在 1.2 已不推薦使用, 1.3 時已不支援了, 要特別注意 @ 這個符號囉)

一樣來看範例, http://sample.diary.tw/17/j1.html 其中的 button: [find anchor start with http://www] 按下後, 其中開頭為 http://www 的 anchor 會套用 lightblue 的背景色, 是不是很方便呢?

其中的 ^= 是開頭為, 而 $= 是結束為, 而 *= 是含有, 所以若是要找連結為 .pdf 結尾的, 可以使用:

$("a[href$='.pdf']")

再來就是談 traverse 的語法, 其實也很單純, 是利用 each 這個方法, 再利用匿名函數取得陣列代號, 就可以將符合條件的元素陣列逐一列舉出來, 如下:

var elements = $("a[href^='http://www']");
var message = "";
$(elements).each(function(e){
    message += elements[e].href+"\n";
});
alert(message);

程式碼說明如下:

  1. 先將符合條件的 objects 都放入 elements 陣列
  2. 再利用 each 方法, 配合匿名函數, 將 elements 陣列內的 object 的 href 屬性結合成產生的字串訊息
  3. 最後再將訊息秀出

參考範例: http://sample.diary.tw/17/j1.html 其中的 button: [traverse anchor start with http://www] 就會將所有開頭為 http://www 的 object 的 href 屬性 alert 出來囉.

相信對於使用 jQuery 的朋友們, 能更清楚整個運作的邏輯..

分類
Javascript

好棒的jQuery介紹網站

jQuery, 因為最近一些狀況(就是被 m$ 整合進入 visual studio ), 瞬間變成當紅炸子雞. 讓想學的人更想學, 而不知道或原本沒想學的人也想學.

這兩天在看一些資料的時候, 無意間找到這個網站: www.visualjquery.com , 還真不是蓋的, 是 “visual” 的 jQuery 哦, 所有的介紹都直接用視覺化的方式呈現, 方便學習 jQuery 的人, 無論是新手, 老手都很適用的一個了解 jQuery 技術的網站. 一定要來看看哦!

分類
.net

微軟將於Visual Studio整合jQuery進來了!!

最近的消息, 微軟將於Visual Studio嵌入jQuery這組Open Source的函數庫了. 可以參考下面文章連結: 微軟Visual Studio將嵌入開放源碼jQuery程式庫

jQuery, 有在寫 Web application的工程師應該不陌生, 好用又洗鍊的語法, 方便容易使用的方式, 整個和 Web UI 可以做相當方便結合的一組 library 最近因為微軟的這個消息, 對於之前投資學習 jQuery 的 developer 們來說, 真是個不錯的好消息.

當然, 無論是否於 Visual Studio 內嵌入 jQuery, 大家也都可以直接於 web application 上使用這組 library 沒有什麼大問題, 不過相信對於整合度及方便性來說, 能夠和 Visual Studio 整合當然是再好不過了.

不過和原來的 AJAX 那組 framework 要怎麼整合, 如何取捨, 或是同時並存也是一個有趣的課題. (據消息來說應該是會改用 jQuery)相信這個消息對於已經同時正在使用 asp.net 開發及 jQuery library 的 developer 來說真是個好消息呢.

相關文章及連結:
google blog search: link
微軟將在 ASP.NET 相關產品中全面支援 jQuery
jQuery进入微软和Nokia的解决方案
微軟也搶著支援jQuery?
jQuery從此有名有分,我出運了!