jQuery mobile 移动web(6)

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

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

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

(0)

相关推荐

  • Android实现横竖屏切换的实例代码

    这几年一直在做手机上和电视盒的App,几乎没有考虑过横竖屏切换的问题.电视盒好说,横屏不变,你要是给它设计个竖屏人家也没机会使:而手机上的应用就不好说了,有些界面你设计了横竖屏兼容可能是为了表示你的功能强大.但是按照惯例,或许也是设计师图省事,我们只是做一个方案.就像目前主流的App都只有竖屏一个模式,比如微信.京东和招商银行.我截了几张图表示一下. 但是像地图之类的应用,也许横屏会显示的更友好一些.请看腾讯地图的设计如下: 细心的你会发现,地图的横竖屏的样式几乎是一样的布局,调整起来还是比较容

  • JS检测移动端横竖屏的代码

    使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 可是这段代码我不能用.因为我

  • javascript检测移动设备横竖屏

    如何判断 移动设备提供了两个对象,一个属性,一个事件: (1)window.orientation   属于window对象上一个属性:共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式. (2)orientationchange     是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件. 这两个搭配起来使用,很容易就能获得设备的

  • Mobile Web开发基础之四--处理手机设备的横竖屏问题

    为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显--我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个).很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要. window.orientation属性与onorientationchange事件 win

  • 解决Android手机屏幕横竖屏切换

    Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载), 怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在AndroidManifest.xml中为Activity设置configChanges属性, application android:icon="@drawable/icon" android:label="@string/app_name"> <activ

  • 更靠谱的H5横竖屏检测方法(js代码)

    前不久,做了一个H5项目,需要在横竖屏变化时,做一些处理.毫无疑问,需要使用orientationchange来监听横竖屏的变化. 方案一: // 监听 orientation changes window.addEventListener("orientationchange", function(event) { // 根据event.orientation|screen.orientation.angle等于0|180.90|-90度来判断横竖屏 }, false); 代码添加上

  • 使用jQuery Mobile框架开发移动端Web App的入门教程

    一.jQuery Mobile 的渐进增强设计与浏览器支持 根据维基百科( Wikipedia ) 的解释,渐进增强的设计主要包括以下几点 basic content should be accessible to all web browsers (所有浏览器都应能访问全部基础的内容) basic functionality should be accessible to all web browsers (所有浏览器都应能访问全部基础的功能) sparse, semantic markup

  • jQuery mobile 移动web(4)

    移动互联网的发展,促生了各种各样的移动Web框架.jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏移动设备的 Javascript 库,与 HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的 Web App,而且不需要安装任何东西,只需将需要的 *.js 和 *.css 文件直接包含到 web 页面中即可. 下拉菜单: 设置label 元素的for 属性为 select lab

  • jQuery mobile 移动web(6)

    jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作.   taphold 触摸屏幕并保持一段时间.   swipe 在1秒内水平移动30px屏幕像素上时触发.   swipeleft 向左侧滑动   swiperight 像右侧滑动. 2.方向改变事件 orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数,   该参数有两种返回值:p

  • jquery mobile 移动web(5)

    有序列表 <div data-role="content"> <ol data-role="listview" data-theme="g"> <li><a href="#"> List 1</a></li> <li><a href="#"> List 2</a></li> <li&

  • jQuery Mobile页面跳转后未加载外部JS原因分析及解决

    在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中引用的JS并未成功运行.因为,JQM并为将整个页面加载到当前的dom中,仅将data-role="page"元素加入当前的dom中. 因此,在<head>中引入的外部JS文件,以及<page>标签外的JS均不能正常运行,刷新页面后方可加载成功. 鉴于JQM这个特性不太可能主动更改,可以用两种方法来解决:一是在index页面中,注册所有需要使用到的外

  • jquery.mobile 共同布局遇到的问题小结

    最近项目用上了jquery.mobile这货,在手机上做点简单的显示.之前只知道有这个框架,没把玩过. 特别是事件绑定方面,相比桌面系统下浏览器用着各种不爽,不得要领. 如下图,在做后台系统时,一般左侧都是一个个模块及下属菜单项,可展开折叠. 我的问题卡在了累计评价这块,为了页面复用,累计评价中嵌套了iframe做评论显示. 第一槛 有过移动WEB开发的同学应该知道,IOS浏览器下iframe中内容过多时,滚动条时不会出现的,内容好像被截断了. 查资料最终搞定,手机屏毕竟小,评论多的时候不可能像

  • jQuery Mobile框架中的表单组件基础使用教程

    一.表单组件基础 1.组件简介 jQuery Mobile 中的表单组件是基于标准 HTML ,然后在此基础上增强样式,因此即使浏览器不支持 jQuery Mobile 表单仍可正常使用.需要注意的是, jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式,因此对于 iphone/ipad 与 Android 使用 Web 表单将会变得非常方便. jQuery Mobile 的表单组件有以下几种: (1)文本输入框, type="text" 标记的 input 元素会

  • jQuery Mobile开发中日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

  • jQuery Mobile中的button按钮组件基础使用教程

    一.Button 组件及 jQuery Mobile 如何丰富组件样式 在 jQuery Mobile 里,可以通过给任意链接添加 data-role="button" 来产生一个 button 组件,jQuery Mobile 会追加一定的样式到链接,值得注意的是,jQuery Mobile 在给组件元素追加样式时不一定只在原有的元素上添加 CSS 和 Javascript 响应,一般还会追加一些新的元素使到组件的样式更接近于原生的 App 组件样式.下面给出一个例子: 这是一个添加

  • jQuery mobile的header和footer在点击屏幕的时候消失的解决办法

    jQuery Mobile简介 jQuery Mobile 是创建移动 web 应用程序的框架. jQuery Mobile 适用于所有流行的智能手机和平板电脑. jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局. 给header和footer添加 data-position="fixed" 和 data-tap-toggle="false"即可,代码如下: <div data-role="footer&q

随机推荐