jQuerymobile入门（一）

环境配置：( ***都放在head中** *)

国内环境配置：

<!-- meta使用viewport以确保页面可自由缩放 -->

<metaname="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>

也可以从点击打开链接上下载相关的资源，下载完成之后引入到html中。

页面布局：（最简单的）

写在body中：

<div data-role="page">
<div data-role="header">头部信息</div>
<div data-role="main" class="ui-content">页面内容</div>
<div data-role="footer">尾部信息</div>
</div>

页面跳转可以通过<a href="#page-two"></a> #page-two是在data-role="page"所在的那个div中，id="page-two";这样表示就可以跳转到其他想跳转的页面中去。

从一个页面以何种动作进入到下一个页面：

		<div data-role="page" id="page-one">
			<div data-role="header">头部信息</div>
			<div data-role="main" class="ui-content">
				<p>点击弹出一个对话框</p>
				<a href="#page-two" data-transition="slide">滑入弹窗</a>
			</div>
			<div data-role="footer">底部信息</div>
		</div>
		<div data-role="page" data-dialog="true" id="page-two">
			<div data-role="header">第二个页面头部信息</div>
			<div data-role="main" class="ui-content">
				<p>fade(淡入)是默认的</p>
				<a href="#page-one">返回第一个页面</a>
			</div>
			<div data-role="footer">弹窗的底部信息</div>
		</div>

data-transition可以有一下几个值： fade 、slide、pop、flip、flow、slideup、slidedown、slidefade等

加入data-dialog="true"就是以对话框的形式出现，去掉之后就是以页面的形式出现。

在第二个页面中<a></a>里可以不加入data-transition这个属性，这样默认的就是fade,若加入data-transition="slide" data-direction="reverse"  换到第一页面时是从左到右。(第一个页面上<a></a>中的data-transition可以为任意方式。)

按钮的创建有三种方式：

1、<buttoon>(表单提交)

2、<input>(表单提交)

3、带有data-role="button"属性的<a>元素（一般进行页面的链接）

弹窗：

创建一个 弹窗用<a>和<div>配合使用

<div data-role="page">
  <div data-role="header">
    <h1>我的主页</h1>
  </div>
​
  <div data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>
​
    <div data-role="popup" id="myPopup" class="ui-content">
      <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
       <p>我在右上角有个关闭按钮</p>
      <p><b>提示:</b> 你也可以通过点击弹窗外的区域来关闭弹窗。</p>
    </div>
  </div>
​
  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

注意：<a>和<div>要放在同一个页面中，a标签的href和div的id是一致的，上面的例子是在右上角有个X关闭弹窗，也可以点击弹窗意外的地方进行关闭弹窗。