怎麼使用JQuery Mobile開發移動網站

現在越來越多的人用網站來做手機app, 這樣的好處是, 可以做一個網站,基本上可以做到多個平台android, ios, wp, 都可以使用。 這裡使用JQueryMobile來當做前台的框架。 只是實現框架, 也就是前台的頁面, 沒有後台的代碼。 這裡使用html5的標準來書寫該模板。 版本使用最新版的1.4.2, jquery版本使用1.10.2, 不用2.x的版本, 因為2.x的版本去除了ie6,7,8的兼容, 所以, 為了兼容性, 使用1.x的版本。

工具/原料

這裡用的使用cdn的方式, 就是網際網路有的連接方式使用JQueryMobile

JQueryMobile.com中, 下載最新的框架。 現在最新1.4.2

方法/步驟

簡單的說明一下JQueryMobile. 它是一個很好的跨平台的移動端網站開發框架。 是一個前台的框架。現在要使用這個框架組一個界面,這個界面很簡單, 但是麻雀雖小五臟俱全, 然後模板實現, 知識講解完畢。html要使用HTML5的標準來寫, 因為JQueryMobile是基於HTML5的。 書寫html5的格式如圖,

既然使用JQueryMobile就要有這個框架, 這裡可以使用本地引用的方式, 和網上引用, 也叫做cdn引用。就是比較穩定和快速的引用外部文件的一種方式。 這裡使用cdn的方式, 這樣只要可以上網就可以使用該框架。

在寫移動端的網站的時候, 一定要寫一個meta的name為viewport的屬性, 因為該屬性代表著網站頁面的自適應。簡單的寫法為:<meta name="viewport" content="width=device-width, initial-scale=1"> 代表著網站為驅動設備的寬度。

然後加入框架之後, 寫一個簡單的界面。 這裡面JQueryMobile大量的使用了一個data-的屬性, 這裡使用最多的事data-role。 代表著他默認的樣式規則。 就是提前定義好了很多的樣式來供你使用。 常用的page. 代表著頁面, listview, 代表著一個列表視圖。下面是代碼和效果圖

稍微說明一下。

data-role="page" 是代表著一個頁面可以看做該內容下是一個頁面顯示的內容

data-role=」header"代表著 頁面的頁頭, 就是頁面的最上面顯示的內容這裡需要注意, 裡面要加上子標籤內容, 要不然, 就不會居中顯示內容了。推薦使用h1.

data-role="footer"代表著頁腳的內容。 也是網站的一個說明信息。 或者是一個底部導航菜單。 還有一部分, 就是data-role="content" 是代表著頁面內容部分, 主要的內容在這裡面顯示。

這3個部分構成了一個簡單的頁面。 所以, 現在可以體驗到它的強大, 不用寫太多的代碼一個簡單的框架就好了, 下面繼續增加一個listveiw的列表視圖。

完成列表視圖的代碼, 增加一個文章列舉表的代碼, 這裡列表是使用data-role="listview" 來修飾樣式。 然後這裡只需要加上data-role="listview" 你發現想要的list效果就實現了。 這樣我們一個簡單的頁面效果就實現了。

注意事項

如果有什麼不明白的都可以留言詢問。 現在所寫的都是一些簡單的東西, 就是記錄一下曾經都是怎麼來學習的這個。 幫到你是我的榮幸, 如果有任何的錯誤, 都請你幫我提出來。 謝謝。

