HTML5 and Mobile Web: jQuery Mobile base

A, jQuery Mobile introduced

Local library

<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>

Remote library

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

Second, the inner and outer joins

The connection: a plurality of containers as a plurality of pages of different pages, jump between them is achieved by <a> tag is provided in the href attribute value tag # <a> added to the corresponding realize that this link is also known as internal links

Outer join: page by clicking a link, jump to another page in jQuery Mobile, rather than between different regions of the same page jump.

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

Third, the jump page transition effects

Whether inside or outside links links, support the page jump transition animations, just in <a> add tags in data-transition attribute set

<a href="" data-transition="slide\|pop\|slideup\|slidedown\|fade\|flip"></a>
slide	This value is the default attribute indicating a sliding right to left animation
pop	Represented in the pop-up effect is on the linked page
slideUp	It indicates upward sliding animation
slidedown	It indicates downward sliding animation
fade	It represents the gradient fade animation
flip	Flying out of the current page, linked pages flying into animation

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

Fourth, dialog boxes, pop, panel

Dialog: Create a box, just add a link element pointing to the page DATA- rel attribute, and set the property value Dialog . When you click on the chain, the page will open a dialog box showing the form in a browser. When you click the dialog box of any link to open the dialog box closes automatically and switches to the previous page to "roll back" form.

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

Pop: pop can cover the page display, it can be used to display a text, pictures, maps or other content. Creating a pop, <a> and need to use <div> element. Adding data-rel = "popup" property on an element <a>, <div> element added data-role = "popup" attribute. Then we specified id as the <div>, and then set the value of <a> href <div> specified by id. SUMMARY <div> in the pop display content. Note: <div> <a> pop and click the link must be on the same page.

<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>

Panel: the panel will draw to the right on the left side of the screen. Designated by the id of <div> additive element data-role = "panel" property to create a 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设置弹窗覆盖原面板

Fifth, to achieve reverse effect

The first: to automatically add a button, the style is not adjustable.

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

The second: as hyperlinks, adjustable style.

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

Sixth, button

Custom Button

<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

Activation button

  <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>

Button Group

In order to reduce the spacing of the buttons, by adding a data-role attribute value controlgroup button at the periphery of the container is formed at the end of a bar display button group.
Adding data-type attributes in the vessel, and set the value of this property is Horizontal, the container showing a button arrangement of a horizontal sequence.

<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>

Seven, the navigation bar icon

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

Set the navigation bar position

The default icon is placed over the button text, if you need to adjust just add data-iconpos property in the navigation bar container element, the default value top, you can also choose left, right and bottom

Eight, the head of the tail positioning

data-position：inline\|fixed\|fullscreen
inline	default. With the head and tail bar bar with page content.
fixed	default. With the head and tail bar bar with page content.
fullscreen	And Fixed positioning mode is basically the same, the head and tail fields bar fixed to the top and bottom of the page. But when he was rolling out of the toolbar off the screen, it does not automatically display again, unless tap the screen, which for a picture or video class of applications to enhance the modern feel is very useful. Note that the toolbar will cover the content of the page in this mode, so it is best used in special occasions.

data-position value is positioned inline content if a lot, with head and tail can move the scroll bar to scroll when the scroll bar slider.

data-position value is fixed positioning, if you want to see the effect, it is necessary to resize the window so that the scroll bar is available, then tap the screen to hide or display the header / footer. The effect will vary depending on your location on the page.

Nine, grid layout

Grid class	Row	Column Width	correspond
Grid-ui-a	2	50%	ui-block-a\|b
Grid-ui-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: If the container is set to the style ui-grid-a, and in its sub-set style container ui-block-c, then adding three sub-sub-container means a container, the third column will automatically be placed on the lower line

Ten, collapsible block

<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" setting, only a selected open, open another, remaining closed automatically.

You may be provided a plurality of nested folding collapsible.

XI responsive tables

Reflux table

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

Column switch

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

Yan double-trained,

Published 349 original articles · won praise 161 · views 190 000 +

His message board concerns