移动WebApp开发-jQuery Mobile入门

移动互联网的发展，促生了各种各样的移动Web框架。jQuery Mobile 是一个针对触摸体验的 web UI 开发框架，很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏移动设备的 Javascript 库，与 HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的 Web App，而且不需要安装任何东西，只需将需要的 *.js 和 *.css 文件直接包含到 web 页面中即可。
一：环境介绍
（1）jquery.mobile-1.4.0.zip
地址：/download/
（2）Eclipse 3.7 +Tomcat 7 +JDK 7
二：搭建步骤
（1）通过Eclipse 创建动态工程，在WebContent下创建 js 和 css 两个文件夹。
（2）解压jquery.mobile-1.4.0.zip，拷贝jquery.mobile-1.4.0\demos\js
下的 jquery.js
jquery.mobile-1.4.0.min.js 到
WebContent\js 下
jquery.mobile-1.4.0\jquery.mobile-1.4.0.min.css 到 WebContent\css下 ，工程目录结构如下：
WebContent 下创建网页文件index.，内容如下：
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'在最近几年里，移动互联网高速发展、市场潜力巨大。继计算机、互联网之后，移动互联网正掀起第三次信息技术革命的浪潮，新技术、新应用不断涌现。今天这篇文章向大家推荐10大优秀的移动 Web 开发框架，帮助开发者更加高效的开发移动Web应用。
Sencha Touch Framework
　　Sencha Touch 是世界上第一个基于 HTML5 的移动 Web 开发框架，支持最新的 HTML5 和 CSS3 标准，全面兼容 Android 和 Apple iOS 设备，提供了丰富的 WEB UI 组件，可以快速的开发出运行于移动终端的应用程序。
jQuery Mobile
　　jQuery Mobile 框架把“write less, do more”精神提升到更高的层次。jQuery 移动框架可以帮助你设计一个可运行于所有流行智能手机和平板平台的应用程序，而不需要为每种移动终端都开发一个特别的版本。
　　jQTouch 是一款 jQuery 的插件，用于手机上实现动画、列表导航、默认应用样式等各种常见UI效果。支持 iPhone、Android 等手机。
The M Project
　　The-M-Project 是一个包含各种UI组件，基于 jQuery 开发 HTML5 应用程序的移动Web应用框架，支持 iOS、Android、Palm webOS和BlackBerry 等平台。
DHTMLX Touch – HTML5 JavaScript Framework for Mobile
　　DHTMLX Touch 是一个基于 HTML5 的免费 JavaScript 库，用于构建跨平台的移动 Web 应用程序。这不只是一组UI部件，而是一个完整的框架，它允许你为手机等触摸设备创建强大的Web应用程序。
WebApp.Net
　　WebApp.Net 提供了很多的 API，因此可以帮助你节省很多工作了。不需要花时间去进行 Ajax 调用的编码，因为已经内置了，另外还有很多其它内置功能，提供了详细的文档和应用演示。
Wijmo – jQuery UI Widgets
　　Wijmo 混合了 、、SVG 和 ，拥有30多个组件，是 jQuery UI 的一个扩展。
960 Grid on jQuery-Mobile
　　jquery-mobile-960 是一个用于移动
开发的网格框架，综合了 960.gs 的灵活性和 jQuery Mobile 的方便性。它的目的是让 jQuery Mobile 布局更加的灵活，使得应用应许在移动终端更加易用。
SproutCore HTML5 Application Framework
　　SproutCore 是一个
开发框架，它的目标是在无需浏览器插件的情况下，在浏览器中位应用程序提供极佳的桌面效果。
　　NimbleKit 是为 iOS 设备构建应用程序最快速的方式，你不需要知道 Objective-C 或者 iOS SDK，你只需结合
代码编写 HTML 页面就可以了。
未经允许不得转载： &国产腾讯移动WEB前端开源CSS框架FrozenUI，非常不错的移动端UI框架，简单易用，轻量快捷， 为移动端服务的前端框架。Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于 手Q样式规范，选取最常用的组件，做成手Q公用离…
淘宝支付宝前端CSS开源框架Alice，是支付宝的样式解决方案，是一套精选的基于 CMD 生态圈的样式模块集合， 是 Arale 的子集，也是一套模块化的样式命名和组织规范，其包括构建样式库的样式库解决方案、帮助团队理 解新技术的…
国产不错的jQuery图片轮播文字滚动特效代码SuperSlide，功能强大的JS特效集合，有tab切换， 图片轮播切换，文字滚动，导航菜单等网站基础JS代码大全，需要的可以去看看插件的参数配置 知道如何去使用，插件还有更多扩展效果，不…
这是我见过最强大的jQuery在线生成二维码插件，此JS特效基于HTML5的一些特效,如Canvas绘图，因此浏览的浏览器
需要支持HTML5特性，插件支持自定义LOGO功能，支持文字和图片两种模式…
优秀响应式jQuery 焦点图 插件bxSlider，优秀响应式布局设计 jQuery插件 ，自适 应任何设备，切换内容可以是视频、图片、HTML、支持触摸设备，自定义函数 callback,支持众多的参数自定义配置，浏览器支持Firefox, Chrome, Safari, iOS, Android…
基于 Bootstrap 改造的国产前端框架 H-ui，号称更懂中国的框架，完全免费，简单灵活， 兼容性好，满足大多数中国网站，向下兼容，兼容IE6，优先采用HTML5标签,更具语义化 ,采用CSS3，并提供IE解决方案，好用和实用。…
史上效果最好的焦点图幻灯片 jQuery插件 Skippr，轻量级插件、响应式布局插件，强大的参数自定义 配置，可自定义切换速度、切换方式、是否显示左右箭头、是否自动播放、自动播放间隔时间等配置 参数，调用插件也非常简单易用…
App.js是轻量级JavaScript UI 库，打造创建如原生的应用样的WebApp，可自定义 主题样式，框架基于zepto.js，包括的UI界面有:导航、弹出框、按钮、列表、滑动 输入、图片展示等网页元素模块。…
jQuery刮刮卡特效插件jQuery eraser、图片擦除特效，此特效一般用在抽奖刮刮卡活动中，鼠标涂抹后显示出中奖信息， 可自定义画笔大小，大家自己可以学习并进行改造使用…
轻量级九宫格屏幕解锁jQuery特效插件pattern lock，效果非常的炫，绘画也很流畅，支持事件函数Callback， 在浏览器兼容方面，肯定是兼容较现代的浏览器，Chrome、Firefox等，使用也非常简单，下面介绍下： 1.加载插件和jQuery link href=p…移动webapp前端ui用哪个框架好？
按投票排序
看你做什么，如果对性能要求苛刻，比如地图App这种，应该考虑React Native或者NativeScript这样的技术，因为可以编译成原生App。否则我会推荐
这是ionic的最新版本，基于angular2，丰富的UI组件，大大改进的编程模型，非常适合快速开发。
个人使用过 开发过项目，做下来感觉很不错,Ionic提供的样式够用了，关键是ionic 吧开发流程都帮你做好了，已经不再是单纯的UI框架，而是开发框架了。如果你要纯的UI框架，推荐个最近新发现的库： ，这是淘宝出的，应该靠谱
推荐个Jingle
这个看项目需求小项目 jQuery Mobile /
App Framework （jqmobi）更小的项目直接Bootstrap
推荐一个自己正在用的。微信设计团队推出，微信原生视觉体验样式库。
作为一个伪FEEer，尝试着回答一下。UI的话，分为基础样式和基础组件两部分。基础样式:
建议这一部分可以用一些轻量级的库如Purecss（），采用其Grid的部分即可，需要定制的部分，建议自行配置，或者是直接采用grid.css，grid960.css这样的栅格来处理。基础组件:
基础组件主要是button,input,form等，可以在看到很多的组件库，按照需要选择一部分，在做下自定义修改配色，阴影，边框什么的，动画的话就用animate.css吧。交互设计:
是webapp的难点和问题所在，个人建议，在移动端还是尽可能的减少复杂的交互内容，更多的做内容呈现和基础的功能实现（考虑兼容问题和移动网络流量，移动网络质量等因素）附加内容:
响应式设计也是要分场合的，在简单的内容呈现如博客，可以考虑响应式，不过针对业务系统，还是建议做一套移动版本和对应的桌面版本，这是个人的一些看法，希望有用。
移动端前端框架UI库（Frozen UI、WeUI、SUI Mobile）
angularjs配ionic不错。
MUI、Frozen UI、WeUI、SUI Mobile都还可以
已有帐号？
无法登录？
社交帐号登录HTML5来了，7个混合式移动开发框架
招聘信息：
在这个时间开始学习移动开发真是最好不过了，每个人应该都有一些移动应用的创意，而且你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识，懂一些CSS和JavaScript就够了。如果你总听别人说HTML5的移动应用太慢，我只能告诉你应该有一些主见，首先HTML5会越来越好，移动端的硬件也会越来越强，怎么说呢，你仔细看一看你手机上的应用吧，很多应用已经悄悄的使用混合式开发了，如果像你说的它们很慢，你发现它们了吗？目前已经有很多的框架可以帮助你开发跨平台的移动应用，在这篇文章中，我们只介绍最牛的7个。IONIC&是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MVVM框架和&AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发，相信IONIC一定会取得不错的成就 。IONIC的开发团队将尽快开发出一种通过IONIC creator提供开发者快速创建IONIC应用的方式。我们将很快就会看到一个支持拖拉功能的可视化开发工具，几分钟内开发一个app将不再只是吹xx。&Mobile Angular UI是使用&bootstrap 3&和&AngularJS&的响应式移动开发HTML5框架。Mobile Angular UI的关键字有：Bootstrap 3AngularJSBootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。AngularJS modules， 比如 angular-route, angular-touch 和 angular-animate响应式媒体查询是将bootstrap作为单独的文件，你只需要包含你所需要的东西。Mobile Angular UIu并不包含任何jQuery依赖，你需要做的只是通过一些AngularJS指令创建友好的用户体验。详细了解可以看一看&，上面有Mobile Angular UI的实践，如果你想了解的更深入一些，我建议你读一读&。Intel XDK&是Inter开发的一款跨平台开发工具，我们可以很容易的通过Intel XDK开发应用，你需要做的只是下载他们的应用开发工具 ，有Linux、Windows和Mac版，它还提供了很多个开发框架，比如Twitter bootstrap,&jQuery Mobile&和&Topcoat.Appcelerator’s Titanium&不同于其它框架的是，它是一个开源的框架。Titanium是混合式移动应用开发的一站式解决方案，你只需要下载 就可以解决所有的事情，Titanium SDK包含了很多手机平台的APIs和后端云服务。Titanium使用&，Alloy是一个快速开发的手机应用MVC框架， 模块式开发可以大大减小开发时间，提高代码复用。Titanium studio 还提供了一些。你可以熟悉一下这些模板，相关的教程也很快会推出。Sencha Touch&同样也是HTML5手机应用跨平台开发框架，运行iOS/Android/Blackberry。它已经诞生很多年了，现在已经成为很常用的混合式编程开发框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的 WEB标准，全面兼容Android和Apple iOS设备。下面是Sencha官方给出的几点特性1.基于最新的WEB标准 – HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。2.支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。3.增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。4.数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。Telerik’s&Kendo UI&是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。PhoneGap&恐怕是最老的一个框架了，相信很多人都已经听说过甚至使用过它，但是PhoneGap是基于开源的&&商业版本。第一段PhoneGap代码是在2008年8月的iPhoneDevCamp上写成的。创建它的一个主要动力是基于一个几乎每一个单独
的iPhone开发新手都要面对的简单事实：Objective-C是一个对Web开发人员来说非常陌生的环境，并且Web开发人员的数量远远多于
Objective-C开发人员的数量。问题是，是否有人可以开发一个框架，让Web开发人员可以利用他们所有的HTML、CSS和JavaScript知识，而且仍旧可以同iPhone的重要本地应用程序(如摄像头和通讯录)交互呢？就在那一年，PhoneGap获了奖并开始支持Android平台，对人数不断增长的移动开发人员变得越来越有用，这些人员需要在更多的平台上获得代码支持。大家可以到官方文档开始对PhoneGap的学习。结论在这篇文章中，我们讨论了一些HTML5的移动开发框架，HTML5标准正式发布之后，很多开发者对HTML5又重燃了希望，相信这是个美好的时代，相信它会给我们带来更多的惊喜。
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量11134点击量9353点击量8096点击量6379点击量5600点击量5537点击量5374点击量4930点击量4680
关注微信 每日推荐
扫一扫 浏览移动版
&2015 Chukong Technologies,Inc.
京公网安备89}