Latest web development tutorials

jQuery Mobile 頁面

開始學習jQuery Mobile

lamp 儘管jQuery Mobile兼容所有的移動設備，但是並不能完全兼容PC機（由於有限的CSS3支持）。

為了更好的閱讀本教程，建議您使用Google Chrome 瀏覽器。

實例

<body>
<div data-role="page" >

  <div data-role="header" >
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content" >
    <p>我现在是一个移动端开发者!!</p>
  </div>

  <div data-role="footer" >
    <h1>底部文本</h1>
  </div>

</div>
</body>

嘗試一下»

實例解析：

  • data-role="page" 是在瀏覽器中顯示的頁面。
  • data-role="header" 是在頁面頂部創建的工具條(通常用於標題或者搜索按鈕)
  • data-role="main" 定義了頁面的內容，比如文本， 圖片，表單，按鈕等。
  • "ui-content" 類用於在頁面添加內邊距和外邊距。
  • data-role="footer" 用於創建頁面底部工具條。
  • 在這些容器中你可以添加任何HTML 元素- 段落, 圖片, 標題, 列表等。
lamp jQuery Mobile 依賴HTML5 data-* 屬性來支持各種UI 元素、過渡和頁面結構。 不支持它們的瀏覽器將以靜默方式棄用它們。

在頁面中添加jQuery Mobile

使用jQuery Mobile, 你可以再單個HTML 文件中創建多個不同的頁面。

你可以使用不同的href屬性來區分使用同一個唯一id的頁面：

實例

<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >跳轉到第二個頁面</a>
</div>
</div>

<div data-role="page" id="pagetwo" >
<div data-role="main" class="ui-content">
<a href="#pageone" >跳轉到第一個頁面</a>
</div>
</div>

嘗試一下»

注意：當web應用有大量的內容（文本，圖片，腳本等）將會嚴重影響加載時間。 如果你不想使用內頁鏈接可以使用外部文件： 

<a href="externalfile.html">访问外部文件</a>

頁面作為對話框使用

對話框是用於顯示頁面信息顯示或者表單信息的輸入。

在鏈接中添加data-rel="dialog"讓用戶點擊鏈接時彈出對話框:

實例

<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<a href="#pagetwo">跳轉到第二個頁面</a>
</div>
</div>

<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="main" class="ui-content">
<a href="#pageone">跳轉到第一個頁面</a>
</div>
</div>

嘗試一下»