Hello, jQuery Mobile

開始整理 jQuery Mobile 文件了,這東西是 jQuery 進一步衍生、專為行動裝置發展出來的 JavaScript 函式庫,功能之強大,延襲了 jQuery 的特性,寫得更少,作得更多,幾乎也將成為 HTML5 開發行動裝置 Web App 的專屬標準了,所以,HTML5 熟練之後, jQuery Mobile 就是下一個要攻佔的灘頭堡了。

每次寫到 Hello 這個字,就表示苦難開始了,只是現在書籍的出版速度已經跟不上技術的進化,所以接下來相關的內容就直接線上發表吧,還有在我們的研討活動課程中討論,至於書,就等這系列集結完成,有出版社要再出版吧。

這一篇,來看看  jQuery Mobile 的效果。現在建立一個空白的文字檔,將其命名為 xxx.html , xxx 自己訂然後存檔即可。首先至以下網址下載最新的 jQuery Mobile 函式庫:


有兩個最基本的檔案,分別是JavaScript 檔案 jquery.mobile-1.1.0.min.js 與 CSS 檔案 jquery.mobile-1.1.0.min.css ,將其引用至網頁裏面的 <head> 區塊,同時必須搭配 jQuery 函式庫,你也可以透過 CDN 的方式直接透過 URL 來提供,就不需要去下載檔案了,這比較方便測試,配置完成之後內容如下:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 

無論 jQuery 或是 jQuery Mobile 都在持續的演進,因此其中的版本號碼會隨著改版增加,請自行更換即可。完成必要檔案的配置,接下來就可以撰寫自己的行動裝置網頁了。於稍早建立的 html 檔案中,除了上述的 <head>標籤內容之外,於 <body> 區域配置以下的 HTML 標籤結構:

<body>
    <div data-role="page">
        <ul data-role="listview">
            <li><span onclick="alert('HTML5 完美風暴');">HTML5</span></li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>jQuery Mobile</li>
        </ul>
    </div>
</body>

其中配置了 <div> 標籤,作為網頁的內容容器,其中建立一個 <ul> 標籤所定義的選單,這些是標準的 HTML 標籤,不過請特別注意 data-role 屬性,當你將此屬性的屬性值設定為 page ,則 <div> 標籤的內容,會自動以行動裝置風格的頁面樣式呈現,同樣的,屬性值 listview 表示將以專屬的選單風格顯示 <ul> 標籤內容的清單項目。現在於 iPhone 模擬器檢視此網頁的配置,你會看到以下的畫面,不需要任何繁雜的設定,一個行動裝置專屬風格的選單網頁便完成了。


當然,這距離真正的 Web App 開發還很遠,不過是很重要的基礎,進入 HTML5 行動裝置的世界就從這裏開始。




沒有留言: