Skip to content

Single Page Switching bone(include page manage, events manage) for mobile web APP, Hybrid APP, Phonegap, PPT, Single-Screen PC page...

License

Notifications You must be signed in to change notification settings

zhangxinxu/mobilebone

Repository files navigation

mobilebone.js

单页切换骨架。适用于移动Web APP, Hybrid混合APP, 单页H5或PC应用。官方网站:http://www.mobilebone.org/

设计理念

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

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

教程和文档

狠狠地点击这里:

实例、测试和文档

近期项目GIF录屏

真实线上项目案例

C端视频制作:https://activity.hongxiu.com/be-video/

也可以手机扫描访问:

采用Vue + Mobilebone实现。

其他案例

为何需要?

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

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

如何使用?

包引入:

npm install mobilebone
<!-- 支持import引入 -->
<script>
import Mobilebone from 'mobilebone'
// 初始化
Mobilebone.init();
</script>
<!-- 例如在Vue中 -->
<style src="mobilebone/dist/mobilebone.css">

也支持直接链接相关的CSS以及JS, 如下:

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

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

body
  page
  page
  page

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

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

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

当click此元素时候,页面会自动无刷新切换到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的限制,适用于各个项目各个场景。同时,巧妙提供各类缓存管理、事件管理的接口,就像是个完整健全的骨架体系,就等你来加血添肉了!

许可

MIT许可

mobilebone.js

Single Page Switching bone for mobile web APP, Hybrid APP, Phonegap, ...

git clone git://github.com/zhangxinxu/mobilebone.git

use npm:

npm install mobilebone

Documents

Examples and Tests

  1. Example1: http://iancj.github.io/qq/
  2. Example2: http://baozoumanhua.com/mobile_makers/
  3. Example3: http://wap.neeqsz.com

Why need this?

Interaction experience is good enough to compare with the native APP.

  1. Phonegap that to native APP is a single index.html, We need the same switch effects as native.
  2. Hybrid app, as you know, mixed web-app and native-app. So, it' better that they have some switching experience.
  3. Even no refresh interaction is not something bad for mobile APP.

How to use?

Just include mobilebone.css and mobilebone.js, as follow:

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

And, you should use specific HTML structure.

body
  page
  page
  page

Then Mobilebone will catch your attribute of href of 'a' element, and do switch. For example:

<a href="#targetPage">target page</a>

The interface will switch to page whitch's value of id is targetPage when you tap this link.

Of course, you can control the direction of switching, or use a ajax get, or as a modular loaded by seajs, requirejs using require('mobilebone')...

For more detail, you can visit here.

Plugins

  1. mobilebone.ppt.js: make web page to powerpoint presentation. demo here.

Advantage?

what mobilebone.js do just one thing - switching. So, it's small, flexible, and no any UI restriction. In a word, it's fit for variety of designs and scenes.

License

The MIT License

About

Single Page Switching bone(include page manage, events manage) for mobile web APP, Hybrid APP, Phonegap, PPT, Single-Screen PC page...

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •