Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ReadMe.md

mobilebone.js

单页切换骨架。适用于移动web APP, Hybrid混合APP, Phonegap开发, 单页PC应用等。官方网站:http://www.mobilebone.org/

设计理念

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

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

文档

狠狠地点击这里:中文文档

实例、测试和文档

近期项目GIF录屏

其他案例

为何需要?

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

  1. 跨移动平台开发,静态页面都是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的限制,适用于各个项目各个场景。同时,巧妙提供各类缓存管理、事件管理的接口,就像是个完整健全的骨架体系,就等你来加血添肉了!

许可

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

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.