HTML5与移动Web：jQuery Mobile基础

一，jQuery Mobile引入

本地库

<link rel="stylesheet" href="JQM/jquery.mobile-1.4.5.min.css" />
<script src="JQM/jquery-1.11.1.min.js"></script>
<script src="JQM/jquery.mobile-1.4.5.min.js"></script>

远程库

<!-- 引入 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>

二，内连接和外连接

 内连接：将一个页面中的多个容器当作多个不同的页面，它们之间的跳转是通过<a>标签来实现的，在<a>标签中设置href属性值为#加对应来实现，这种链接也称为内链接

外连接：通过单击页面中的某个链接，跳转到另外一个jQuery Mobile页面中，而不是在同一个页面中的不同区域之间跳转。

//内连接，page2为当前页面的一个div的id
<a href="#page2">第2页</a>
//外连接，类似与超链接
<a href="B.html" rel="external">详细信息</a>

三，页面跳转过渡效果

无论是内链接还是外链接，都支持页面跳转过渡的动画效果，只需要在<a>标签中添加data-transition属性设置

<a href="" data-transition="slide|pop|slideup|slidedown|fade|flip"></a>
slide	该属性值为默认值，表示从右至左的滑动动画效果
pop	表示以弹出的效果打开链接页面
slideup	表示向上滑动的动画效果
slidedown	表示向下滑动的动画效果
fade	表示渐变褪色的动画效果
flip	表示当前页面飞出，链接页面飞入的动画效果

<a href="#page2" data-transition="slideup">第2页</a>

四，对话框，弹窗，面板

对话框：创建对话框，只需要在指向页面的链接元素中添加data-rel属性，并设置该属性值为dialog。单击链式时，打开的页面将以一个对话框的形式展示在浏览器中。单击对话框中任意链接时，打开的对话框自动关闭，并以“回退”的形式切换至上一页。

<p><a href="#page2" data-rel="dialog">关于我们</a>

 弹窗：弹窗可以覆盖在页面上展示，可用于显示一段文本，图片，地图或其他内容。创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性， <div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id， 然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容。注意: <div> 弹窗与点击的 <a> 链接必须在同一个页面上。

<a href="#page2" data-rel="popup" >关于我们</a>

<div id="page2" data-role="popup" data-dismissible="false" data-position-to="#linktome" data-arrow="l">
	<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a> 
	<p>　　工作室成立于2014年初，在互动设计和互动营销领域有着独特理解。我们一直专注于互联网整合营销传播服务，以客户品牌形象为重，提供精确的策划方案与视觉设计方案，团队整体有着国际化意识与前瞻思想；以视觉设计创意带动客户品牌提升，洞察互联网发展趋势。<p>		
</div>
//你也可以在弹窗上添加关闭按钮，按钮上使用 data-rel="back" 属性，并通过样式来控制按钮的位置。
//默认情况下，弹窗会直接显示在点击元素的上方，如果需要控制弹窗的位置，可以在用于打开弹窗的点击链接上使用 data-position-to 属性。

<div data-role="content">
	<a href="#page2" data-rel="popup" data-transition="fade"><img src="images/t1.jpg" width="80px" /></a>
</div>
<div id="page2" data-role="popup" data-position-to="window">
	<img src="images/t1.jpg" width="360px" />
</div>

 面板：面板会在屏幕的左侧向右侧划出。通过向指定 id 的 <div> 元素添加 data-role="panel" 属性来创建面板。

<div data-role="panel" id="myPanel" data-display="overlay" data-position="right">
	<a href="#" class="ui-btn ui-btn-inline">按钮1</a>
	<a href="#" class="ui-btn ui-btn-inline">按钮2</a>
	<a href="#" class="ui-btn ui-btn-inline">按钮3</a>
	<a href="#" class="ui-btn ui-btn-inline">按钮4</a>
	<a href="#" class="ui-btn ui-btn-inline">按钮5</a>
</div>
<div data-role="main" class="ui-content">
	<p>点击下面按钮打开面板。</p>
	<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
</div>
//data-display设置弹窗覆盖原面板

五，实现后退效果

第一种：自动添加按钮，不可调节样式。

<div data-role="header"  data-position="inline" data-add-back-btn="true" data-back-btn-text="返回"></div>

第二种：超链接形式，可调节样式。

<a href="" data-rel="bakc">返回</a>

六，按钮

自定义按钮

