使用Jquery Mobile框架製作可以跳轉的簡單頁面

時下,用HTML製作手機端的頁面很是流行,下面小編就教大家用jquery Mobile框架,製作可以實現簡單跳轉的頁面。

方法/步驟

首先我們需要打開Deaweaver軟體,新建一個html5文件,並保存下來。

我們需要引用Jquery Mobile的css樣式表文件,還有jquery.js以及jquery-mobile的js文件,並且將頁面調為響應式文件。

接下來我們需要新建幾個div標籤,並為其添加屬性data-role="page"

這時我們可以按下F12,在瀏覽器中進行頁面的瀏覽。頁面中之後第一個div。

之所以只有第一個div是因為,我將所有的div都添加了data-role="page"屬性,這樣每一個div都是一個jquery mobile頁面了。而Jquery Mobile框架式默認的只顯示第一個頁面。雖然他們都在一個html文檔中。

我們需要為第一個div加上連結,以實現和其他頁面之間的跳轉,這個的前提是要給其他div添加一個id屬性。

最後,我們需要給每個頁面分別添加錨記連結,以實現多個頁面互相跳轉。

注意事項

一定要將所有和jquery mobile相關的文檔全部添加引用
必須要為頁面添加螢幕自適應
絕對要是HTML5的頁面

相關文章

  1. word製作可以跳轉到指定頁面的目錄

    指向位置的連結指的是你點擊某個連結,會跳轉到特定的文檔位置.通過自動生成的目錄可以自帶指向位置的連結.但是如果我們要對這些目錄進行修改,怎樣設定這些連結呢?或者我們自己製作目錄,希望點擊目錄跳轉到相應 ...
  2. word如何製作可以跳轉到指定頁面的目錄

    在使用word的過程中,指向位置的連結指的是你點擊某個連結,會跳轉到特定的文檔位置.通過自動生成的目錄可以自帶指向位置的連結,那麼word如何製作可以跳轉到指定頁面的目錄呢 方法/步驟 首先打開wor ...
  3. 如何使用jquery mobile製作不同樣式的按鈕

    jquery mobile中包含了不同主題的皮膚,可以根據不同場景獲取不同樣式的控制項.其中,按鈕是一種常用的控制項,可以使用ui-btn.ui-btn-a.ui-btn-b等樣式.下面利用一個實例說明j ...
  4. 使用Jquery Mobile製作nav導航欄

    之前有分享過怎樣製作PC端的tab標籤的經驗,這次我來教大家使用Jquery Mobile框架來製作簡單的nav導航欄 方法/步驟 因為我使用的是Jquery Mobile的框架,所以我們需要事先做好 ...
  5. jQuery Mobile十大常用技巧

    在本文中,將介紹使用jQuery Mobile開發的一些常用的技巧,閱讀對象為已經使用過jQuery Mobile進行開發的移動Web開發者. 方法/步驟 禁止截斷過長的列表和按鈕內容 在jQuery ...
  6. JQUERY EASYUI 框架的使用心得

    上個禮拜我們經歷對我說,他不滿意滿載OA管理系統的框架,希望換一個帶TAB標籤頁的那種,這樣層打開過什麼陽面都一目了然,客觀性能比較好,綜合之後,決定使用JQUERY  EASYUI 框架 工具/原料 ...
  7. jQuery Mobile教程:[3]使用組件

    連結和頁面只是移動網頁設計中一個很小的部分,APP程序(比如採用Object-C,C#,java等在Android或者IOS設備上創建的本地應用程式)快速增長的同時產生了豐富的控制項和組件(例如菜單欄, ...
  8. 用實例學習jQuery Mobile系列之一HelloWorld

    寫在前面 這裡是本人學習jQuery Mobile的過程,現在將學習過程中的實例一一展現出來,希望能幫到更多的新手.本系列中實例都經過了本人的親自測試. 在介紹過程中有不對的地方或不嚴謹的地方,歡予以 ...
  9. jquery 日曆如何製作

    利用jquery製作一個簡單日曆 工具/原料 jquery-1.8.3.js Dreamweaver或者可以編寫頁面代碼的編輯軟體 方法/步驟 引入jquery,編寫日曆頁面代碼,下面是一個簡單的日曆 ...
  10. jquery mobile如何搭建第一個手機網站?

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

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

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

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

    jQuery Data 屬性 jQuery Mobile 使用 HTML5 data-* 屬性為移動設備創建"對觸摸友好的"美觀的外觀. 在下面的參考列表中,粗體值規定默認值. 方 ...
  15. vb6軟體利用框架製作改變文本框內容與字號大小

    利用vb6編程軟體,編寫簡單的通過框架功能製作單擊改變文本框內容與字號大小的小的編程程序.通過這個程序能使初學者熟練掌握並運用IF.....THEN.....假設程式語言,我們接著往下看 方法/步驟 ...
  16. 如何利用ionic框架製作下拉框並利用AngularJS值

    ionic框架中有控制項select,利用AngularJS給下拉框賦值.AngularJS利用ng-app.ng-controller和ng-repeat指令循環遍歷下拉框值,利用一個具體實例來說明下 ...
  17. PPT課件元素製作——蹦跳的文字

    為節日歌曲製作的動畫的一部分.關於兒童節的問答.每一句話以不同的方式出現,表現出活潑的氛圍.文中的動畫很多,本例主要介紹有關文字的製作. 工具/原料 PowerPoint2007 方法/步驟 插入-- ...
  18. jquery mobile slider使用 滑塊使用

    jquery mobile slider 滑塊是用來輸入數值沿著一個連續體,也可以雙重處理範圍滑塊或翻轉開關. 方法/步驟 <!doctype html> <!DOCTYPE htm ...
  19. 如何利用ionic框架製作帶有圖標的卡片列表

    ionic框架的card卡片,可以結合不同類型的控制項或圖標生成不同組件.卡片列表類似卡片包一樣,有一層一層展示出來,使用樣式類card.下面利用一個card和圖標結合生成列表的實例說明這個用法,具體操 ...
  20. jQuery Mobile教程:[2]超連結

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