面向移动设备的HTML5费用框架

面向移动设备的HTML5费用框架

一、起首之语

自个儿一贯都以在PC上揉搓网页的,这会儿怎么风向广大离间起手提式有线电话机网页开辟呢?原因是同盟社原来使用Java开垦的产品,耗了好四人力资本,不过最终的作用却有一点好。因为,Android系统一套东西,HTC又是新的一套,折腾死人呐。图片 1

于是乎总裁发狠,让笔者把手上的活都交出去,专心折腾web版的,看看最终效果如何。

累加笔者祈求手提式有线电话机上的付出学习非常久了,于是,一见依然,搞起了手提式无线话机支付方面包车型客车学习。

享用是很好的增加自个儿学习的不二秘诀。因为享受进度中梳理了所学,往往会有些匪夷所思的心得与收获。如此利人利已的职业,自然乐意为之。于是,自身在文章id > 3000的这一历史性时刻,新建了三个“mobile相关”的分类目录,把移动相关的有的事物资总公司计,整理,分享出来,大家共勉。

二、作者的选择

大廷广众,当出手提式有线电话机web开拓移不开CSS3 +
HTML5以及JavaScript。近年来,也应时而生了非常的多付出的框架,有胶水层的,也是有显示层的(不列项支出)。因为个人偏幸以及筛选,决定动用PhoneGap贯彻与器材相机,通信录等互动,jQuery Mobile达成页面UI的显示以及相关交互。

万临时间丰裕,小编想笔者会针对项目自个儿重新搞个更轻巧灵活的竞相框架。惦记到现真实景况况,依旧决定动用旁人的UI框架。

下截图为前几天个中午(二零一三-11-1
11:11)跑通的首先个PhoneGap下的Android手提式有线电话机程序:
图片 2

不过PhoneGap是与胶水层打交道的东西,要说起那东西还要求些时日。我们可以先把当前投标与页面展现相关的UI框架上。比方,本文要聊起的jQuery
Mobile。

转自:

二、我的抉择

大廷广众,当动手提式有线电话机web开拓移不开CSS3 +
HTML5以及JavaScript。如今,也应际而生了比非常多付出的框架,有胶水层的,也可以有展示层的(不列项支出)。因为个人偏爱以及筛选,决定动用PhoneGap落到实处与器材相机,通信录等互动,jQuery Mobile兑现页面UI的展现以及相关交互。

一经时间丰裕,笔者想作者会针对项目自个儿重新搞个更轻易灵活的并行框架。思量到现真实情形况,依旧决定动用旁人的UI框架。

下截图为前几天当中午(2012-11-1
11:11)跑通的首先个PhoneGap下的Android手提式有线电话机程序:
图片 3

不过PhoneGap是与胶水层打交道的事物,要说起那东西还须求些时间。我们得以先把当前投标与页面彰显相关的UI框架上。举个例子,本文要谈到的jQuery
Mobile。

一、起先之语

作者直接都是在PC上折腾网页的,那会儿怎么风向左近离间起手机网页开拓呢?原因是商号原来使用Java开荒的出品,耗了重重人工财力,可是最终的魔法却有个别好。因为,Android系统一套东西,华为又是新的一套,折腾死人呐。图片 4

于是CEO发狠,让自身把手上的活都交出去,专心折腾web版的,看看最终效果怎么样。

加上本人贪图手提式有线电话机上的开采学习十分久了,于是,一面依旧,搞起了手提式有线电话机支付方面包车型大巴求学。

享用是很好的抓牢本身学习的艺术。因为享受进度中梳理了所学,往往会微微出人意料的体会与收获。如此利人利已的事情,自然乐意为之。于是,自个儿在文章id > 2000的这一历史性时刻,新建了贰个“mobile相关”的分类目录,把运动相关的一些东西总括,整理,分享出去,大家共勉。

    乔希fire是二个开源的跨设备开销框架,帮助开辟者创设可以在二种设备上运维的web
app。它使用HTML5和JavaScript,何况同意开荒者急迅组合当地利用和特定的web应用。Joshfire能够令你的接纳接受键盘,鼠标,触摸屏,遥控器等设施的输入。乔希fire补助Node.JS。4.Sencha
Touch:基于HTML5的移动网页开垦框架。

HTML5+JS手机web开发之jQuery Mobile初涉,html5jquery

三、小编眼中的jQuery Mobile

