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关闭弹窗，也可以点击弹窗意外的地方进行关闭弹窗。