jQuery Mobile
简介
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。
jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。
jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间.
缺点:(缓存性太强，后台再做改变时，不会及时改变)
开发步骤：
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="javascripts/jquery-1.7.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.mobile-1.4.5.min.js"></script>
//要放在jquery文件后，因为它依赖于jquery
<div data-role="page" id="home"> //这里规定我们的data为页面信息，官方推荐写法
<div data-role="header"> //
<h1>Header</h1>
</div>
<div data-role="content"> //包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等
<p>Content goes here</p>
</div>
<div data-role="footer"> //在页面的底建立工具栏，添加一些功能按钮为了确保它始终保持在页面的底部
<h4>Footer</h4>
</div>
</div>
div dat-role=”header”></div>
在页面的顶部建立导航工具栏，用于放置标题和按钮（典型的至少要放一个“返回”按钮，用于返回前一页）。
头部\脚部始终保持屏幕的顶部：添加属性：data-position=”fixed”
效果一:
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
点击隐藏/显示固定的头部/脚部
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
点击隐藏/显示固定的头部/脚部
跳转页面
方法一：
通过a标签里的href跳转第二个页面的id
<div data-role="page" id="home">
<div data-role="header"><h1>主页</h1></div>
<div data-role="content"><p><a href="#about">跳转子页</a></p></div>
</div>
<div data-role="page" id="about">
<div data-role="header"><h1>子页</h1></div>
<div data-role="content">
<p>这是页面2!<a href="#home">回到主页</a></p></div>
</div>
注意：在这个页面中包含了两个data-role ，并且他们的切换是使用了#home的方式，这就是说我们可以在一个html中包含了两个页面， 以对话框形式跳转页面（data-rel=”dialog”）
<a href="#pagetwo" data-rel="dialog">转到页面二</a>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
</div>
</div>
方法二:
传统方式跳转外部html文件
<div data-role="content">
<a href="mobile2.html" data-transition="slideup">click me</a>
//尝试一下
</div>
跳转页面效果：
data-transition: slide 从右到左切换（默认）
slideup 从下到上切换
slidedown 从上到下切换pop 以弹出的形式打开一个页面
fade 渐变退色的方式切换
lip 旧页面翻转飞出，新页面飞入
按钮：
（我们推荐您使用 data-role=”button” 的 元素来创建页面之间的链接，而 或 元素用于表单提交。）
<a href="#" data-role="button" data-icon="search">搜索</a>
按钮样式
data-icon=”arrow-l”>左
data-icon=”arrow-r”>右
data-icon=”delete”>删除
data-icon=”info”>信息
data-icon=”home”>首页
data-icon=”back”>返回
data-icon=”grid”>网格
data-icon=”plus”>转发
可折叠性质的文本（点击可以查看全部类容，再次点击可以让类容隐藏，可在里面嵌套一个折叠文本）
<div data-role="collapsible" data-state="collapsed">
<h3>About this app</h3>
<p>This app rocks!</p>
</div>
导航：
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">页面1</a></li>
//注意这里，class="ui-btn-active"--代表当前激活状态，我们可以动态修改
<li><a href="#">页面2</a></li>
<li><a href="#">页面3</a></li>
</ul>
</div>
有序、无序列表样式：
添加属性：
data-role=”listview”
data-inset=”true”（圆角矩形）
li标签里添加属性：
data-role=”list-divider” 给li标签分组化显示
提供搜索功能的ul列表:
<p>请选择</p>
<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">
<li><a href="#">张三1</a></li>
<li><a href="#">李四1</a></li>
<li><a href="#">王五</a></li>
</ul>
图文并茂（如需向您的列表添加 16x16px 的图标，请向 元素添加 class=”ui-li-icon” 属性）
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="../public/imgs/demo1/banner.jpg">
<span>hello</span><p>这本书很好看</p>
</a>
</li>
<li>
<a href="#">
<img src="../public/imgs/demo1/bag.png">
<h2>这也是一本书</h2><p>这本书也不错</p>
</a>
</li>
</ul>
表单样式
fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。
当页面宽度大于 480px 时，它会自动将 label 与表单控件放置于同一行。当小于 480px 时，label 会被放置于表单元素之上。
<div data-role="fieldcontain">
<label for="fname">First name:</label>
<input type="text" name="fname" id="fname">
<label for="lname">Last name:</label>
<input type="text" name="lname" id="lname">
搜索框：
日历框：
下拉选择框：
<select id="colors" name="colors">
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
分组下拉框：
<select>
<optgroup label="Weekdays">
<option value="mon">Monday</option>
</optgroup>
<optgroup label="Weekends">
<option value="sat">Saturday</option>
</optgroup>
</select>
开关选项：
<label for="switch">切换开关：</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">开</option>
<option value="off" selected>关</option>
</select>
jQuery Mobile 提供了五种不同的样式主题，从 “a” 到 “e” - 每种主题带有不同颜色的按钮、栏、内容块，等等。jQuery Mobile 中的一种主题由多种可见的效果和颜色构成。
<div data-role="header" data-theme="b"> 列表视图测试</div>
关于jquerymobile的事件：
jquerymobile是由jquery而来的，所以可以使用任何jquery操作，并且可以和其他框架配合使用
$(document).on("pageinit",function(){ //页面加载完毕的事件
$("p").click(function(){
$(this).css("background-color","red");
})
})
点击事件：
$("p").on("tap",function(){
$(this).css("background-color","blue");
})
保持住点击的事件：
$("p").on("taphold",function(){
$(this).hide();
})
滑动的时候被事件
$("p").on("swipe ",function(){
$(this).css("background-color","yellow");
})
swipeleft 由它楼上而来，根据名字就知道，向左滑动
swiperight 由它楼上的楼上而来，效果和楼上差不多
滑动开始的时候被触发的事件
$(document).on("scrollstart",function(){
alert("开始滚动！");
}); //注意：iOS 设备会在滚动事件发生时冻结 DOM 操作(还没修改好)
滑动结束事件：
$(document).on("scrollstop",function(){
alert("结束滚动！");
});
手机方向发生改变的时候触发
$(window).on("orientationchange",function(){
alert("方向已改变！");
});
获得手机方向
$(window).on("orientationchange",function(event){
alert("方向是：" + event.orientation); //这里参数可以获得方向
});
简单案例，同样我也没测试过
$(window).on("orientationchange",function(){
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
扫一扫
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
