jQuery Mobile

jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化设计风格。jQuery Mobile1.4.0主要侧重于性能和控件方面的改进。除了全新的默认主题和SVG图标,还新增了开关控件、通用过滤器、箭头弹出框、滑动提示框等一系列功能,更是集成了jQuery UI的Tab部件。jQuery Mobile继承了jQuery的优势,并且提供了丰富的适合手机应用的UI组件。jQuery Mobile还有很多的第三方扩展。

1.1 jQuery mobile flat-ui 主题

https://github.com/ququplay/jquery-mobile-flat-ui-theme

  

1.2jQuery mobile Bootstrap 主题

https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme

Frozen UI

Frozen UI是腾讯ISUX团队(社交用户体验设计团队)根据最新的手机QQ设计规范制作的移动端Web框架,包括CSS基础样式和组件、JavaScript基础组件和一些动画效果库。为了方便记忆和增添趣味性,腾讯ISUX团队为它取了动画片《冰雪奇缘》的英文名,并把Elsa女王作为该项目的卡通代言人。

项目主页:http://frozenui.github.io

Github代码托管地址:https://github.com/frozenui/frozenui

ionic

Ionic提供了一个免费且开源的移动优化HTML,CSS和JS组件库,来构建高交互性应用。基于Sass构建和AngularJS 优化。

Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果,尽管通常组件不需要编码,通过框架扩展可以很容易地使用,比如我们的AngularIonic扩展。

Ionic遵循视图控制模式,通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。一个很好的例子就是标签栏(Tab Bar)视图控制器处理点击标签栏在一系列可视化面板间切换。 github

Amaze UI

Amaze UI 采用业内先进的 Mobile first 理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件,更有 17 款包含近 60 个主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅度提升你的开发效率。Amaze UI 非常注重性能,基于轻量的 Zepto.js 开发,并使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让你的 Web 应用可以高速载入。

 
 
 

CardKit

CardKit 是来自豆瓣的一个移动 UI 框架,使用 Card\Unit\Component 概念快速构建移动 Web 应用。应用外观跟原生应用无异。

 
 
 
 

App.js

App.js 是一个轻量级的 JavaScript UI 库,用来创建移动的 Web 应用,应用的外观跟原生的应用相同,性能也近乎一致。

特点:

跨平台,支持 Android 2.2+ 和 iOS 4.3+

Widgets 和自定义主题

页面调整管理

 
 
 

Mobile Angular UI

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。

Mobile Angular UI的关键字有:

  1. Bootstrap 3

  2. AngularJS

  3. Bootstrap 3 Mobile组件,比如switches, overlays和sidebars,这些都是bootstrap中没有的。

  4. AngularJS modules, 比如 angular-route, angular-touch 和 angular-animate

响应式媒体查询是将bootstrap作为单独的文件,你只需要包含你所需要的东西。Mobile Angular UIu并不包含任何jQuery依赖,你需要做的只是通过一些AngularJS指令创建友好的用户体验。

详细了解可以看一看 the Mobile Angular UI demo page,上面有Mobile Angular UI的实践,如果你想了解的更深入一些,我建议你读一读 getting started with Mobile Angular UI

Kendo UI

Telerik’s Kendo UI 是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。

Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件。

Framework7

Framework7 - 是一款开源免费的移动端 HTML 框架, 用于开发接近原生iOS或Android系统外观和体验的 hybrid mobile apps 或 web apps。当然你也可以把它当成一款快速制作高保真APP原型的工具。

Framework7 的主要目标是让你能够轻松地使用 HTML, CSS and JavaScript 开发iOS 或 Android 应用。Framework7 是非常灵活的。 它并不会限制你的想象力或者强制搭配某些架构方案。 Framework7 给你最大程度的自由。

Framework7 并不打算兼容所有平台。 它主要专注 iOS 和 Google Material design 以带来最好的用户体验并保持简单。