前段时间停止,jQuery
Mobile的正经版还尚未出来,可是那并不妨碍对其的运用。官方首页上说其代码轻量(lightweight
code)。或许跟Sencha Touch相比较之下确实轻量。然而,在笔者眼里(本身为框架的缘故),其实代码照旧蛮啰嗦的(举例CSS文件min后有49K之多)。对于实际的项目来说,皮肤风格不可能二种并存的,所以,其a~e的七种模板选用实在多少多余,相当多都以打老抽的命。

图片 5

并且,实际项目中的设计员设计东东的时候不恐怕是接二连三跟着jQuery Mobile的UI来的。由此,我们难免会蒙受对其模板举办改变只怕新增加加的气象。

可是,作者得以确信的是,假如在个人网址大概其余部分非对外的中型项目上利用jQuery
Mobile的话,一定会爽歪的!

下一场,还应该有少数小编得肯定。jQuery Mobile的侧边可比Sencha Touch快多了。其UI展现基本上正是基于HTML5的data-自定义属性来的,跟它的老阿爹jQuery一样,确实是write
less, do more.

页面成分的UI显示完全能够依据HTML代码内容和天性而来,无需别的附加的JavaScript代码或是CSS代码,有模有样的手提式有线电话机页面效果就足以出炉。并且,要出成效页面,你假诺静下心花个1全日的时辰把官方的牵线文书档案看一篇就足以了。真如此轻松。

举个例子上边那个纯展现的页面们(PC提出采取Chrome浏览器围观)。
你能够狠狠地点击这里:jQuery
Mobile的UI呈现页面

手提式有线电话机能够访问以下地点:http://www.zhangxinxu.com/jq/mobile/

那是在桌面版opera 10.1 mobile下的来得效果:
暗中同意步向:
图片 6

分选“小说找寻”项 → 点击找寻框后:
图片 7

举个例子是在Android系统或然诺基亚上,渐变效果,平滑切换效果都会显暴露来的。

地方加起来大致有10八个HTML页面,捣鼓了多少个小时就出来的,当然是在强硬情势下。为啥快呢?因为多数未有动一点新的CSS代码或是JavaScript代码。直接write
HTML就能够。即使您对jQuery Mobile熟稔的话,能够越来越快。

语义化
要想行使jQuery Mobile,比较重要的一点便是要细心语义化。到不是选取HTML5之类的价签(思索到渐进加强,jQuery Mobile行使的或然XHTML时期的价签),而是divpul ,lih1~6等的使用。

jQuery Mobile标签下,分化的竹签所对应的UI效果相当多都早已定死了。譬喻:

<div data-role="header">     <h1>鑫空间-鑫生活</h1>     <a href="#" data-icon="arrow-r" data-iconpos="right">中文</a> </div>

地方这段data-roleheader的div中,h1标签不仅是个标题了,而是间接会修改当下页面包车型地铁title值,由此,上面几行代码对应的页面包车型客车title就是“鑫空间-鑫生活”,尽管你底部的title写的是“今天是小光棍节,呼啊啦~~”。

而背后的a标签文字即使尚无点名data-role="button",可是,哪个人叫他生在data-role="header"的div下呢,于是,它正是个显示开关的命。並且,JMobile机动将其稳住到左手了。

语义化的价签决定了其岗位,呈现等。确实有助于,不过富有限制。可谓有利有弊。

再有列表li标签中的第一个图片,会活动变成列表缩略图等,许多众多,你试一下就能够发觉那东西依旧挺有意思的。

嘛,可是呢,不用急,冰冻三尺非三日之寒,什么东西都是逐级储存的。才刚起始,说多了未必是好。所以,本文就念叨这么多。

比较久此前整理了篇将手机网址做成手提式有线电话机使用的JS框架。时隔一年多,非常多新的技能早已冒出,上面再来总计下还会有啥框架是切合面向手提式有线电话机配备的开垦的。

三、作者眼中的jQuery Mobile

近年来甘休,jQuery
Mobile的标准版还不曾出来,不过这并不要紧碍对其的选用。官方首页上说其代码轻量(lightweight
code)。也许跟Sencha Touch相对来讲确实轻量。不过,在小编眼里(本人为框架的原故),其实代码照旧蛮啰嗦的(举个例子CSS文件min后有49K之多)。对于实际的花色来讲,皮肤风格不容许两种并存的,所以,其a~e的八种模板选用实在多少多余,比比较多都是打生抽的命。

图片 5

何况,实际项目中的设计员设计东东的时候不容许是一连跟着jQuery Mobile的UI来的。因而,大家难免会遇到对其模板实行修改或然新扩大的景观。

