• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery mobile 移动web(6)

jQuery mobile 移动web(6)

作者:柠檬先生 字体:[增加 减小] 来源:互联网

柠檬先生 通过本文主要向大家介绍了jquery_mobile_web,jquery_mobile与html5等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

jquery mobile 针对移动端设备的事件类型。

   1.touch 事件。

     tap 快速触摸屏幕并且离开,类似一种完整的点击操作。
     taphold 触摸屏幕并保持一段时间。
     swipe 在1秒内水平移动30px屏幕像素上时触发。
     swipeleft 向左侧滑动
     swiperight 像右侧滑动。

   2.方向改变事件

     orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数,
     该参数有两种返回值:portrait(纵向)landscarp(横向)。

   3.滚动事件,

     scrollstart 开始滚动时候触发该事件。
     scrollend 滚动结束时触发该事件。

   4.显示/隐藏

     pagebeforeshow 当视图通过动画效果开始显示在屏幕之前触发事件。
     pagebeforehide 当视图通过动画效果开始隐藏之前触发事件,
     pageshow 当视图通过动画效果显示在屏幕之后触发事件。
     pagehide 当视图通过动画效果隐藏后触发。

    示例代码:     

  $("div").live("pageshow",function(event,ui){ 
        alert("this page just hidden"+ui.prevPage)
      })

  5.模拟鼠标事件

     vmouseover 统一处理触摸和鼠标悬停事件。
     vmousedown 统一处理触摸和鼠标按下事件。
     vmousemove 统一处理触摸和鼠标移动事件。
     vmouseup 统一处理触摸和鼠标按键松开事件。
     vclick 统一处理触摸和鼠标点击事件。
     vmousecancel 统一处理触摸和鼠标l离开事件。

页面视图辅助工具

   1. $.mobile.changePage

    通过函数编程的方式改变两个视图之间切换效果。通常在点击超链接或提交表单的时候自定义切换效果。

     语法:      

 $.mobile.changePage(to,options);
      to 是必选参数, 可以传递的参数类型包括字符串,对象。
       options 可选,传递的是一个JSON 数据格式对象,
       用法: 以下实例将改变decondPage.html 的页面效果
       $.mobile.changePage("secondPage.html",{ 
        transition:"slidedown"
      }) 

   表单提交操作   

 $.mobile.changePage("submit.php",{ 
      type:"post";
      data:$("form#add").seriaize();
    })

   2.$.mobile.loaPage

    主要的作用是加载外部页面,并插入当前页面的DOM元素内。
     $.mobile.loadPage(url,options);
    url 是一个必选参数,传递一个绝对或者相对的 URL 地址
     options 可选参数,传递的是一个JSON 数据对象。

  示例:   

$.mobile.loadPage("secomdPage.html");
     提交表单并加载结果页面:
     $.mobile.loadPage("result.php",{ 
      type:"get",
      data:$("form#search").serizlize();
    })

数据存储:

   1.jqmData()方法;

    可以在元素上绑定任意数据。

     $.mobile.jqmData(element,key,value)
      element 参数是指定需要绑定数据的元素;
       key 需要绑定数据的属性名,
       value 绑定的数据。

   2.jqmRemoveData() 方法:

     该方法是移除绑定在元素上的data数据,
     $.mobile.jqmRemoveData([name])
      name 是可选参数,指定需要移除哪个data属性,如果不穿参数,则需要移除元素上的所有数据。

   3.jqmHasData() 方法

       判断元素上是否存在绑定 的数据,
       $.mobile.jqmHasData(element);
      element 参数是一个进行数据检查的DOM元素。

