jQuery mobile
jQuery 一个html页面中可以有多个子页面进行转换的；下面给出一个实例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Pages within Pages</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content">
<p><a href="#about">About this app</a></p>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About This App</h1>
</div>
<div data-role="content">
<p>This app rocks! <a href="#home">Go home</a></p>
</div>
</div>
</body>
</html>
正如所见，上面的代码中包含了两个”page”:主页（id为home）和”about”(id为about)。从Home链接到About页面采用的是连接地址为#about，about页面返回到首页的链接地址为#home。jQuery Mobile会自动切换链接的目的div显示到移动浏览器中。该框架会隐藏除第一个包含data-role=”page”div以外的其它”page”
AJAX 导航
为了实现在移动设备上的无缝客户体验，jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此，当在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里。另外还需要确保请求的页面url唯一标识的。
这样的结果就是用户交互始终保存在同一个页面中。新页面中的内容也会轻松的显示到这个页面里。这种平滑的客户体验相比于传统打开一个新的页面并等待数秒的方式要好很多。当一个新的页面做为新的data-role=”page” div插入到主页面时，主页面会有效的缓存取到的内容。使得当要访问一个页面时能够尽快的显示出来。这个工作过程听起来难以置信的复杂，但是做为开发人员的我们大部份不需要了解其中工作的具体细节。只要能看到效果就OK。
注意:如果你不想采用AJAX的方式加载页面，而想以原生的页面加载方式打开一个链接页面，只需要在打开的链接上添加属性 rel=”external”属性
页面切换效果
你可以使用多种不同的切换效果来显示新页面内容，只需要在链接里添加data-transition属性即可。可能的值如下
|
slide |
从右到左切换（默认） |
|
slideup |
从下到上切换 |
|
slidedown |
从上到下切换 |
|
pop |
以弹出的形式打开一个页面 |
|
fade |
渐变退色的方式切换 |
|
flip |
旧页面翻转飞出，新页面飞入 |
例如
<p><a href=”#about” data-transition=”flip”>关于页面</a></p>
在浏览器中查看效果（个人觉得这几个效果是非常非常的炫）
注意：查看以上的效果需要您的浏览器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。
如果说需要将连接变成按钮 效果 附上一张图
为了使其尽可能的灵活，jQuery Mobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。
有两种布局方法使其格式化变得更简单：布局表格和可折叠的内容块
- 布局表格：组织内容以列的形式显示，有两列表格，和三列表格
- 可折叠的内容：当点击内容块的标题，则会将其隐藏的详细内容展现出来
下面是一个可折叠内容的实例，单击标题将看到具体的内容，再点击标题则会将展现的内容隐藏。
<!DOCTYPE html>
<html>
<head>
<title>Collapsible Content Demo</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-
1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>孤丹</h1>
</div>
<div data-role="content">
<div data-role="collapsible" data-state="collapsed">
<h4>奋斗的丹哥很可爱</h4>
<p>嘿嘿，我看过是蛮可爱的</p>
</div>
<div data-role="collapsible" data-state="collapsed">
<h3>丹哥简介 </h3>
<p> 说起这丹哥啊，那可真的是；得了得了，我不说，你们自
己看</p>
<p><img width='160px'
src="http://a26.photo.store.qq.com/psu?/352c255b-45f0-48c5-a9f6-
3c81d04142ac/ty*y0K1Z5O6tZAekTp3AXOrWTB2Juo1ZD4V2ALhmDvw!/i/YZXvhg87jQA
AYuGsKBAvXAAA&a=26&b=27&bo=9wGeAgAAAAABAE0!" /></p>
</div>
</div>
</div>
</body>
</html>
运行效果：
触摸选择的表单元素
输入框：
<!--文本输入框start-->
<div data-role="fieldcontain">
<label for="name">啥名:</label>
<input type="text" name="name" id="name" value="" />
</div>
<!--文本输入框start-->
这是一个文本框的按钮，和以前的html相比较我们需要做的事情在外层套一个div <div data-role="fieldcontain"></div>就解决了
jQuery mobile给我们呈现的效果是这样子的
复选框
<!--复选框start-->
<div data-role="controlgroup">
<legend>你喜欢那种口味的呢？</legend>
<input type="checkbox" name="vanilla" id="vanilla" />
<label for="vanilla">香草味</label>
<input type="checkbox" name="chocolate" id="chocolate" />
<label for="chocolate">巧克力</label>
<input type="checkbox" name="strawberry" id="strawberry" />
<label for="strawberry">草莓味</label>
</div>
<!--复选框start-->
复选框和原来的复选框相比较而言的话我们需要的是在所有的复选之外套一个div；<div data-role="controlgroup"></div>;另外标题用这个标签来显示<legend>你喜欢那种口味的呢？</legend>
效果：
数量选择条
<!--数量选择条-->
<div data-role="fieldcontain">
<label for="quantity">数量:</label>
<input type="range" name="quantity" id="quantity" value="1" min="1" max="10" />
</div>
<!--数量选择条-->
jQuery提供的这个模板能够手动拉动选择数量，可以用户自己输入选择数量，但是输入的时候字符串啊，都进行了过滤，十分值得信赖。我们消炎药做的事情是
在外层加一个
<div data-role="fieldcontain">
</div>
然后在input中type的类型是range 初始值value="1" 最小值min="1" 最大值max="10"
效果:
二选一的按钮（比如性别，开关等等）
<!--二选一的按钮-->
<div data-role="fieldcontain">
<label for="sprinkles">性别:</label>
<select name="sprinkles" id="sprinkles" data-role="slider">
<option value="m">男</option>
<option value="f">女</option>
</select>
</div>
<!--二选一的按钮-->
只想说这是一个神奇的东西，看着用吧，真的很神奇
效果是这样子的：
下拉框
<!--下拉框--> <div data-role="fieldcontain"> <label for="store">地点:</label> <select name="store" id="store"> <option value="hunant">中国湖南省</option> <option value="hubei">中国湖北省</option> <option value="guangdong">中国广东省</option> <option value="guangxi">中国广西省</option> </select> </div> <!--下拉框-->
这个也补多少直接看效果
这些表单元素呈现出了非常彪悍的效果，如果在移动设备上，你的手指一定是非常的享受！
浙公网安备 33010602011771号