只是,笔者得以确信的是,借使在私有网址也许其余一些非对外的中型项目上选择jQuery
Mobile的话,一定会爽歪的!

接下来,还应该有有个别自个儿得肯定。jQuery Mobile的左手可比Sencha Touch快多了。其UI展现基本上正是依附HTML5的data-自定义属性来的,跟它的老爹爸jQuery同样,确实是write
less, do more.

页面成分的UI显示完全能够依赖HTML代码内容和性质而来,不需求任何额外的JavaScript代码或是CSS代码,有模有样的手提式有线电话机页面效果就足以出炉。并且,要出成效页面,你一旦静下心花个1全日的时间把官方的牵线文书档案看一篇就能够了。真那样轻易。

例如说上边这几个纯展现的页面们(PC提议利用Chrome浏览器围观)。
你能够狠狠地方击这里:jQuery Mobile的UI呈现页面

手提式无线电话机能够访谈以下地方:

那是在桌面版opera 10.1 mobile下的来得效果:
暗许走入:
图片 9

挑选“作品搜索”项 → 点击搜索框后:
图片 10

如果是在Android系统只怕酷派上,渐变效果,平滑切换效果都会显表露来的。

地点加起来差不离有10多少个HTML页面,捣鼓了多少个小时就出去的,当然是在强硬形式下。为何快吧?因为相当多未有动一点新的CSS代码或是JavaScript代码。直接write
HTML就可以。假诺您对jQuery Mobile熟稔的话,能够更加快。

语义化
要想接纳jQuery Mobile,很珍视的一些正是要留心语义化。到不是利用HTML5之类的标签(记挂到渐进巩固,jQuery Mobile动用的可能XHTML时期的标签),而是divpul ,lih1~6等的使用。

jQuery Mobile标签下,分歧的竹签所对应的UI效果相当多都已经定死了。比如:

<div data-role="header">     <h1>鑫空间-鑫生活</h1>     <a href="#" data-icon="arrow-r" data-iconpos="right">中文</a> </div>

上边这段data-roleheader的div中,h1标签不止是个标题了,而是径直会修改当下页面包车型大巴title值,因而,上面几行代码对应的页面包车型地铁title正是“鑫空间-鑫生活”,就算你底部的title写的是“明日是小光棍节,呼啊啦~~”。

而背后的a标签文字就算并未有一点点名data-role="button",但是,哪个人叫他生在data-role="header"的div下呢,于是,它正是个展现按键的命。况且,JMobile活动将其定位到左臂了。

语义化的价签决定了其岗位,展现等。确实有助于,可是富有限制。可谓有利有弊。

还会有列表li标签中的第一个图片,会自行成为列表缩略图等,大多广大,你试一下就能发觉这东西依然挺有意思的。

嘛,然而呢,不用急,冰冻三尺非13日之寒,什么事物都以渐渐积存的。才刚开始,说多了不一定是好。所以,本文就念叨这么多。

 

web前端开荒做了七年了,正致力HTML5、jQuery Mobile移动使用开拓web app,转眼大三就过完了,下学期开学就

本身告诉你:找既做app研究开发又做app培养和陶冶的营业所,大概得花点儿钱,但你要你人努力,专心复制大师的阅历,多少个月来,你就是有经验的。
 

Mobile初涉,html5jquery 一、开头之语
笔者直接都是在PC上折腾网页的,那会儿怎么风向大范围离间起手提式有线电话机网页开垦呢?原…


android用jquerymobile webview开荒应用 js ,css存到本地读取方法

对html js css 的文书地方你有一同的妄动放在什么地点上,能够放到手提式有线电话机的放权存款和储蓄器中,也足以拓宽SDHC卡中,假若有必要加密存款和储蓄也能够假若不是为了跨平台的话 作者照旧提议直接用android 原生开拓,在功能和交互上都会好些。能够再使用中合拢升高模块,那样系统升级的须要也化解了。
 

    Sencha Touch 是世界上首先个依附 HTML5 的活动 Web
开垦框架,接济最新的 HTML5 和 CSS3 规范,周详合作 Android 和 Apple iOS
设备,提供了丰硕的 WEB UI
组件,能够快速的开销出运转于运动终端的应用程序。Shencha是率先个利用HTML5,CSS和JavaScript並且援救音频/摄像,本地存款和储蓄,圆角,渐变背景以及阴影的支出框架。

    The-M-Project是其余二个强大的JavaScript框架,它使用HTML5新的特点来越来越好和更便利地开荒活动应用。那个框架遵从知名的MVC软件架构方式。它还帮忙离线,所以您的用户能够在并未连接网络的景观下连续操作(当后一次有连线的时候,再将数据同步到服务器中)。提供不错的文书档案(这么些连串具有二个带领新用户入门的支出指南)。能够查看提供的亲自过问来对该品种有八个初指标刺探。这一个示例富含:ToDo
