Framework7 框架简介
什么是 Framework7
Framework7 是一款免费开源的移动web开发框架(类似的知名框架有Jquery Mobile,sencha),用以开发IOS7风格、体验的混合移动应用和web应用。如果你需要,它还是一款绝好的移动应用原型框架,用以展示应用的功能细节。
Framework7框架的主要目的是使得开发者能够简单、快速的使用HTML,Javascript,CSS开发IOS风格的webapp和混合本地应用。
Framework7并不兼容所有平台,只专注于带给用户最好的IOS7体验。
如果你想开发类似于IOS7本地应用风格和体验的webapp或者web和本地混应用(使用PhoneGap),那么Framework7绝对适合你。
原文链接 http://www.idangero.us/framework7/
GitHub: https://github.com/nolimits4web/Framework7
Framework7的特点
易用,和编写网站一样简单
使用Framework7创建IOS7 app就跟创建普通网站一样简单,你所要做的仅仅是在HTML里引用Framewok7的JS和CSS,
F7并没有使用特有的标签,也不要求你把内容放在JSON里,只需要在F7的框架布局里加上普通的HTML标签。
IOS7特色
Framework7是为了IOS7特色而生的框架,从一开始框架作者就慎重考虑,能以简单的方法使用实现所有IOS7功能,包括基本UI组件,复杂页面动画以及触摸互动。
UI组件
Framework7包含了一套能立即使用的UI元素和组件,如 对话框,弹出页,动作页,悬浮页,列表组件,多媒体列表组件,tabs组件,滑动面板,布局风格,活动提示组件等。最棒的地方是大部分组件你不需要写一行JS代码就可以直接使用。
不依赖第三方库
Framework7不使用也不依赖任何第三方库,这使得F7变得轻量级,高效而且高可扩展。
简洁的JS API
使用Framework7,你不需要学习任何新知识,F7提供简单易用的API 方法来操作应用的每一部分。例如,如果你要弹出一个对话框,只需调用 app.alert('hello,world')就可以了。
高性能的动画
Framework7框架只使用有硬件加速的css animations 和transitions 以达到最好的效果。
页面动画
Framework7的目标之一是拥有IOS7本地应用一样的外观和体验,并且F7是目前唯一个做到这点框架并且提供流畅的视差效果1:1页面动画,在加载页面时会改变透明度和阴影。
回刷效果
Framework7的杀手锏之一就是支持IOS7知名的回刷返回上一页的功能(swipe back)。从页面的左边区域用手指滑动(或用鼠标拖拽),能够发现平滑的过渡到上一页。这不是简单的A-B transition,当你滑动时视觉动画会跟随着你的手指变化。
动态导航栏
Framework7做了所有工作来打造本地IOS7 应用一样的体验,这其中非常重要的一个功能就是动态导航栏。在图中你可以看到当你滑动时,导航栏上的元素也在页面转换中滑动并且逐渐消失。
本地滚动
听起来有些奇怪但是Framework7只使用本地提供的滚动机制,你不需要处理任何滚动相关的事件就能使用超赞的滚动效果。
下拉刷新
Framework7可能是第一个也是唯一个在纯本地滚动基础上实现了这一超棒的功能。这也使得这一功能甚至可以比拟IOS7本地应用。
滑动删除
还记得当你想删除邮箱里的某一邮件时你是如何操作的?没错,向左滑动选择删除,framework7为列表元素提供相同的功能,并且拥有一样的流畅动画和触摸操作。
消息组件
Framework7为你提供了超赞的消息组件,配合一些实时数据同步服务,如GoInstant ,你可以很简单的自定义该组件并整合到你的消息处理应用中。
多视图(分割视图)
Framework7支持任意多的独立视图布局,更有趣的是通过data-view属性,你不需要一行javascript代码就能控制每一个视图。
XHR+缓存+History+预加载
这一超级组合使得app页面间的路由变得近乎完美。Framework7 使用Ajax加载各个页面,并且使用缓存技术使得各个页面间切换更快。F7在每个缓存期间内(默认是10分钟)只会通过Ajax加载某个页面一次,其他时间都是从缓存中取得页面。
当页面导航得越来越深的时候,你将页面如何按同样的顺序返回的问题。Framework7通过收集导航历史解决这个问题。如果你的用户从不同路径到达同一页面时,这将变得非常重要。在F7框架里,你只需要给链接加上 "back"类名,F7会自动识别出要返回到哪一个页面并把剩下的所有工作完成了。
Framework7会自动预加载上个页面(如果页面存在的话),这就保证了回滑返回时能立即得到上一个页面。
私人定制
Framework7的样式文件都按功能分别写在单独的.less文件里,这样你可以很容易的为自己应用定义独特的样式。
定制的DOM库
上面已经提到过,framework7不使用任何第三方库,即使是DOM操作库,即使是jquery。F7拥有自己的DOM库,使用了一些高性能的DOM操作方法。你也可以使用这些API,并且不需要学习任何新的东西,因为这与jquery的语法和风格基本一致,包括函数链操作。
Framework7 框架简介相关推荐
- 【Spring】框架简介
[Spring]框架简介 Spring是什么 Spring是分层的Java SE/EE应用full-stack轻量级开源框架,以IOC(Inverse Of Control:反转控制)和AOP(Asp ...
- 《HiWind企业快速开发框架实战》(0)目录及框架简介
<HiWind企业快速开发框架实战>(0)目录及框架简介 本系列主要介绍一款企业管理系统快速开发框架,该框架旨在快速完成企业管理系统,并实现易维护可移植的目标. 使用逐个系统模块进行编码的 ...
- WPF Interaction框架简介(一)——Behavior
原文:WPF Interaction框架简介(一)--Behavior 在WPF 4.0中,引入了一个比较实用的库--Interactions,这个库主要是通过附加属性来对UI控件注入一些新的功能,除 ...
- go语言学习(二)——Gin 框架简介
GoWeb开发有很多框架,如Beego.Gin.Revel.Echo.IRis等,学习框架可以快速做开发,对比常见goweb框架,通过其github的活跃度,维护的team,生产环境中的使用率以及师兄 ...
- Java开源——常见J2EE框架简介
Java开源--常见J2EE框架简介 Spring Framework Spring是一个解决了许多在J2EE开发中常见的问题的强大框架. Spring提供了管理业务对象的一致方法并且鼓励了注入对接口 ...
- 【EventBus】EventBus 事件总线框架简介 ( EventBus 使用流程 )
文章目录 一.EventBus 事件总线框架简介 二.EventBus 使用流程 一.EventBus 事件总线框架简介 Android 中的事件传递机制 : 使用 Intent 在组件间传递信息 ; ...
- 【Android 热修复】热修复原理 ( 热修复框架简介 | 将 Java 字节码文件打包到 Dex 文件 )
文章目录 一. 热修复框架简介 1.类替换 2.so 替换 3.资源替换 4.全平台支持 5.生效时间 6.性能损耗 7.总结 二. 将 Java 字节码文件打包到 Dex 文件 一. 热修复框架简介 ...
- PHP微信开发框架LaneWeChat框架简介
框架名称:LaneWeChat 微信PHP开发框架 框架版本:1.4 框架简介:这是一个为快速开发微信应用而生的PHP框架.将微信的开发者功能根据文档进行了封装.为了快速开发的目的,开发者完全不需要要 ...
- Spring框架简介
Spring框架简介 Spring Framework 是一个开源的Java/Java EE全功能栈(full-stack)的应用程序框架,以Apache许可证形式发布,也有.NET平台上的移植版本. ...
最新文章
- MySQL存储过程总结(二)
- 【Python】双十一,就用turtle画个单身狗送给自己
- 基于netty的websocket协议实现
- Window下UDP(socket)接和收数据案例
- javascript-操作符
- 计算年龄案例(JS)
- Microsoft SQL Server 2008 Management Studio Express 下载地址
- css的list,CSS List 入门教程
- jdk1.8,java8,安装包阿里云-百度云下载(windos,mac,linux)
- 谷歌浏览器发送POST请求(测试Post接口)
- 网页右下角弹出的图片无法显示
- 游戏测试用例及游戏测试bug详解
- 苹果手机温度测试软件,苹果手机测温神器上线啦!
- 1到10加法创新图片-走迷宫_“小火锅+关东煮”,呷哺呷哺又创新模式!客单提到110元!...
- 一键adb连接网易Mumu模拟器
- idea一直indexing.........
- 系统设定工具(网络、打印机)与硬件侦测
- 数据库开发转行大数据开发工程师怎么样?
- 2021 马克拉伯大视觉奖:探索、创造机器视觉的价值
- vue学习实现待办事项功能
热门文章
- mybatis的SQL语句构建器
- 黑科技悄然改变你的生活?!看看京东的绿色物流的研发加速度
- 五子棋简单AI算法(C#版)
- 解决R语言PCA主成分分析的cor()函数错误:Error in cor() : ‘x‘必需为数值
- 耀眼的天才——Aaron Swartz提高效率的秘诀
- 2019/12/15周末日志
- 用python itchat包 爬取微信好友头像形成矩形头像集
- paddle mnist
- 态度决定命运,将自己的梦想抛向天空,你就能飞翔
- WINFORM应用SSK皮肤