单页切换骨架 mobilebone.js

码农软件 · 软件分类 · 手机Web开发框架 · 2019-05-03 06:29:05

软件介绍

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

为何需要?

类原生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此元素时候,页面会自动无刷新切换到idtargetPage的页面。

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

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

所有ajax请求默认是缓存的,如果你想根据url地址不缓存,可以设置data-reload或者data-reload="true";如果你想根据url根地址不缓存,需要设置data-reload="root"

你可以控制切换的方向,任意扩展动画类型,可以被seajs, requiejs模块化加载(require('mobilebone')),可以和Backbone组合使用等。

当然,上面介绍的,只是强大功能的冰山一角,更多信息请参考这里.

插件

  1. mobilebone.ppt.js: 可以让web页面表现如幻灯片演示,尺寸自适应。 demo点击这里

优势?

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

本文地址:https://codercto.com/soft/d/4902.html

失控的真相

失控的真相

[美] 迈克尔·帕特里克·林奇 / 赵亚男 / 中信出版社 / 2017-6 / 42.00元

编辑推荐 在信息泛滥的时代,知识变得无处不在。鼠标轻轻一点,我们就坐拥一座巨型图书馆。然而,我们并没有因此就离真相更近。相反,互联网的普及使人们早已习惯于凡事问搜索引擎,并形成了一种“搜索即相信”的认知模式。当社交网络把数字人类带入一个个彼此隔绝的线上群体中,我们清楚地看到,真相与谎言在互联网中交织,知识与观念混为一谈,情绪宣泄掩盖了事实分析。联网的世界让我们更容易看到彼此的观点,但同时也制......一起来看看 《失控的真相》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试