用實例學習jQuery Mobile系列之一HelloWorld

寫在前面

這裡是本人學習jQuery Mobile的過程,現在將學習過程中的實例一一展現出來,希望能幫到更多的新手。本系列中實例都經過了本人的親自測試。

在介紹過程中有不對的地方或不嚴謹的地方,歡予以糾正。感謝大家!

與其他教程不同的是,本教程都是通一個個實例進行展示。關鍵性介紹都會在代碼中穿插。

本文是學習教程的第一課,演示了jQuery Mobile的框架。

測試環境搭建

jQuery Mobile是客戶端代碼,但其基於ajax技術與伺服器端交互。因此擁有一個Web Service,才能更好的體驗jQuery Mobile的功能。這裡不打算介紹Web Service的搭建過程,朋友們可以根據自己的實際需要自行搭建。

本人使用的wamp環境,涉及到伺服器端的代碼都是用php語言寫的。

工具準備

要學習jQuery Mobile,需要下載安裝以下文件:

【Opera Mobile Emulator】 http://www.opera.com/zh-cn/developer/mobile-emulator。目前最新版本12.1。在PC機上模擬移動設備,可以在此設備上打開這些例子。  【jQuery核心庫】 http://jquery.com/download/, 目前最高版本為11.0。不建議使用jQuery2.x,其不支持IE6/7/8,兼容性不好。  【jQuery Mobile】 http://jquerymobile.com/,目前最高版本為1.4.2,但本文中的例子都是基於1.3.2來演示的。下載地址:http: //jquerymobile.com/resources/download/jquery.mobile-1.3.2.zip    下載後,將js文件保存到js文件夾中,css文件保存到css文件夾中。將jquery.mobile-1.3.2.zip中的images文件夾拷貝到css文件夾中。文件夾結構如下:

其中,001_HelloWorld.html為此例子文件。jqm為Web網頁文件夾下的一個文件夾。

代碼

將以下代碼保存到為jqm_HelloWorld.html

不知為什麼,在這裡貼不了代碼,一貼代碼就提示「未知錯誤」,保存不了。

只好先以圖片的形式顯示在這裡,需要的朋友可以去我的百度網盤中下載。

下載地址:http://pan.baidu.com/s/1dD261up

運行

打開Opera Mobile Emulator,地址欄中輸入:

http://localhost/jqm/001_HelloWorld.html

運行效果如下:

