0

0

jQuery mobile 移动web(6)_jquery

php中文网

php中文网

发布时间:2016-05-16 15:24:24

|

1375人浏览过

|

来源于php中文网

原创

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()方法;

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

智能移动网站管理系统(SmartMobile)
智能移动网站管理系统(SmartMobile)

智能移动网站管理系统( SmartMobile )是由仙人掌软件基于asp+access/html5/jquery mobile/css、php+mysql/html5/jquery mobile/css3环境下开发的企业级移动网站管理系统。SmartMobile 内置单页、新闻、产品、视频等内容模型,在很大程度上满足了更多层次用户的需求和发展需要,兼容Android、iOS、黑莓等手机操作平台。

下载

     $.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,也不需要理会Android必须的APK。

3.支持跨平台和跨设备开发:一个巨大的好处是,我的应用程序马上可以在Android和IOS上工作,同样也可以在其他平台上工作。作为一个独立开发者,为不同的平台维护基础代码是一项巨大的工作。为单个手机平台编写高质量的手机应用需要全职工作,为每个平台重复做类似的事情需要大量的资源。应用程序能够在Android和IOS设备上同时工作对我来说是一个巨大收获。

更进一步,尤其是对于运行Android各种分支的设备,它们大小和形状各异,想要让你的应用程序在各种各样屏幕分辨率的手机上看起来都不错,这是真正的挑战。对于要求严格的Android开发者来说,按照屏幕大小进行设屏幕分割(从完全最小化到最大进行缩放)会需要很多开发时间。由于浏览器会在每个设备上以相同的方式呈现,关于这个方面你不必有任何担心。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

797

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

272

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

144

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

25

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

92

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

53

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

15

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

717

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

64

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 7.1万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 11.4万人学习

前端开发(基础+实战项目合集)
前端开发(基础+实战项目合集)

共60课时 | 4.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号