App(待办事项目采用) 和 KitchenSink (这些示例包涵那些框架提供的全体UI成分)。

Kendo UI是三个有力的框架用于迅速HTML5
UI开荒。基于最新的HTML5、CSS3和JavaScript规范。 Kendo
UI包括了开拓当代JavaScript开垦所急需的具有一切,包罗:强大的数据源,通用的拖沓(Drag-and-Drop)效能,模板,和UI控件。

    NimbleKit 是为 iOS 设备创设应用程序最高效的主意,你无需领悟Objective-C 或然 iOS SDK,你只需结合 JavaScript 代码编写 HTML
页面就足以了。

    13、joshfire

    Wijmo是叁个根据jQuery
UI的UI部件的套件。Wijmo部件举办了优化客户端Web开采和选用jQuery的优厚的性格和易用性的技能。全数的Wijmo部件都布置了20多少个宗旨和支撑ThemeRoller。

    jQuery Mobile 是 jQuery 在手提式有线电话机上和平板设备上的本子。jQuery Mobile
不仅仅会给主流移动平台带来jQuery宗旨库,何况会发布二个完完全全统一的jQuery移动UI框架。协理环球主流的移位平台。jQuery
Mobile开辟公司说:能支付这一个种类,大家十三分快乐。移动Web太供给一个跨浏览器的框架,让开辟职员开拓出真正的位移Web网址。

    7、Wijmo

    EmbedJS是八个用来嵌入式设备的JavaScript框架如:移动电话,电视s、tablets和so
forth。EmbedJS庞大之处在于,它具备非常为一定平台和浏览器如iOS, Firefox,
Android等提供相应的花费版本。那样就可知以最少的代码,为用户提供最好的体验。并且借让你爱怜自身定制,能够行使其提供的EmbedJS
Build tool工具达成。EmbedJS基于Dojo达成,所以你只要纯熟Dojo
API语法,那EmbedJS将是您最棒的选项。

    16、Titanium

    有的时候候你或然要求二个超轻量级的框架,只要抱有用于支付标准客户端所必要的成效如:DOM操作,事件管理,Ajax和一些卡通效果。假如是那样的话,那几个框架刚好非常适合你。整个框架选拔GZIP压缩完现在独有4.2
KB。

    Magazine Grid 是一个超当代的 CSS 框架,用于 平板电脑 和 小米手提式有线话机,使用类似杂志的布置性风格。Magazine Grid 可让用户接纳 HTML5
成分来组织杂志页,相当的轻量级(<4k),在运动器械上加载非常的慢,对老的浏览器也支持。

    Julia框架由基本CSS3文本、JS库和各类平台的运营库构成。不像PhoneGap,朱莉娅不唯有包含调用本机代码的接口层,它还包含Model-View-Controller(MVC)协理,Delegation帮忙,OAuth帮衬,异步数据仓库储存取接口,HTML选取符(类jQuery调用接口),HTML模版(允
许嵌入JS代码)等应用开采必备的API接口。
基于Julia的施用开垦就好像网址开拓那么粗略,是的,你终归能够用HTML5支付三个一体化的、跨平台
的、不亚于本机代码的、易于维护的移动选取了!大幕就要发表,让大家一齐走入活动支付的新时期

    WebApp.Net 提供了非常的多的
API,由此能够扶助你节省点不清做事了。无需花时间去进行 Ajax
调用的编码,因为已经停放了,别的还应该有相当多别的内置成效,提供了详尽的文书档案和动用示范。

    PhoneGap是二个用基于HTML,CSS和JavaScript的,创立移动跨平台活动应用程序的连忙支付平台。它使开辟者能够运用摩托罗拉,Android,Palm,Symbian,WP7,Bada和布莱克berry智能手提式无线电话机的主干职能——满含地理定位,加快器,联系人,声音和震撼等,此外PhoneGap具有丰硕的插件,能够以此扩张Infiniti的法力。PhoneGap是免费的,但是它必要一定平台提供的附加软件,举例One plus的One plusSDK,Android的Android
SDK等,也得以和DW5.5配套开荒。使用PhoneGap只比为每种平台独家创设应用程序好一丝丝,因为即使基本代码是同等的,不过你仍旧须求为每一个平台独家编写翻译应用程序。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图