jQuery mobile(初级教程)

1,jquery mobile 教程
	页面内容 <div data-role = "page"></div>
	头部兰 <div data-role = "header"><h1></h1></div>
	移动端的内容 <div data-role = "main" class="ui-content"></div>
	底部 <div data-role = "footer"></div>
	实现页面的跳转(例如下面代码):
		<div data-role = "page" id="pageone">
			<div data-role = "main" class="ui-content">
				<a href="#pagetwo">跳转到第二个页面</a>
			</div>
		</div>

		<div data-role = "page" id="pagetwo">
			<div data-role = "main" class="ui-content">
				<a href="#pageone">跳转到第一个页面</a>
			</div>
		</div>

	总结:
	申明页面page 可以用id表示页面
	申明内容main ui-content

	页面作为对话框的使用:
	data-rel = "dialog"
	例如如下代码:
	<div data-role = "page" id = "pageone">
		<div data-role = "main" class="ui-content">
			<a href="#pagetwo">跳转到第二个页面</a>
		</div>
	</div>

	<div data-role = "page" id="pagetwo" data-dialog = "true">
		<div data-role = "main" class="ui-content">跳转到第一个页面</div>
	</div>

	过渡效果data-transition
	<a href="#anylink" data-transit = "slide">利用过渡的方式切入下一个页面</a>

	按钮
	按钮的几种方式
	<button>按钮</button>
	<input type="button" value="按钮" name="">
	<a href="" data-role = "button">按钮</a>

	内联按钮
	data-inline = "true"

	按钮的组合{按钮可以分为水平和垂直}
	<div daya-role = "conrolgroup" data-type = "horizontal">
		<a href="" data-role = "button">按钮</a>
		<a href="" data-role = "button">按钮</a>
		<a href="" data-role = "button">按钮</a>
	</div>


	后退按钮
	<a href="" data-role ="button" data-rel = "back">返回</a>
	还有更多链接按钮的示例请百度镜像查看

	按钮的图标
	<a href="" class="ui-btn ui-serch ui-btn-icon-top"></a>

	jquery的弹窗
	<a href="#mypopup" data-rel = "popup" class="ui-btn ui-btn-inline ui-corner">显示弹窗</a>

	<div data-role = "popup" id="mypopup">
		<p>这是第一个弹窗</p>
	</div>

	关闭弹窗,在jQuery mobile也进行说明
	定位弹窗
	<a href="" data-rel = "popue" class="ui-btn" data-position-to ="window"></a>


	jquery mobile 工具栏:
		头部兰
			<div data-role ="header">
				<a href="" class="ui-btn ui-icon-home ui-btn-icon-left">首页</a>
				<p>欢迎来到我的主页</p>
				<a href="" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
			</div>


	jQuery mobile 导航栏
	<div data-role= "header">
		<div data-role="nav">
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">页面二</a></li>
				<li><a href="">搜索</a></li>

			</ul>
		</div>		
	</div>

	jQuery mobile 也可以定位图标
	data-role = "top"
	data-iconpos = "right"
	激活按钮
	<li><a href="#anylink" class="ui-btn-active">s首页</a></li>



	jQuery mobile的面板
	<div data-role = "panel" id="mypopup">
		<h2>面板标题</h2>
		<p>文本问题</p>
	</div>

	<a href="#mypopup" class="ui-btn ui-btn-inline">打开面板</a>



	jquery mobile表格
	<table data-role = "table" class="ui-responsive"></table>

	添加阴影
	<table data-role = "table" data-mode="columntoggle" class="ui-responsive ui-shadow"></table>