jQuery Mobile快速開發教學mobile 網站入門

在MSDN邊做邊學系列中有一篇 jQuery Mobile 開發的文章,主題是講解使用 jQuery Mobile 及 ASP.NET 開發跨行動裝置網站 (Mobile Web),ㄚ琪就在想可以使用 jQuery Mobile 及PHP來開發跨行動裝置網站嗎?看來我們夠幸運的了,找到碁峰出版的PHP+ MySQL與jQuery Mobile跨行動裝置網站開發,看來是有解了,除了下面MSDN上所列的jQuery Mobile的特色外:

  • 以 jQuery 為核心
  • 輕量化檔案
  • Html5 Markup-driven
  • 自動切換排版
  • 支援滑鼠與觸碰事件
  • WAI-ARIA
  • 強大的佈景主題系統
  • ASP.NET MVC 的支援
  • 支援市面上大部分行動裝置
  • 畫面的一致化
  • 多樣化的 UI

是否還有其他特色呢?ㄚ琪從jQuery Mobile的官方網站看到這一句

A Touch-Optimized Web Framework

用中文翻譯就是說這是一個觸控最佳化的網頁框架,什麼是框架?碁峰有很好的解釋:

框架(Framework)是一組類別物件的集合,可以提供特定類型軟體的一組服務,支援可重複使用的詳細設計和程式碼。簡單的說,它就是一個應用程式的準軟體,提供特定類型軟體的功能,我們只需繼承和使用框架的元件,就可以快速建立特定類型的軟體程式。

有一個自動切換排版的特色我懷疑是 responsive web sites的翻譯,那麼大多數的人應該是譯做響應式網頁設計(英語:Responsive web design,通常縮寫為RWD),這就讓人大感興趣多了。jQuery Mobile又把jQuery的 Write less, Do more口號帶到另一個層次,你不需要為每個手機裝置或OS撰寫唯一的應用程式,jQuery mobile框架允許你只要設計一支有品牌的響應式網站或是應用程式,這些可以用在所有流行的智慧型手機、平板跟桌面的平台上。

2014-11-14_165739

碁峰書中列了主要的系統平台,不過完整的資訊還是請參閱Graded Browser Support

另一值得一提的特色就是強大的佈景主題系統,你可以讓你的網站跟app擁有個人的品牌特色,怎麼做?非常地容易,可以到ThemeRoller for Mobile,就可以用拖拉顏色的方式來設定。

現在馬上就到jQuery Mobile Download Builder,就可以有訂製化的工具可以使用,速度可是很神速的喔。

我們現在就來看看比jQuery Mobile 1.2.1版的Getting Started with jQuery Mobile還要新的1.4.0版的Introduction簡體翻譯:http://www.jqmapi.com/demos/intro/,原官方網站的介紹是1.4.5版:http://demos.jquerymobile.com/1.4.5/

更進階的工具,朋友們可以試試快速開發行動 App 的最佳工具:EZoApp,有教學可以閱讀:EZoApp 教學手冊

以jQuery Mobile開發行動裝置網站,可能是下階段我們要關注的,如果想要參考更都書籍可以閱讀:

Mobile Web 程式設計 第二版

Mobile Web 程式設計

 

感謝你看到這裡,很快就可以離開了,但最好的獎勵行動就是按一下幫我分享或留言,感恩喔~

點我分享到Facebook

2 則留言


  1. 大大您好,最近也剛開始玩JQM,所以想請問一下大大,JQM主要是針對手機等行動裝置,那麼如果說一個網站要同時兼具RWD,也就是還有電腦版的話,那麼JQM做起來不就怪怪的嗎?所以想請問大大不知道該怎麼處理不同裝置的不同版型?是用mediaquery偵測然後切換一般PC的css跟JQM嗎?謝謝囉~~^^

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *