移动web
文章平均质量分 73
狼之血舞
我以我命行我道
展开
-
javascript常用的107个语句
1.document.write(“”); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)5.得到表单中元素的名称和值:document.getElementByI转载 2012-11-07 14:44:23 · 738 阅读 · 0 评论 -
iphone/ipad网站开发技巧整理
iphone/ipad网站开发技巧整理, ipad 屏幕翻转 网页宽度自适应2011-04-18 17:22iphone/ipad异常刚猛,在此把收集到的一些开发技巧罗列出来,方便项目中参考使用,如下:侦测iPhone/iPod开发特定设备的移动网站,首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA,然后转向到专属转载 2012-11-07 14:46:12 · 803 阅读 · 0 评论 -
PhoneGap
在2012年3月份程序员杂志上,应邀撰写了一篇关于phoneGap的介绍,题目为《关于PhoneGap的7件事》,限于篇幅,一些内容没有加入。现把该文章同时发布到博客上,并会逐步填充更详尽的内容。一切源自iphone。2008年旧金山的iPhoneDevCamp上,来自Nitobi的工程师Brock Whitten,Rob Ellis和Andre Charland萌发并初步实现了一转载 2012-11-08 14:49:32 · 921 阅读 · 0 评论 -
使用面向 iOS 的本机插件扩展 PhoneGap
范例文件 MyFirstPhoneGapPlug转载 2012-11-08 14:47:11 · 671 阅读 · 0 评论 -
jQuery Mobile 页面切换动画的使用(data-transition)
页面中页面切换动画:jQuery Mobile可以实现页面的切换效果。在同一个Html文件里面,可以定义多个page,切换时直接使用超链接就可以了。data-role="page" id="main" data-transition="pop"> href="#page2" >链接2data-role="pag" id="page2">转载 2013-03-06 11:17:44 · 4636 阅读 · 0 评论 -
tomcat,Tomcat发布项目方法
第一种方法:在tomcat中的conf目录中,在server.xml中的,节点中添加: Context 节点属性,可详细见相关文档。 第二种方法:将web项目文件件拷贝到webapps 目录中。 第三种方法:很灵活,在conf目录中,新建 Catalina\localhost目录,在该目录中新建一个xml文件,名字不可以随意取,要和path后的那个名字一致,按照下边这个pa转载 2013-03-06 10:36:13 · 686 阅读 · 0 评论 -
HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以转载 2013-03-07 11:06:26 · 672 阅读 · 0 评论 -
android gallery实现div左右滑动
效果图:随着手指在移动设备上滑动,DIV也随着滚动.想看效果,可以download代码,用手机来测试.(在目前的移动设备上,内部块元素是不支持滚动条的!) 实现原理:核心利用DIV的overflow: hidden; 和scrollleft和scrollwidth完成.实现步骤:1. 画页面.首先获取body可视区域的宽,然后减去div控件的转载 2013-03-12 13:28:33 · 1282 阅读 · 0 评论 -
Cordova2.0(既PhoneGap)中通过Plugin实现Java和JS代码互相调用
之前写过一篇PhoneGap中Plugin用法的博客,http://www.cnblogs.com/wuwangSaber/archive/2012/05/28/2521321.html不过当时用的是cordova-1.7.0这个版本,而在cordova-1.7.0.js中也明确指出addPlugin方法将在2.0版本中被移除,以下为源码// TODO: remove in 2.0转载 2013-03-11 17:15:20 · 1633 阅读 · 0 评论 -
给phonegap添加一个支持跳转的插件
1、版本问题phonegap 在2.0以前和2.0以后进行插件开发的方式不同,我这一次使用的是1.7的。2、开发的步骤第一、编写插件类:com.ljp.laucher.util.TargetActivityPlugin.javapackage com.ljp.laucher.util;import org.apache.cordova.api.Plugin;impor原创 2013-03-12 10:25:26 · 1593 阅读 · 1 评论 -
跨平台移动开发实战
1、 基于Phonegap实际上是用B/S的技术基于C/S的模式来开发, Phonegap+HTML5的组合是一个比较成熟,并且行得通的方案。我这两个月,就是基于这样的总体路线做到了能覆盖几大平台的产品。 但Phonegap+HTML5不是万能的,不是所有类型的产品都适合,通过自己的实际体验,只有那种交互性不强,以信息获取为主的产品比较适合采用这种技术路线。 2、转载 2013-03-12 21:30:59 · 768 阅读 · 0 评论 -
HTML5移动App剖析
by byane过去的几年里,我一直在研究HTML5移动Apps。整体的印象就是HTML5为开发者提供了一个跨平台的移动apps开发方案,并且该方案具有很好的扩展性和灵活性。我始终认为web技术将成为移动设备上的开发平台,只是目前该技术可能尚未成熟。我很担心有些人还没有弄清楚HTML5到底是什么,就盲目地开始在自己的移动设备开发中使用HTML5了。在过去的一转载 2013-03-12 21:40:14 · 839 阅读 · 0 评论 -
HTML5移动客户端开发之CSS3、Javascript
判断android与iPhone区别进行重置视窗和初始化缩放:1<script type="text/javascript">// 2 document.write(window.navigator.userAgent.match(/android/i) ? '<meta name="vi转载 2013-03-13 10:03:42 · 1366 阅读 · 0 评论 -
CSS+JavaScript实现页面不同布局的切换
一、关于显示方式的切换显示方式的切换很常见,最常见的莫过于在文件夹中查看文件的时候,我们可以选择“平铺”、“图标”、“列表”、“详细信息”等,如下图所示:这是一个不错的功能,可以让用户自定义一些自己喜欢的偏好的显示方式,我们再web页面上,同样可以做。这可能说是一种提高用户体验的方法。获取您见过看某篇文章时,在某个地方会有“大 – 中 – 小”的文字大小切换按钮,我们这转载 2013-03-13 11:05:00 · 2418 阅读 · 0 评论 -
如何用HTML5+PhoneGap写个Path出来?
最近Path这个应用很火爆,网上也出现了不少仿Path菜单的项目。即使在原生APP里边,Path的效果也是非常赞的。我突然想,Web APP是不是也能做出类似Path那样的效果呢?于是就有了OPath这个项目,它的客户端部分是完全用PhoneGap+HTML5开发的。坦白的讲,OPath比Path差得不是一点半点,但是比很多国产的原生应用体验要好,下边是演示视频。http://转载 2013-03-13 14:36:34 · 963 阅读 · 0 评论 -
WEB移动应用框架构想
iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit、Rhodes、gwt-mobile…当我们已经开始惊叹 web移动应用充斥着各种各样框架与类库的时候,其实各大web框架才刚刚开始他们的移动领域:Yahoo的YUI3.2的Touch版、jQuery的 jQueryMobile、ExtJS整合JQTouch和Raphaël库推出的Sencha Touch框架。。。转载 2013-03-13 10:34:58 · 677 阅读 · 0 评论 -
移动开发跨平台之争:HTML5只是看上去很美?
http://www.sina.com.cn 2012年09月18日 23:52 创事记微博 作者:雅楠移动开发跨平台之争:本地应用还是HTML5?(图自王哲演示文稿) HTML5的“跨平台优势”一说由来已久。我们之前曾报道Facebook工程师的改版手记,其中提到他们对HTML5跨平台快速迭代的推崇。然而前不久扎克伯格却公开发声“押注HTML5是大错”。关于它的实用性,转载 2013-03-12 21:11:45 · 1290 阅读 · 0 评论 -
移动web设计&开发45个实用指南
众所周知,对许多web设计者和开发者来说,移动web世界就像一个黑洞一样。它存在许多未知的因素(Programming the Mobile Web一书中谈到了这一点),并且现有的浏览器存在各种不同的版本。这篇文章,将为大家推荐45个最实用的官方资源。不幸的是,并非虽有的浏览器都提供了官方文档,这本书所做的更多的工作是研究并测试每个功能。请记住:所有的这些指南都是不完全的,有些甚至不一定是转载 2013-03-12 21:33:11 · 861 阅读 · 0 评论 -
AppCan开发框架
1、UI2.0与UI1.0的对比2012年初,我们发布了AppCan移动应用开发平台,在这个版本中,我们内置了基于JQMobile方案的CSS UI框架。这个框架可以帮助开发者遵循一套规则下,快速的开发应用。这套方案中主要采用了组合的概念。例如对一个按钮的描述,可以通过多个CSS类来组合进行定义,也可以通过视频了解更多。这样通过不同的组合可以生成多变的效果。在实际商用应用开发过程中,它转载 2013-03-13 09:54:41 · 5211 阅读 · 1 评论 -
拖拽:从 Dojo 到 HTML5
Dojo 及 HTML5 简介Dojo 是目前最流行的开源 JavaScript 工具库之一,很多开发者以及企业用户都把 Dojo 作为首选的 JavaScript 工具。Dojo 为 Web 应用的开发提供了大量的客户端组件,能够让你可以方便的进行 HTML DOM 操作、拖拽、AJAX 调用、定制可视化控件等来使得你的 Web 应用变成富网络应用 (RIA)。而且 Dojo 在性能、可转载 2013-03-13 15:00:43 · 981 阅读 · 0 评论 -
转:iPhone Android Web开发(概要)
一、 前端使用技术JavaScript、 jQuery、 Html、 Json、ajax二、 jQtouchjQtouch只是 jQuery的插件 ,它的作用是封装 iPhone中 Safari的特性效果实现 .包含:a) 页面的切换动画效果 (缺点:仅仅是页面切换不包含模块切换 )b) 简单的 ajax应用c)转载 2013-03-13 11:09:20 · 931 阅读 · 0 评论 -
用HTML5/CSS3/JS开发Android/IOS应用
现在人人都想成为安卓/IOS应用开发工程师。其实,安卓/IOS应用可以用很多种语言来实现。由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了。所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具。 在文章的末尾,也介绍了使用JAVA、C#、Lua以及AS3来开发安卓应用的工具。 希望大家都能找到适合自己的开发工具!祝大家开发安转载 2013-03-13 13:51:41 · 1024 阅读 · 0 评论 -
HTML5,CSS3与Javascript,iOS下基础WebApp学习经验记录(2)
(11)CSS中的zoom属性缩放div和其所有子元素缩放一个div除了用javascript调节height和weight属性外,还可以用zoom:X(firefox中如 -moz-transform: scale(X) ):yournode{-moz-transform: scale(X);zoom:X;}X可以是小数也可以是百分比,这么做的好处是zoom效转载 2013-03-14 11:36:17 · 991 阅读 · 0 评论 -
响应式设计的十个基本技巧
Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也分享了很多这方面的教程和资源。由于组织了YY活动在线上和大家分享Responsive的设计,为了能让大家更好的理解,我自己也有必要好好的做一下功课,今天这个就是功课,想和大家一起分享一下Responsive设计的一些基本技巧,和相对应的学习资源,希望对大家有所帮助。转载 2013-03-14 14:27:48 · 1222 阅读 · 0 评论 -
CSS3弹性盒模型布局模块介绍(1)
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/Web布局一直个是难点,但貌似现在我们有更好的选择了。背景首先,我们有表格布局。当不考虑语义并且利用一些适当的转载 2013-03-14 16:40:30 · 796 阅读 · 0 评论 -
【转载】对Web开发人员极有帮助的10个流程图
摘要: 在做决策时,流程图是一个非常有用的工具,可以对某个问题给出一步接一步的解决方案。流程图有助于可视化待解决的问题,故而可以让观察者理解流程,发现问题。关键词: 流程图在做决策时,流程图是一个非常有用的工具,可以对某个问题给出一步接一步的解决方案。和其他类型的图表一样,流程图有助于可视化待解决的问题,故而可以让观察者理解流程,或许也能发现瑕疵、瓶颈或者其他不明显的问题。本文收集转载 2013-03-14 11:38:19 · 1171 阅读 · 0 评论 -
学习之响应式Web设计:Media Queries和Viewports
前言现在使用移动设备人越来越多,移动版的Website随之也越来越重要;但是移动端设备的大小不一,屏幕分辨率各不相同,我们不可能为BlackBerry,iPhone, iPad等等每个都做单独的页面设计。所以我们需要的Website设计要能迎合多种device的要求并且兼容所有的屏幕分辨率,这种设计就叫响应式Web设计什么是响应式Web设计(Responsive Web design)?转载 2013-03-14 14:09:50 · 915 阅读 · 0 评论 -
自适应网页设计/响应式Web设计
随着3G的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易转载 2013-03-14 14:12:26 · 1080 阅读 · 0 评论 -
CSS3.0盒模型display:-webkit-box;的使用
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari(-w转载 2013-03-14 16:32:03 · 1580 阅读 · 0 评论 -
精选文摘 浅析HTML5在移动应用开发中的使用
前言HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE、Chrome、FireFox、Safari,亦或是新出现的浏览器,谁能达到在移动端对HTML5更好的支持,谁就能在以后的移动应用领域占据更多的市场。现在我们怎么装APP有了HTML5以后怎么装APP更灵活、更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一。下面列举转载 2013-03-14 13:22:52 · 834 阅读 · 0 评论 -
响应式网页设计三步走
响应式网页设计,毫无疑问地变得越来越重要了。如果你还没听说过响应式设计,可以先看看响应式网站。对新手来说,响应式设计听起来可能会有点复杂。 但事实上,它比你想象的简单得多。为了让你能快速入门,我准备了一个简易的教程。通过这三个步骤,你一定可以了解响应式设计的基本原理和media query(在你有一些CSS基础的前提下)。 第一步. Meta 标签 (查看 demo)为了适应屏幕,转载 2013-03-14 14:33:05 · 898 阅读 · 0 评论 -
移动平台3G手机网站前端开发布局技巧汇总(转)
自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备)。开发者们都知道在高端智能手机系统中有两种应用程序:一种是基于本地(操作系统)运行的APP;一种是基于高端机的浏览器运行的WebApp,本文将主要讲解后者。WebApp与Native App有何区别呢?Native Ap转载 2013-03-14 15:13:16 · 917 阅读 · 0 评论 -
使用css3中transition的页面切换(继续创新版)
上一篇文章,我从教程中学到了使用css3中transition的页面切换,而这次呢,我就稍微使用这个方法稍做一些少少改动,我的想法是将所有层都叠在一起,一个一个从下往上翻。然后接着这个思路我又想到如果翻完的话怎么办?我就弄多了一个可以重新来过的按钮。最后总觉得美中不足,只有向下一页的翻动,如果想返回上一页的话,还要重新来过,为此我又新增加多一个按钮,按钮的动画我还是选择了Javascript来控制转载 2013-03-14 17:32:38 · 1398 阅读 · 0 评论 -
JS如何监控css3动画
摘要: 我们已经知道css3 transitions 可以让动画变得更简单和优雅, 而css3 keyframe animations 甚至可以完成复杂的细粒度的运动。 现大多主流浏览器支持transitions 和animation,这使得我们在项目中使用它们变得现实。 . ...我们已经知道css3 transitions 可以让动画变得更简单和优雅转载 2013-03-14 17:31:45 · 4479 阅读 · 0 评论 -
如何使用JS来改变CSS样式
document.getElementById("xx").style.xxx中的所有属性是什么盒子标签和属性对照CSS语法(不区分大小写)JavaScript语法(区分大小写)borderborderborder-bottomborderBottomborder-bottom-colorborderBottomCol转载 2013-03-15 10:17:42 · 755 阅读 · 0 评论 -
RelativeLayout代码布局
后台布局 在ANDROID 开发中有时候我们需要在后台添加布局文件这里我们来说一下后台添加RelativeLayout文件的方式: RelativeLayout,顾名思义,就是以“相对”位置/对齐为基础的布局方式。android.widget.RelativeLayout 有个 继承自android.view.ViewGroup.LayoutParams 的内嵌类转载 2013-03-29 17:01:56 · 953 阅读 · 0 评论 -
用javascript获取屏幕高度和宽度等信息
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth转载 2013-03-15 13:49:18 · 629 阅读 · 0 评论 -
js function定义函数使用心得
1.最基本的作为一个本本分分的函数声明使用。 复制代码 代码如下:function func(){} 或 var func=function(){}; 2.作为一个类构造器使用: 复制代码 代码如下:function class(){} class.prototype={}; var item=new class(); 3.作为闭包使转载 2013-03-15 14:32:36 · 958 阅读 · 0 评论 -
APP性能之终端兼容优化分享+诗帆 [复制链接]
Demo源码(不知是何原因论坛上贴出的代码都自动把换行弄成了标签,所以帖子里的代码大家就不要复制了,下载这个Demo吧) AdapterDemo.rar (692.3 KB, 下载次数: 756) 一、细说layout_weight 目前最为推荐的Android多屏幕自适应解决方案。 该属性的作用是决定控件在其父布局中的显转载 2013-03-20 09:38:57 · 802 阅读 · 0 评论 -
[Android实例] android手势识别(转)
对于触摸屏,其原生的消息无非按下、抬起、移动这几种,我们只需要简单重载onTouch或者设置触摸侦听器setOnTouchListener即可进行处理。不过,为了提高我们的APP的用户体验,有时候我们需要识别用户的手势,Android给我们提供的手势识别工具GestureDetector就可以帮上大忙了。基础GestureDetector的工作原理是,当我们接收到用户触摸消息时转载 2013-04-07 09:50:27 · 790 阅读 · 0 评论