介绍几个移动web app开发框架的更多相关文章

  1. 咏南WEB APP开发框架

    咏南WEB APP开发框架 咏南WEB桌面框架演示:47.106.93.126:9999 咏南WEB手机框架本地:47.106.93.126:8077 咏南CS框架下载:https://pan.bai ...

  2. 几个移动web app开发框架

    几个移动web app开发框架 一.总结 1.有amaze ui,有app.js(登录注册界面用到的)  二.几个移动web app开发框架 jQuery Mobile jQuery Mobile框架 ...

  3. 移动web app开发框架

    文章地址:http://www.cnblogs.com/soulaz/p/5586787.html jQuery Mobile jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mo ...

  4. 移动开发 Native APP、Hybrid APP和Web APP介绍

    高速区分定义: Native App 以基于智能手机本地操作系统如IOS.Android.WP并使用原生程式(SDK)编写执行的须要用户安装使用的第三方应用程序; Web APP 以HTML+JS+C ...

  5. Web App, Native APP,Hybird App 介绍

    一.Web App 这个主要是采用统一的标准的 HTML,JavaScript.CSS 等 web 技术开发. 用户无需下载,通过不同平台 的浏览器访问来实现跨平台, 同时可以通过浏览器支持充分使用 ...

  6. PWA(Progressive Web App)入门系列:(一)PWA简单介绍

    前言 PWA做为一门Google推出的WEB端的新技术,长处不言而喻.但眼下对于相关方面的知识不是非常丰富.这里我推出一下这方面的新手教程系列.提供PWA方面学习. 什么是PWA PWA全称Progr ...

  7. [译]介绍一下渐进式 Web App(即时加载) - Part 2

    在上一篇,介绍一下渐进式 Web App(离线) - Part 1的文章中,我们讨论了典型的pwa应该是什么样子的并且同时也介绍了 server worker.到目前为止,我们已经缓存了应用壳.在 i ...

  8. 移动APP开发框架盘点2:Web移动前端框架大全

    前言 自上次发布了<移动APP开发框架盘点>后,时间已经过去了三年, 为什么突然又写一篇续集呢?是因为有一个非常有意思的发现. 开源项目其实有一个成熟周期,这个周期大概是三年左右,自Rea ...

  9. KoaHub.js是基于 Koa.js 平台的 Node.js web 快速开发框架

    koahubjs KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, A ...

随机推荐

  1. java中paint repaint update 之间的关系

    最近总结了一下java中的paint,repaint和updata三者之间的关系,首先咱们都知道用paint方法来绘图,用repaint重绘,用update来写双缓冲.但是他们之间是怎么来调用的呢,咱 ...

  2. AvalonEdit 移除自身ScrollViewer (可配合外部自定义ScrollViewer 使用)

    http://community.sharpdevelop.net/forums/p/11977/42764.aspx#42764 1: <Style TargetType="{x:T ...

  3. servletContext百科

    servletContext 编辑   servletContext接口是Servlet中最大的一个接口,呈现了web应用的Servlet视图.ServletContext实例是通过 getServl ...

  4. 手游架构-REST架构

    REST架构风格是全新的针对Web应用的开发风格,是当今世界最成功的互联网超媒体分布式系统架构,它使得人们真正理解了Http协议本来面貌.随着 REST架构成为主流技术,一种全新的互联网网络应用开发的 ...

  5. ASIHTTPRequest使用指南---<<翻译稿>>

    ASIHTTPRequest使用指南---<<翻译稿>> 当第一次使用ASIHTTPRequest进行http请求时,会出现非常多的bug提示.查了一些资料,发现在少倒入了几个 ...

  6. XMPP通讯开发-好友获取界面设计

    在XMPP通讯开发-服务器连接 中我们成功连接到服务器上面,然后进入到主界面,接下来就是获取好友列表,这里我们分段开发,首先就是界面的设计,这里仿照QQ好友界面,里面的数据先是用模拟的,下一章获取服务 ...

  7. [Javascript] Array methods in depth - some

    some returns a boolean value after passing each item in the source array through the test function t ...

  8. OD: Shellcode / Exploit & DLL Trampolining

    看到第五章了. 标题中 Dll Tramplining(跳板)名字是从如下地址找到的,写的很好: http://en.wikipedia.org/wiki/Buffer_overflow#The_ju ...

  9. Head First HTML与CSS — 布局与定位

    1.流(flow)是浏览器在页面上摆放HTML元素所用的方法. 对于块元素,浏览器从上到下沿着元素流逐个显示所遇到的各个元素,会在每个块元素之间加一个换行: 对于内联元素,在水平方向会相互挨着,总体上 ...

  10. Jquery 使用JSOPN实例

    1.说明 dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的jsonp ...