jquery mobile-初識頁面（一）

時間 2019-11-26

標籤 jquery mobile 頁面欄目 JQuery 简体版

原文原文鏈接

這兩天工做閒下來，因此給本身充充電，來學習一下jquery mobile，順便記錄在這。javascript

jQuery Mobile是什麼？css

　　jQuery Mobile 是一種 web 框架，用於建立移動 web 應用程序建立移動。java

　　jQuery Mobile 適用於全部流行的智能手機和平板電腦。（臺式機上面兼容性很差，因爲有限的 CSS3 支持）jquery

　　jQuery Mobile 使用 HTML5 和 CSS3 經過儘量少的腳本對頁面進行佈局。web

使用jquery mobile： 下載地址：http://jquerymobile.com/download/瀏覽器

<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>

tip：<script> 標籤中爲何沒有 type="text/javascript" 屬性？在 HTML5 中該屬性不是必需的。JavaScript 是 HTML5 以及全部現代瀏覽器中的默認腳本語言！框架

first demo（結構）：工具

<body>
<div >

  <div >
    <h1>歡迎訪問個人主頁</h1>
  </div>

  <div >
    <p>我是一名移動開發者！</p>
  </div>

  <div >
    <h1>頁腳文本</h1>
  </div>

</div>
</body>

解釋：data-role="page"data-role="header"data-role="content"data-role="footer"

data-role="page" 是顯示在瀏覽器中的頁面
data-role="header" 建立頁面上方的工具欄（經常使用於標題和搜索按鈕）
data-role="content" 定義頁面的內容，好比文本、圖像、表單和按鈕，等等
data-role="footer" 建立頁面底部的工具欄

在這些容器中，您能夠添加任意 HTML 元素 - 段落、圖像、標題、列表等等。佈局

tip：HTML5 data-* 屬性用於經過 jQuery Mobile 爲移動設備建立「對觸控友好的」交互外觀。學習

添加頁面：

能夠在單一 HTML 文件中建立多個頁面。經過惟一的 id 來分隔每張頁面，並使用 href 屬性來鏈接彼此

<div data-role="page" >
  <div data-role="content">
    <a href="#pagetwo">轉到頁面二</a>
  </div>
</div>

<div data-role="page" >
  <div data-role="content">
    <a href="#pageone">轉到頁面一</a>
  </div>
</div>

將頁面用做對話框：

<div data-role="page" id="pageone">id="pageone"id="pagetwo"

  <div data-role="content">
    <a href="#pagetwo" >轉到頁面二</a>       ---》頁面二以對話框形式彈出
  </div>
</div>

頁面過渡效果（如何從一頁過渡到下一頁的效果）：  data-transition

tip：如需實現過渡效果，瀏覽器必須支持 CSS3 3D 轉換，Internet Explorer 10 支持 3D 轉換（更早的版本不支持）Opera 仍然不支持 3D 轉換
data-rel="dialog"