随笔分类 - Phonegap/jQueryMobile
1
摘要：以下经过本人测试成功。测试平台：三星S5830I操作系统：Android 2.3.6浏览器：UC浏览器HTML标准：HTML5测试了三个事件：touchstart、touchmove 和 touchend，并获取了触摸时触点在页面上的坐标，根据坐标进行了左右滑动、上下滑动判断。代码如下：[html] view plaincopyTouchEvent测试TouchEvent测试未触发事件！测试条目1测试条目2测试条目3测试条目4测试条目5测试条目6测试条目7测试条目8测试条目9测试条目10测试条目11测试条目12测试条目13测试条目14测试条目15测试条目16测试条目17测试条目18测试条目19
阅读全文
摘要：http://www.beardnote.com/?p=5
阅读全文
摘要：在很多手机应用中，大家都会见过这样一种效果：当手指横向滑动屏幕时，屏幕上的页面会向左或向右滑动。 下面介绍一下当用HTML5+CSS3开发手机应用时解决这类效果的一款js框架：flipsnap。 flipsnap.js的源码大家可以到flipsnap官网：http://pxgrid.github.com/js-flipsnap/下载。 下面列出我写的小例子，大家一看应该就看明白了。水平切换 demo 1 2 3 4 5 6...
阅读全文
摘要：hammer.js是一个多点触摸手势库，能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器，在桌面浏览器上，也能将鼠标的点击当做触摸，方便开发人员在桌面浏览器上调试。这是一个专为触摸手势而生的js库，对有需要的朋友非常有帮助，奉上常用的一些方法调用文档。使用方法：1234567891011121314151617181920// 先要对监听的DOM进行一些初始化varhammer = newHa
阅读全文
摘要：触摸屏是现在所有智能手机的标配，还包括各种平板设备，而且很多桌面也慢慢在开始支持触摸操作。要开发支持触摸屏设备的 Web 应用，我们需要借助浏览器的触摸事件来实线。下图是各种触摸事件说明：本文我们介绍 11 个用来处理触摸事件以及支持多点触摸的 JS 库：QUO JSEvents:Touch, Tap, Double tap, Hold, Fingers, Swipe, Swipe Up, Swipe Right, Swipe Down, Swipe Left, DragOther features:Built-in jQuery-like methods. It uses $$ to avo
阅读全文
摘要：我们一直坚信Html/css在界面上最终会一统江湖，因为在众多的界面编写中，qt,gtk,wpf,win form, wxwidgets等等，只有Html/CSS是真正拥有统一标准，只有这个有潜力作用一次编写，到处长得一样。 回归正题，我们要编写android和ios的手机客户端程序，要使用定制界面，如果使用原生的Java和objective-c开发，要开发两套界面，并且更要维护两套代码，考虑开发成本太高。而web application+phonegap更适合我们的情况。 然后就有以下框架：我们主要比较android平台，版本2.2-4.3，ios平台优化较好，各个框架运行良好。 1. Jq
阅读全文
摘要：http://m.swdhy.com/page/ShowCompany.aspx?cid=388481&name=山东潍坊金城服装有限公司
阅读全文
摘要：slidesjs 是基于jQuery开发的一款功能强大,是简单的幻灯片插件，但是需要要应用于移动终端的话，还需要考虑手势滑动时候图片切换功能。 此次，我就在slidesjs基础上扩展了两个swipe属性"swiperight","swipeleft"。[html]view plaincopy//swiperightif(option.swiperight){control.bind('swiperight',function(){if(option.play){pause();}animate('prev',effect)
阅读全文
摘要：首先，当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时，我第一想到了iScroll。它的左右滑动，上下滑动的效果在安卓手机上也能让用户有良好的体验，自己写也能方便控制。我的需求是，插件要能左右滑动图片，当图片很长的时候要能上下滑动浏览全部图片，还要支持手势缩放，特别是较长或者较宽的图片。1.当最开始的时候，我做了一个本地缓存，把图片保存起来，为了加载滑动图片能更加流畅。js代码：var json=new Array(); for(var i=0;i 其中的li为动态加载生成，然后将li标签设置屏幕宽度，让li中的img标签宽度为100%，这样就可以全宽展示图片，实现左右一滑一...
阅读全文
摘要：http://www.jqmapi.com/index.html
阅读全文
摘要：子曾经曰过：如果你恨一个人，让他去开发PhoneGap应用；如果你爱一个人，让他去开发PhoneGap应用。去年这个时候我很烦恼，因为我觉得我OUT了。起因是我买了一台Android系统的手机。当我用自己的google账号登录上去后，我发现通讯录被同步了，Gtalk实时通知了，Gmail随身能看了。还有成百数千的应用，让我足足玩了一周。电脑占据了用户每天8小时的时间，网站创造了巨大的价值。但是，手机这东西却能够24小时不间断的陪着用户，消息推送机制更是让用户变得永久在线，随时可响应。我很兴奋，但是却高兴不起来。我是一个Web程序员。我喜欢写PHP，喜欢处理Mysql，我能用CSS和JavaSc
阅读全文
摘要：首先网上很多文章都是phonegap1.X的，可是自2.0后就没有相关的安装文件了，只有官网上写了怎么装不过官网有时候打不开，可能是首页出了问题但http://docs.phonegap.com这个域名还是可以访问的。在2.0上我们需要通过执行命令的方法来部署phonegap我们把下载下来的解压包解压，把里面的lib/ios/bin目录拖到终端（teminal）里面在文稿里面建个空文件夹phonegaphelloword，然后在终端里面输入./create ~/Documents/phonegaphelloword com.ben.phonegaphelloworld phonegaphell
阅读全文
摘要：Web开发者经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试，包括针对JavaScript，DOM元素和CSS样式的调试。但是，当我们期望为移动Web站点或应用进行调试时，这些工具就很难派上用场。weinre就是一个帮助我们在桌面来远程调试运行在移动设备浏览器内的Web页面或应用的调试工具。weinre是WEb INspector REmote的简写。本文将介绍weinre的基本使用方法，包括下载、安装、如何使用，以及使用weinre来调试phoneGap应用。关于Adobe Inspectweinre非常方便，目前来说是针对移动设备进行远程调试的最佳工具，但
阅读全文
摘要：事件类型：backbuttondevicereadymenubuttonpauseresumesearchbuttononlineofflinebackbutton当用户在Android系统上点击后退按钮的时候触发此事件。document.addEventListener("backbutton",yourCallbackFunction,false);详述：如果你需要在Android系统上重载默认后退按钮的行为，可以通过注册一个事件监听器来监听“backbutton”事件。它不再需求调用任何其他方法来重载后退按钮行为，现在你只需要为“backbutton”事件注册一个事件
阅读全文
摘要：PhoneGap是目前唯一支持7种平台的开源移动开发框架，支持的平台包括iOS、Android、BlackBerry OS、Palm WebOS、Windows Phone 7、Symbian和Bada，如图1-2所示。PhoneGap是一个基于HTML、CSS和JavaScript创建跨平台移动应用程序的快速开发平台。与传统Web应用不同的是，它使开发者能够利 用iPhone、Android等智能手机的核心本地功能——包括地理定位、加速器、联系人、声音和振动等，此外它还拥有非常丰富的插件，并可以凭借其轻 量级的插件式架构来扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加
阅读全文
摘要：Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。给链接添加data-icon 属性，可以添加按钮的图标html代码Delete带有图标的按钮：图标 Icon setdata-icon属性可以被用来创建如下所示的图标左箭头data-icon=”arrow-l”右箭头data-icon=”arrow-r”上箭头data-icon=”arrow-u”下箭头data-icon=”arrow-d”删除 data-icon=”
阅读全文
摘要：Phonegap为跨设备的应用开发提供了一个解决方案。如果某个应用只有js和html，则可以通过Phonegap的在线build工具，编译出多个平台的app安装包。当然通过Phonegap提供的js可以访问部分设备的资源，如网络连接（Connection）、相机（Camera）、文件（File）、存储（Storage）等，具体可以参看Phonegap开发文档。但很多Android应用，仅仅使用这些资源是满足不了需求的，所以必然需要访问本地接口的方法。初步实验，至少有两个方法可以访问本地的接口。开发Phonegap Plugin。通过实现Phonegap提供的接口，然后在config.xml中注
阅读全文
摘要：近期在移动方面的开发，使用jQuery Mobile ，移动方面的插件不如Web 方面的插件多，选择的更少，有一些需要自己去封装，但功力尚不足啊。日期插件JQM也提供了内置的，但样式方面不好看，只好百度、Google啦，找到了两款jquery-mobile-datebox 和mobiscroll-2.3jqueryMobileDatebox 这个在板上的表现不好，性能方面有点卡mobiscroll 性能方面比前者要好一些，效果更简洁 ，划动更流畅放在一起对比下各位看官，你们觉得哪个好看一些呢反正我觉得mobiscroll 效果比较好一些，好了来看一些这个家伙的使用方法吧第一步：到官网去下载个压
阅读全文
摘要：Jquery Mobile会增强我们原始的HTML页面，为此它有自己一些特性。你的html页面没有遵循这个特性导致你的JS脚本执行了多次。这样改造1、用下面的代码将你认为的一个页面包裹起来<div data-role="page"></div>2、将你的JS放在上面的div之中。这样Jquerympbile就不会将你的JS执行两次了。
阅读全文
摘要：1.触摸屏事件—— Touch events tap Triggers after a quick, complete touch event. 本人实际测试效果：轻轻点击，效果和按普通按钮差不多。 taphold Triggers after a held complete touch event (close to one second). 本人实际测试效果：按住一会儿，大约1秒，即触发。很顶用。 swipe Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs with
阅读全文
1