Single Page Switching bone for mobile web APP, Hybird APP, Phonegap, ...
git clone git://github.com/zhangxinxu/mobilebone.git
use npm:
npm install mobilebone
- Example1: http://iancj.github.io/qq/
- Example2: http://baozoumanhua.com/mobile_makers/
- Test page: test/index.html
- Documents: docs/index.html
Interaction experience is good enough to compare with the native APP.
- Phonegap that to native APP is a single index.html, We need the same switch effects as native.
- Hybird app, as you know, mixed web-app and native-app. So, it' better that they have some switching experience.
- Even no refresh interaction is not something bad for mobile APP.
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.
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.
The MIT License
单页切换骨架。适用于移动web APP, Hybird混合APP, Phonegap开发等。
- 实例1-仿QQ界面：http://iancj.github.io/qq/
- 实例2-暴走漫画制作器：http://baozoumanhua.com/mobile_makers/
- 测试页面：test/index.html
- 中文文档：docs/index.html
类原生APP的过场体验，适用于这些场景：
- Phonegap等类似跨移动开发平台，其静态页面都是index.html, 单页面，因此，需要跟原生一样的过场体验。
- Hybird app开发，原生APP内嵌web APP, 为了两者体验一致，不至于交互太唐突，也需要无刷新过场效果。
- 就算是纯粹的移动web APP, 使用无刷新模式也不失为一种不错的选型策略。
引入相关的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">target page</a>
当tap此元素时候，页面会自动无刷新切换到id为targetPage的页面。你可以控制切换的方向，或者使用Ajax获取HTML或JSON, 可以被seajs, requiejs模块化加载(require('mobilebone'))，可以和Backbone组合使用等。
更多信息请参考这里.
mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3~4K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。
MIT许可