地址路径辅助工具:

   1.解析URL 地址

     $.mobile.path.parseUrl 函数解析一个Url 指定, 并返回一个含有所有参数值的对象,让我们很轻易的访问Url地址上的参数属性。

     parseUrl 函数的语法

     $.mobile.path.parseUrl(url);
      url 参数是一个相对或者绝对的URL地址,必选传入的参数。
       parseUrl 函数返回一个对象,对象内包含丰富的属性。
       属性: hash 说明:#号后面的所有的字符内容,相当于location 的hash
      属性: host 说明:URL的主机名和端口号
       属性: hostname 说明:返回只包含URL 的主机名。
       属性: href 说明:返回整个URL地址。
       属性: pathname 说明:返回文件或目录的关联路径
       属性: port 说明:请求返回Url的端口号
       属性:portocol 说明:返回请求Url 地址的协议,如 http https
      属性:search 说明:返回地址中“?”后面的请求参数
       属性:authority 说明:返回用户名,密码,主机名,端口号组成的地址,
       属性:directiry 说明:返回请求URL地址的目录路径,
       属性:domain 说明:返回 protocal 协议和authority 组成的路径
       属性:filename 说明:返回请求的Url文件名
       属性:hrefOfHash 说明:返回不包含hash 值的URL 路径。
       属性:hrefOfSearch 说明:返回不包含请求参数和hash值的URL 路径。
       属性:password 说明:返回请求URL 中的密码 如ftp 协议密码。
       属性: username 说明:返回请求URL中的用户名,如ftp 协议的用户名。

loading 显示/隐藏

     显示loading 对话框的方法是
       $.mobile.showPageLoadingMse();
     隐藏loading 对话框的方法是
       $.mobile.hidePageLoadingMse();

 JQuery Mobile 和 HTML5 的 3个优点

 1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O'Reilly出版的JQuery Mobile书籍,我完成了一个可以工作的app初步版本。在此之前我没有HTML5 / JQuery Mobile开发经验。与Android和iOS相比,使用JQuery Mobile和HTML5构建你的UI和逻辑会比在原生系统下构建快得多。

译注:原生系统:原装的操作系统,例如Android原生系统是Google发布未经修改的系统。在本文中,原生应用指直接用系统提供的API开发的程序,与JQuery Mobile开发的程序相对应。

我发现Apple的Builder接口的学习曲线十分陡峭,同样学习令人费解的Android布局系统也很耗时间。此外,要使用原生代码将一个list view连接到远程的数据源并具有漂亮的外观是十分复杂的(在Android上是ListView, 在iOS上是UITableView)我能够通过已经掌握的JavaScript和HTML/CSS知识快速地实现同样的功能,无需学习新的adapter,delegate等等抽象概念,只要编写JQuery代码就可以做到。

2.避免麻烦的应用商店审批过程以及调试、构建带来的痛苦:为手机开发应用,尤其是iOS系统的手机,最痛苦的过程莫过于通过Apple应用商店的审批。想要让一个原生应用程序发布给iOS用户,你需要等待一个相当长的过程(需要好几天,甚至可能是好几周)。不仅在第一次发布程序时要经历磨难,以后的每一次升级也是如此。这使得QA和发布流程变得复杂,还会增加额外的时间。由于JQuery Mobile应用程序仅仅是一种web应用程序,因此它继承了所有web环境的优点:当用户加载你的网站时,他们就马上“升级”到最新的版本。可以马上修复bug和添加新的特性。即使是在Android系统——应用市场的要求比起Apple环境要宽松得多,在用户不知不觉中完成产品升级也是一件很好的事情。

进一步的好处是,发布beta或测试版本会更加容易。只要告诉用户用浏览器打开你的网址就可以了!不需要考虑iOS令人抓狂的DRM,也不需

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery mobile 移动web(4)
  • jQuery mobile 移动web(6)

相关文章

  • jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
  • 最佳6款用于移动网站开发的jQuery 图片滑块插件小结
  • 基于jQuery实现的水平和垂直居中的div窗口
  • jquery实现勾选复选框触发事件给input赋值
  • jQuery简单实现页面元素置顶时悬浮效果示例
  • jQuery实现Tab选项卡切换效果简单演示
  • jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
  • jQuery实现动画效果的简单实例
  • jQuery制作全屏宽度固定高度轮播图(实例讲解)
  • jQuery旋转插件jqueryrotate用法详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
    • jquery插件制作 表单验证实现代码
    • JQuery EasyUI的一些常用组件
    • XMLHttpRequest处理xml格式的返回数据(示例代码)
    • jQuery代码优化之基本事件
    • 基于JQuery的Select选择框的华丽变身
    • jQuery对象初始化的传参方式
    • 举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
    • DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
    • 基于jquery的滚动鼠标放大缩小图片效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有