對於JQuery Mobile的介紹

時間 2019-11-20

原文原文鏈接

對於JQuery Mobile的介紹web

jQuery Mobile 是一個爲觸控優化的框架，用於建立移動 web 應用程序。jQuery 適用於全部流行的智能手機和平板電腦：jQuery Mobile 構建於 jQuery 庫之上，這使其更易學習。它使用 HTML五、CSS三、JavaScript 和 AJAX 經過儘量少的代碼來完成對頁面的佈局。jQuery Mobile 將「寫得更少、作得更多」這一理念提高到了新的層次：它會自動爲網頁設計交互的易用外觀，並在全部移動設計上保持一致。瀏覽器

jQuery Mobile 主題，jQuery Mobile 提供了五種不一樣的樣式主題，從 "a" 到 "e" - 每種主題帶有不一樣顏色的按鈕、欄、內容塊，等等。jQuery Mobile 中的一種主題由多種可見的效果和顏色構成。如需定製應用程序的外觀，請使用 data-theme 屬性，併爲該屬性分配一個字母：<div data-role="page" data-theme="a|b|c|d|e">框架

實例ide

<div data-role="header" data-theme="b"></div>工具

<div data-role="content" data-theme="a"></div>佈局

<div data-role="footer" data-theme="e"></div>學習

jQuery Mobile 列表視圖，jQuery Mobile 中的列表視圖是標準的 HTML 列表：有序列表 (<ol>) 和無序列表 (<ul>)。如需建立列表，請向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使這些項目可點擊，請在每一個列表項（<li>）中規定連接：優化

實例設計

<ol data-role="listview">ip

</ol>

</ul>

列表分隔符列表分隔符（List Dividers）用於把項目組織和組合爲分類/節。如需規定列表分隔符，請向 <li> 元素添加 data-role="list-divider" 屬性：

實例

</ul>

在 jQuery Mobile 中添加頁面在 jQuery Mobile，您能夠在單一 HTML 文件中建立多個頁面。請經過惟一的 id 來分隔每張頁面，並使用 href 屬性來鏈接彼此：data-role="page" 是顯示在瀏覽器中的頁面，data-role="header" 建立頁面上方的工具欄（經常使用於標題和搜索按鈕），data-role="content" 定義頁面的內容，好比文本、圖像、表單和按鈕，等等，data-role="footer" 建立頁面底部的工具欄

實例1

<body>

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

</div>

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

</div>

</div>

</body>

實例2

<a href="#pagetwo">轉到頁面二</a>

</div>

<a href="#pageone">轉到頁面一</a>

</div>

jQuery Mobile 過渡效果，jQuery Mobile 擁有一系列關於如何從一頁過渡到下一頁的效果。過渡效果可應用於任意連接或經過使用 data-transition 屬性進行的表單提交：<a href="#anylink" data-transition="slide">滑動到頁面二</a>

一、fade 默認。淡入淡出到下一頁。

二、flip 從後向前翻動到下一頁。

三、flow 拋出當前頁面，引入下一頁。

四、pop 像彈出窗口那樣轉到下一頁。

五、slide 從右向左滑動到下一頁。

六、slidefade 從右向左滑動並淡入到下一頁。

七、slideup 從下到上滑動到下一頁。

八、slidedown 從上到下滑動到下一頁。

九、turn 轉向下一頁。

十、none 無過渡效果。

jQuery Mobile 提供了對按鈕進行組合的簡單方法。請將 data-role="controlgroup" 屬性與 data-type="horizontal|vertical" 一同使用，以規定水平或垂直地組合按鈕：一、data-corners true | false 規定按鈕是否有圓角。二、data-mini true | false 規定是不是小型按鈕。三、data-shadow true | false 規定按鈕是否有陰影。

實例

</div>

jQuery Mobile 按鈕添加圖標，如需向您的按鈕添加圖標，請使用 data-icon 屬性：<a href="#anylink" data-role="button" data-icon="search">搜索</a>

一、data-icon="arrow-l" 左箭頭

二、data-icon="arrow-r" 右箭頭

三、data-icon="delete" 刪除

四、data-icon="info" 信息

五、data-icon="home" 首頁

六、data-icon="back" 返回

七、data-icon="search" 搜索

八、data-icon="grid" 網格

您也可以規定圖標被放置的位置：上、右、下或左。請使用 data-iconpos 屬性來規定位置：