JQ mobile

jq mobile是什么

1.jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。
2.jQuery Mobile 可以应用于智能手机与平板电脑。
3.jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

jq mobile使用的价值

通过使用jQuery Mobile 可以 “写更少的代码，做更多的事情” : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。

jq mobile的引入

1.viewport以确保页面可自由缩放
<meta name="viewport" content="width=device-width, initial-scale=1">
引入 jQuery Mobile 样式
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
引入 jQuery 库
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
引入 jQuery Mobile 库
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

2.从jQuerymobile.com 下载 jQuery Mobile库

jq mobile列表

jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和 无序(<ul>).，在ul或ol标签中添加data-role=”listview”属性。在每个项目(<li>)中添加链接。
列表样式的圆角和边缘，可以使用 data-inset=”true” 属性设置。

jq mobile表单

1.表单输入
2.表单选择
3.表单滑动条

jq mobile主题

jQuery Mobile 提供了 2 种不同的主题样式,为a和b 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。当然通过设置元素的data-theme属性可以自定义应用的外观。
a:页面为灰色背景黑色文字
头部与底部均为灰色背景黑色文字
按钮为灰色背景黑色文字
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色，value 值为黑色
b:页面为黑色背景白色文字
头部与底部均为黑色背景白色文字
按钮为白色文字木炭背景
激活的按钮和链接为白色文本蓝色背景
input 输入框中 placeholder 属性值为浅灰色，value 值为白色

jq mobile事件

1.触摸事件 - 当用户触摸屏幕时触发
2.滑动事件 - 当用户上下滑动时触发
3.定位事件 - 当设备水平或垂直翻转时触发
4.页面事件 - 当页面显示，隐藏，创建，加载或未加载时触发

事件举例：
tap事件：
当点击 <p> 元素时，隐藏当前的<p>元素：

$("p").on("tap",function(){
  $(this).hide();
});

taphold事件：
点击不放（长按） 事件在点击并不放（大约一秒）后触发：

$("p").on("swipe",function(){
  $("span").text("滑动检测!");
});

swipeleft事件：
向左滑动事件在用户向左拖动元素大于30px时触发：

$("p").on("swipeleft",function(){
  alert("向左滑动!");
});

swiperight事件：
向左滑动事件在用户向右拖动元素大于30px时触发：

$("p").on("swiperight",function(){
  alert("向右滑动!");
});