fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

mobilebone.js
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://www.mobilebone.org
GitHub:https://github.com/zhangxinxu/mobilebone
网站描述:单页切换骨架

mobilebone.js单页切换骨架。适用于移动web APP, Hybrid混合APP, Phonegap开发, 无兼容要求单页PC应用等。  


mobilebone.js设计理念

mobilebone设计理念是一个纯UI表现层的JS应用,如果没有mobilebone.js,我们的项目依然是可以运作的,只是形式上是传统的页面跳转。明白这一点,就应该可以理解为何请求页面中的src地址的script不执行了。

这种无侵入的设计理念使得mobilebone更像是一个外挂,一个精美的外衣,日后不喜欢了,直接拿掉就可以,完全不要担心前端变化太快项目跟不上怎么办。同时,保留了传统页面seo友好等优点。


为何需要?

类原生APP的过场体验,适用于这些场景:

  1. Phonegap等类似跨移动开发平台,其静态页面都是index.html, 单页面,因此,需要跟原生一样的过场体验。
  2. Hybrid app开发,原生APP内嵌web APP, 为了两者体验一致,不至于交互太唐突,也需要无刷新过场效果。
  3. 就算是纯粹的移动web APP, 使用无刷新模式也不失为一种不错的选型策略。
  4. 对兼容性没有要求的单页PC应用,如类PowerPoint web文档,单页翻屏web站点等。


如何使用?

引入相关的css以及JS, 如下:

<link rel="stylesheet" href="mobilebone.css">
<script src="mobilebone.js"></script>

HTML结构需要有一定的要求:

body
  page
  page
  page

每个page是个满屏元素, 相当于一个独立的页面。

Mobilebone会自动捕获页面上的a元素,如果其href值存在猫腻,就会触发切换行为。例如:

<a href="#targetPage">目标页面</a>

当click/tap此元素时候,页面会自动无刷新切换到id为targetPage的页面。

也可以使用ajax请求。例如:

<a href="detail.php?id=112">请求详情页</a>

所有ajax请求默认是缓存的,如果你想根据url地址不缓存,可以设置data-reload或者data-reload="true";如果你想根据url根地址不缓存,需要设置data-reload="root"。 你可以控制切换的方向,任意扩展动画类型,可以被seajs, requiejs模块化加载(require('mobilebone')),可以和Backbone组合使用等。


优势?

mobilebone.js只做了一件事情,切换。所以,JS文件很小,gzip后4~5K, 而且很灵活,几乎没有任何UI的限制,适用于各个项目各个场景。同时,巧妙提供各类缓存管理、事件管理的接口,就像是个完整健全的骨架体系,就等你来加血添肉了!


链接: https://fly63.com/nav/1414

more>>
相关栏目
uni-app
使用 Vue.js开发跨平台应用的前端框架
官网GitHub
Flutter
谷歌推出的跨平台移动UI框架
官网GitHub
framework7
用于开发接近原生iOS或Android系统外观和体验的 hybrid mobile apps 或 web apps
官网GitHub
ionic
ionic是一个用来开发混合手机应用的,开源的,免费的代码库
官网GitHub
weex
阿里推出的Native框架,支持iOS、安卓、YunOS及Web等多端部署
官网GitHub
Taro
多端统一开发框架,生成能运行在微信小程序、H5、React Native 等的应用
官网GitHub
React Belle
一个React组件库
官网GitHub
noUiSlider
一个轻量级的Js范围滑块库
官网GitHub
mavonEditor
基于vue的markdown编辑器
点击进入GitHub
fair ui
为Flutter设计的动态化框架
官网GitHub
react-native-ui-lib
React Native的UI组件库和工具集
官网GitHub
react-native-sideswipe
简单跨平台的React Native可滑动的组件
点击进入GitHub
weui+
在weui和zepto基础上开发的增强UI组件
官网GitHub
weui
微信官方设计团队为微信内网页和微信小程序量身设计的的基础样式库
官网GitHub
ThorUI
轻量、简洁的移动端组件库
官网GitHub
MUI
最接近原生APP体验的高性能前端框架
官网GitHub

手机预览