相關文章

  1. 搭建jQuery Mobile開發環境和測試環境

    要想正常運行一個jQuery Mobile移動應用頁面,需要先獲取與jQuery Mobile相關的插件文件. 方法/步驟 下載插件文件.首先打開瀏覽器登錄jQuery Mobile官方網站,單擊導航 ...
  2. jquery mobile如何搭建第一個手機網站?

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

    寫在前面 這裡是本人學習jQuery Mobile的過程,現在將學習過程中的實例一一展現出來,希望能幫到更多的新手.本系列中實例都經過了本人的親自測試. 在介紹過程中有不對的地方或不嚴謹的地方,歡予以 ...
  7. thinkphp開發的網站後台登陸驗證碼一直不正確

    thinkphp開發的網站後台登陸驗證碼一直不正確的解決方法,驗證碼顯示沒有問題,百度了整天搜到的答案,thinkphp本身代碼的問題,verify和 extension 都有試過,php.ini里的 ...
  8. 用實例學習jQuery Mobile系列之二多頁切換

    本文是用實例學習jQuery Mobile系列教程的第二課. 本例子演示了jQuery Mobile多頁間的切換.演示了頁面切換時的多種動畫效果. 演示了把超連結顯示為按鈕方式的方法.演示了內連結和外 ...
  9. 使用Jquery Mobile框架製作可以跳轉的簡單頁面

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

    jQuery Mobile 是創建移動 web 應用程式的框架. jQuery Mobile 適用於所有流行的智慧型手機和平板電腦. jQuery Mobile 使用 HTML5 和 CSS3 通過盡可 ...
  11. jQuery Mobile 教程Collapsible Set Dialog屬性

    jQuery Data 屬性 jQuery Mobile 使用 HTML5 data-* 屬性為移動設備創建"對觸摸友好的"美觀的外觀. 在下面的參考列表中,粗體值規定默認值. 方 ...
  12. 如何承包網站開發,網站製作開發流程

    如何承包網站開發,網站製作開發流程?這個我覺得可以分享一下我的經驗,畢竟做了一年多的網站承包開發,對網站製作開發流程,我是心知肚明,本來也是行業信息,這裡只講過程分析,不述後幕操作; 承包網站企業網站 ...
  13. Ecshop二次開發之網站Index頁面說明之一

    新接觸一個事物,最先了解的就是這個新事物的架構,亦能一目了然,接下來小編就為你介紹Ecshop整個系統頁面所對應功能說明. 工具/原料 瀏覽器 phpmysql安裝 dreamweaver 方法/步驟 ...
  14. ASP.NET開發電子商務網站購物車

    Web應用程式開發中,大多數的電子商務網站都有網上購物這一功能模塊,所以購物車程序的編寫就顯得非常重要. 購物車的作用不外就是實現這些功能:添加物件.修改物件.刪除物件.檢查推車.查看推車等.在本文就 ...
  15. 如何使用MyEclipse8.5開發JSP網站

    開發JSP程序可以採用多種編輯工具,如記事本.Eclipse.NetBeans.JBuilder等.同時,支持JSP技術的伺服器有Tomcat.Resin.JBoss.WebLogic等.資料庫可以選 ...
  16. jquery mobile slider使用 滑塊使用

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

    普通網頁和移動網頁的一個巨大的不同便是螢幕中呈現內容的數量多寡上.雖然你可以在你的iPhone上加載紐約時報的主頁,但你需要縮放它才能順利閱讀上面的內容.這樣的體驗並不好,而更好的解決方案是減少那些雜 ...
  18. 如何評判外包開發公司開發的網站是否完善?

    現在的外包開發公司琳琅滿目,最終的結果是魚龍混雜,導致無法挑選無法評判.交到自己手中的產品是否完善?是否達到交付標準? 工具/原料 開發前需求確定. 多了解一些別家的網站,百度一下,給自己惡補一下相關 ...
  19. jquery mobile 多選框 checkbox 使用

    jquery mobile 多選框 checkbox 使用 方法/步驟 To create a single checkbox, add an input with a type="chec ...
  20. 如何使用jQuery UI開發Web程序(1)

    jQuery UI是以 jQuery 為基礎的開源 JavaScript 網頁用戶界面代碼庫.包含底層用戶交互.動畫.特效和可更換主題的可視控制項.我們可以直接用它來構建具有很好交互性的web應用程式. ...