jquery mobile用来开发web app比较不错。这里自己整理了一些jquery mobile的基础如下。
- jquery mobile的页面结构：
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>这是头部</h1>
</div>
<div role="main">
<p>最近好么</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>这是尾部</h1>
</div>
</div>
//注：其中的data-position是给头部和尾部提供位置设置。2.jquery mobile翻页
<a href="#page2" data-transition="fide">to the second</a>
<a href="#page2" >to the second</a>
//加上以上的链接就可以翻页，当然对应要有id为page1的页面，这里面有很多的方式可以通过data-transition来设置。3.button
jquery的button有三种写法：
<button>按钮</button>
<input type="button" value="按钮">
<a class="ui-btn ui-shadow">按钮</a>
<a class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-notext" >按钮</a>button组：横向和纵向
<div data-role="controlgroup">
<a href="#" class="ui-btn ">按钮</a>
<a href="#" class="ui-btn ">按钮</a>
<a href="#" class="ui-btn ">按钮</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ">按钮</a>
<a href="#" class="ui-btn ">按钮</a>
<a href="#" class="ui-btn ">按钮</a>
</div>4.单选框和复选框
<label>
<input type="checkbox">哈啊
</label>
<fieldset data-role="controlgroup" >
<label>
<input type="checkbox">apple
</label>
<label>
<input type="checkbox">sumsung
</label>
<label>
<input type="checkbox">huawei
</label>
<label>
<input type="radio" name="man1">man
</label>
<label>
<input type="radio" name="man1">woman
</label>
</fieldset>5.展开页面
<div data-role="collapsible" data-collapsed="false">
<h4>heading</h4>
<p>我真展开了么</p>
</div>
<div data-role="collapsible" data-content-theme="false">
<h4>heading</h4>
<p>我真展开了么</p>
</div>
<div data-role="collapsible" data-content-theme="true">
<h4>heading</h4>
<ul data-role="listview">
<li><a>1111</a></li>
<li><a>2</a></li>
<li><a>112312312</a></li>
<li><a>12111</a></li>
</ul>
</div>
//data-collapsed设置是否有边框。
//data-content-theme设置是否默认展开。6.导航栏
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">haha</a> </li>
<li><a href="#" class="ui-btn-active">haha2</a> </li>
<li><a href="#" class="ui-btn-active">haha3</a> </li>
<li><a href="#" class="ui-btn-active">haha4</a> </li>
<li><a href="#" class="ui-btn-active">haha5</a> </li>
</ul>
</div>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active" data-icon="grid">haha</a> </li>
<li><a href="#" class="ui-btn-active" data-icon="star">haha2</a> </li>
<li><a href="#" class="ui-btn-active" data-icon="gear">haha3</a> </li>
<li><a href="#" class="ui-btn-active" data-icon="gear">haha4</a> </li>
<li><a href="#" class="ui-btn-active" data-icon="gear">haha5</a> </li>
</ul>
</div>7.popup弹出窗口
后面那一个是点击图片全屏放大的一个效果。
<a href="#pp" data-rel="popup" class="ui-btn">弹出窗口</a>
<div data-role="popup" id="pp">
<p>这是一个弹出窗口</p>
</div>
<a href="#pop" data-rel="popup" data-position-to="window" data-transition="fade">
<img src="thistime.png" class="pupphoto" style="20%">
</a>
<div data-role="popup" id="pop">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">close</a>
<img src="thistime.png" style="max-height:512px;">
</div>8.选择窗
<div class="ui-field-contain">
<select data-iconpos="left" name="select-native-1">
<option value="2">2</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>9.十分强大的筛选机制
<ul data-role="listview" data-filter="true" data-inset="true">
<li><a href="#">a</a> </li>
<li><a href="#">b</a> </li>
<li><a href="#">c</a> </li>
<li><a href="#">d</a> </li>
</ul>
<form class="ui-filterable">
<input id="autoinput" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-input="#autoinput" data-inset="true">
<li><a href="#">a</a> </li>
<li><a href="#">b</a> </li>
<li><a href="#">c</a> </li>
<li><a href="#">d</a> </li>
</ul>
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li><a href="#">a</a> </li>
<li><a href="#">b</a> </li>
<li><a href="#">c</a> </li>
<li><a href="#">d</a> </li>
<li><a href="#">deaf</a> </li>
<li><a href="#">fer</a> </li>
<li><a href="#">c</a> </li>
<li><a href="#">d</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">b</a> </li>
<li><a href="#">c</a> </li>
<li><a href="#">d</a> </li>
</ul>10.栅格处理
一共可以分成2-5个列，可以根据栅格自行选择。
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">
hello a
</div>
<div class="ui-bar ui-bar-b">
hello b
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-a">
hello a
</div>
<div class="ui-bar ui-bar-b">
hello b
</div>
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">
hello a
</div>
<div class="ui-bar ui-bar-b">
hello b
</div>
</div>
</div>11.主题
data-theme="z"这个目前好像不是很好用。