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”

五、按钮：