jQueryMobile (一) ：教程

時間 2019-11-08

原文原文鏈接

一、安裝，引用本地文件或百度cdn：css

<head>

<!-- meta使用viewport以確保頁面可自由縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 引入 jQuery Mobile 樣式 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- 引入 jQuery 庫 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- 引入 jQuery Mobile 庫 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

二、基本結構html

data-role = 「page」 id="pageXX" -------- data-role = ‘header’jquery

data-role = ‘main’ class="ui-content"app

data-role = ‘footer’ide

三、對話框：ui

data-dialog = 'true'spa

四、過渡：code

頁面過渡效果/頁面切換效果： data-transitioncdn

1 <a href="#pageOne" data-transition="flip">切換到下一頁</a> htm

全部效果都支持後退行爲。默認從右向左滑動，若是想從左向右滑動，加屬性：

data-direction = 「reverse」

五、按鈕：