JQueryMobile 基础

因为在做移动端Web应用，加上之前使用jQuery的缘故，希望学习一下jQueryMobile

最重要的，附上官方API地址：http://api.jquerymobile.com/

忘记引用库文件的错误大家都有犯吧

那么记住了：

<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" /> 
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>  
<script type="text/javascript" src="jquery.mobile-1.0a3.min.js"></script>

说到这，想起前不久遇到的一个Bug，与IOS系统上的自动缩放有关（偷偷的鄙视一下测试用的Mini屏幕太小了 ）

请脑补以下代码对移动端屏幕缩放的重要意义：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

在结构化的页面中完整的页面结构分为header、content、footer这三个主要区域。

在body中插入内容块：

 <div data-role="page"> 

<div data-role="header">...</div> 

<div data-role="content">...</div> 

<div data-role="footer">...</div> 

</div> 

data-role="page”代表这个div是一个Page，在一个屏幕中只会显示一个page；header是标题，content是内容块，footer是页脚。

在结构化的页面中完整的页面结构分为header、content、footer这三个主要区域。 

在body中插入内容块： data-role

<div data-role="page">   
    <div data-role="header">...</div>
    <div data-role="content">...</div> 
    <div data-role="footer">...</div>  
</div>

OK，第一个知识点到这里，去做测试~balbal...(此处省略1万行代码...)

用data-transition属性定义页面切换时的动画效果:

模态对话框：data-rel="dialog" 打开一个临时页面（伪浮动层），回到父级页面后，无法返回到此页面
<a href="text.html" data-rel="dialog" data-transition="flip"><button data-role="button" >模态对话框</button></a>

定义导航栏：

　 <div data-role="navbar">
　　 <ul>
　　　 <li><a href="a.html" class="ui-btn-active">One</a></li>
　　　 <li><a href="b.html">Two</a></li>
　　 </ul>
　 </div><!-- /navbar -->
</div><!-- /footer -->

按钮：data-role="button":
例如：<a href="index.html" data-role="button" data-icon="delete">Delete</a>

当使用html原生的form元素时，如何阻止moblie框架对该元素的自动渲染  : data-role="none";