JQ mobile

jq mobile是什么

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

jq mobile使用的价值

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

jq mobile的引入

1.viewport以确保页面可自由缩放

引入 jQuery Mobile 样式

引入 jQuery 库

引入 jQuery Mobile 库

2.从jQuerymobile.com 下载 jQuery Mobile库

jq mobile列表

jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(

) 和 无序(
).，在ul或ol标签中添加data-role=”listview”属性。在每个项目(
• )中添加链接。
  列表样式的圆角和边缘，可以使用 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").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("向右滑动!");
  });