<div data-role="navbar" data-iconpos="top">
	<ul>
		<li><a href="#page1" data-icon="home" class="ui-btn-active">首页</a></li>
		<li><a href="#page2" data-icon="grid">我们的作品</a></li>
		<li><a href="#page3" data-icon="info">联系我们</a></li>
	</ul>
</div>
//class="ui-btn-active"：默认选择中xiang5

激活按钮

  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone" data-icon="home">首页</a></li>
        <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="arrow-r">页面二</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>该页面的按钮也会被突出显示，归功于 ui-btn-active 类。</p> 
    <p>如果返回首页，您会发现页面将保持状态，归功于 ui-state-persist 类。</p>
  </div>

按钮组

为了减少各按钮的间距，通过在按钮的外围添加一个data-role属性值为controlgroup的容器，形成一个按钮组显示在尾部栏中。
在该容器中添加data-type属性，并将该属性的值设置为horizontal，表示容器中的按钮按水平顺序排列。
 

<div data-role="footer" class="ui-bar">
	<div data-role="controlgroup" data-type="horizontal">
		<a href="#" data-role="button" data-icon="home">首页</a>
		<a href="#" data-role="button" data-icon="grid">我们的作品</a>
		<a href="#" data-role="button" data-icon="info">联系我们</a>
	</div>
</div>

七，导航栏图标

<a href="" data-icon="home">首页</a>

设置导航栏位置

默认图标是放置在按钮文字的上方，如果需要调整只需在导航栏容器元素中添加data-iconpos属性，默认值top,还可以选择left、right和bottom

八，头部尾部定位

data-position：inline|fixed|fullscreen
inline	默认。头部栏和尾部栏与页面内容内联。
fixed	默认。头部栏和尾部栏与页面内容内联。
fullscreen	与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。

data-position值为inline定位时如果内容很多，在滑动滚动条时头部和尾部会随着滚动条的滚动而移动。

data-position值为fixed定位时，如果要看到效果，则需要调整窗口大小使滚动条可用，那么敲击屏幕将隐藏或显示页眉/页脚。效果会根据您在页面上的位置而变化。

九，网格布局

网格类	列	列宽	对应
ui-grid-a	2	50%	ui-block-a|b
ui-grid-b	3	33%	ui-block-a|b|c
ui-grid-c	4	25%	ui-block-a|b|c|d
ui-grid-d	5	20%	ui-block-a|b|c|e

  <div class="ui-grid-d">
      <div class="ui-block-a">
        <div class="ui-bar ui-bar-b" style="height:60px;">第1列</div>
      </div>
      <div class="ui-block-b">
        <div class="ui-bar ui-bar-b" style="height:60px;">第2列</div>
      </div>
      <div class="ui-block-c">
        <div class="ui-bar ui-bar-b" style="height:60px;">第3列</div>
      </div>
      <div class="ui-block-d">
        <div class="ui-bar ui-bar-b" style="height:60px;">第4列</div>
      </div>
      <div class="ui-block-e">
        <div class="ui-bar ui-bar-b" style="height:60px;">第5列</div>
      </div>
 </div>

PS：如果容器样式设置为ui-grid-a，而在它的子容器样式设置为ui-block-c，那么就意味着子容器中添加了3个子容器，第3列将自动被放置在下一行

十，可折叠区块

<div data-role="collapsible-set">
	<div data-role="collapsible">
		<h3>关于我们</h3>
		<p>　　我们一直专注于互联网整合营销传播服务，以客户品牌形象为重，提供精确的策划方案与视觉设计方案，团队整体有着国际化意识与前瞻思想；以视觉设计创意带动客户品牌提升，洞察互联网发展趋势。建立更好的网络形象与口碑，把客户企业品牌形象做到国际化，并且实现商业价值，是团队成立的本意！</p>
	</div>
	<div data-role="collapsible">
		<h3>我们的团队</h3>
		<p>　　成员都具有多年的实际设计工作经验，更好的满足客户的国际化需求。设计师由正规美院毕业，创意的思维模式，高超的设计技能，为您提供最适合您的设计方案。</p>
	</div>
	<div data-role="collapsible">
		<h3>我们的承诺</h3>
		<p>　　本工作室设计与制作的网站均属原创、不套用网上的任何模板，根据每个公司的行点，设计出属于客户.....</p>
	</div>
</div>

PS：data-role="collapsible-set"设置只允许选中一个打开， 打开另一个，其余自动关闭。

可以设置多个collapsible进行嵌套折叠。

十一，响应式表格

回流表格

 <table data-role="table" class="ui-responsive"></table>

列切换

<table data-role="table" data-mode="columntoggle" class="ui-responsive"></table>