今天接触了JQ Mobile以下是本小白的理解（不怕大家笑话）：创建移动 web 应用程序的框架；适用于所有流行的智能手机和平板电脑； 将“写得更少、做得更多”这一理念提升到了新的层次：它会自动为网页设计交互的易用外观，并在所有移动设计 ...
今天接触了JQ Mobile以下是本小白的理解（不怕大家笑话）：
创建移动 web 应用程序的框架；适用于所有流行的智能手机和平板电脑； 将“写得更少、做得更多”这一理念提升到了新的层次：它会自动为网页设计交互的易用外观，并在所有移动设计上保持一致。
从官网上可以看出jQuery mobile内容分为四大部分：
jQM的内容分为四大部分：
(1)Page & Navigation
(2)CSS Framework
(3)Widgets(小部件)
(4)Form Widgets
以下用到的文件都可在官网下载到：
CSS文件：jquery.mobile.css
jQuery文件：jquery.js
jQuery Mobile文件：jquery.mobile.js
这次主要接触的是页面和页面切换效果
jQM中的“Page（页面）” jqm中的Page指WebApp中的“一屏内容”——一个HTML文件中可以只声明一个Page（单页模板），也可以声明多个Page（多页模板）——浏览器中某个时刻最多只能显示一个Page！
一个Page的基本结构：
<div/section data-role="page">
<div/header data-role="header"></div/header>
<div/section ></div/section>
<div/footer data-role="footer"></div/footer>
</div>
在多个Page间跳转有两种方式：
(1)超链接：
<a href="#PageID/xx.html"></a>
(2)JS编码：
<button onclick="$.mobile.changePage('#PageID/xx.html');"></button>
jQM中常用的data-*属性： |
data-role="page" |
data-role="header" |
data-role="content" |
data-role="footer" |
data-theme="a/b" 用于任何元素，设置当前元素的主题色 |
data-position="fixed" 用于footer，实现固定在Page的底部 |
data-title="" 用于Page，指定当前浏览器的标题栏内容 |
data-rel="back" 用于超链接，可以返回到当前Page的上一个Page |
data-transition="十种可能值" 用于页面跳转的超链接，指定页面切换过场动画 |
data-role="button" 用于超链接，使其呈现块级按钮的外观 |
data-inline="true" 用于按钮，声明为行内按钮，本质就是添加.ui-btn-inline |
data-icon="50种图标" 可用于为按钮指定图标 |
data-iconpos="left/right/top/bottom/notext" |
以下是今天做的案例分享分享：
<!DOCTYPE html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：同一个页面多个page之间的切换
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