相關文章

  1. 用實例學習jQuery Mobile系列之二多頁切換

    本文是用實例學習jQuery Mobile系列教程的第二課. 本例子演示了jQuery Mobile多頁間的切換.演示了頁面切換時的多種動畫效果. 演示了把超連結顯示為按鈕方式的方法.演示了內連結和外 ...
  2. 用實例學習jQuery Mobile系列之三Page初始化

    本文是用實例學習jQuery Mobile系列教程的第三課. 本例子演示了page初始化的過程.在頁面加載前,page會觸發pagebeforecreate事件,在頁面加載完畢後,會觸發pagecre ...
  3. 用實例學習jQuery Mobile系列之手機訪問網站

    本文是用實例學習jQuery Mobile系列教程的外一篇. 在區域網架設好的Web伺服器,如在你的機器上的伺服器,通過localhost或者127.0.0.1可以正常訪問,但如果在手機或pad等移動 ...
  4. jQuery Mobile十大常用技巧

    在本文中,將介紹使用jQuery Mobile開發的一些常用的技巧,閱讀對象為已經使用過jQuery Mobile進行開發的移動Web開發者. 方法/步驟 禁止截斷過長的列表和按鈕內容 在jQuery ...
  5. jQuery Mobile教程:[3]使用組件

    連結和頁面只是移動網頁設計中一個很小的部分,APP程序(比如採用Object-C,C#,java等在Android或者IOS設備上創建的本地應用程式)快速增長的同時產生了豐富的控制項和組件(例如菜單欄, ...
  6. jquery mobile如何搭建第一個手機網站?

    現在移動互聯發展很快,尤其是前端框架比較多,下面我向大家介紹的勢jq mobile的入門知識以及頁面之間的跳轉問題,可以說,只要懂了入門知識,後面搭建手機網站才能得心應手. 方法/步驟 首先要引入文件 ...
  7. 使用Jquery Mobile框架製作可以跳轉的簡單頁面

    時下,用HTML製作手機端的頁面很是流行,下面小編就教大家用jquery Mobile框架,製作可以實現簡單跳轉的頁面. 方法/步驟 首先我們需要打開Deaweaver軟體,新建一個html5文件,並 ...
  8. 什麼是 jQuery Mobile

    jQuery Mobile 是創建移動 web 應用程式的框架. jQuery Mobile 適用於所有流行的智慧型手機和平板電腦. jQuery Mobile 使用 HTML5 和 CSS3 通過盡可 ...
  9. 怎麼使用JQuery Mobile開發移動網站

    現在越來越多的人用網站來做手機app, 這樣的好處是, 可以做一個網站,基本上可以做到多個平台android, ios, wp, 都可以使用. 這裡使用JQueryMobile來當做前台的框架. 只是 ...
  10. jQuery Mobile 教程Collapsible Set Dialog屬性

    jQuery Data 屬性 jQuery Mobile 使用 HTML5 data-* 屬性為移動設備創建"對觸摸友好的"美觀的外觀. 在下面的參考列表中,粗體值規定默認值. 方 ...
  11. jquery mobile slider使用 滑塊使用

    jquery mobile slider 滑塊是用來輸入數值沿著一個連續體,也可以雙重處理範圍滑塊或翻轉開關. 方法/步驟 <!doctype html> <!DOCTYPE htm ...
  12. jQuery Mobile教程:[2]超連結

    普通網頁和移動網頁的一個巨大的不同便是螢幕中呈現內容的數量多寡上.雖然你可以在你的iPhone上加載紐約時報的主頁,但你需要縮放它才能順利閱讀上面的內容.這樣的體驗並不好,而更好的解決方案是減少那些雜 ...
  13. jquery mobile 多選框 checkbox 使用

    jquery mobile 多選框 checkbox 使用 方法/步驟 To create a single checkbox, add an input with a type="chec ...
  14. jQuery Mobile重要特性

    帶有瀏覽器的所有設備都可以訪問 jQuery Mobile app,而且這些app在優化之後可以在當今幾乎所有可用的手機.平板電腦.台式機,以及電子閱讀器設備上運行. jQuery Mobile 應用 ...
  15. jQuery Mobile教程:[4]對話框

    使用data-rel屬性可以方便地創建彈出式對話框,以下代碼將會以對話框形式加載dialog.html頁面: 由於對話框在jQueryMobile裡面其實和其他page沒有任何區別,因此你可以在對話框 ...
  16. 使用Opera Mobile Emulator調試jQuery Mobile

    使用Opera Mobile Emulator調試jQuery Mobile 方法/步驟 雖然我們可以通過eclipse adt的模擬器來達到接近真機的環境,不過這樣做還是效率蠻低的,尤其是當你需要不 ...
  17. jquery.mobile的使用

    jquery.mobile的使用 手機  app 工具/原料 sublime text 電腦 方法/步驟 <!DOCTYPE html> <html> <head> ...
  18. 如何去除Jquery Mobile時自帶樣式

    jQuery Mobile是jQuery 在手機上和平板設備上的版本.jQuery Mobile 不僅會給主流移動平台帶來jQuery核心庫,而且會發布一個完整統一的jQuery移動UI框架.支持全球 ...
  19. jquery mobile loader使用 加載使用

    jquery mobile loader 小載荷疊加時顯示jQuery移動通過Ajax加載內容,或用於自定義通知. 方法/步驟 <!doctype html> <!DOCTYPE h ...
  20. jQuery Mobile動態刷新頁面樣式

    當我們使用Ajax或者javascript動態在頁面上添加元素後,如添加select控制項的option元素,添加ul的li元素.添加之後顯示的樣式不是jQuery Mobile的樣式了 在使用js或者 ...