单页切きり换骨架か。适用于移动Web APP, Hybrid混合こんごうAPP, 单页H5或あるPC应用。官かん方かた网站：http://www.mobilebone.org/

mobilebone本ほん质上是ぜ一いち个纯UI表おもて现层的てきJS插件，如果没ぼつ有ゆうmobilebone.js，我わが们的项目依然いぜん是ぜ可か以运作さく的てき，只ただ是ぜ形式けいしき上じょう是ぜ传统的てき页面跳とべ转。明白めいはく这一いち点てん，就应该可以理解りかい为何请求页面中ちゅう的てきsrc地ち址し的てきscript不ふ执行了りょう。

这种无侵入しんにゅう的てき设计理念りねん使し得とくmobilebone更さら像ぞう是ぜ一いち个外挂，一个精美的外衣，日にち后きさき不ふ喜き欢了，直接ちょくせつ拿掉就可以，完全かんぜん不要ふよう担心前ぜん端はし变化太ふと快かい项目跟不上じょう怎么办。同どう时，保留ほりゅう了りょう传统页面SEO友好ゆうこう等とう优点。

狠狠地点ちてん击这里さと：

• 详细使用しよう教程きょうてい
• 中ちゅう文ぶんAPI文ぶん档

近きん期き项目GIF录屏

真ま实线上じょう项目案あん例れい

C端はし视频制作せいさく：https://activity.hongxiu.com/be-video/

也可以手机つくえ扫描访问：

采さい用ようVue + Mobilebone实现。

其他案あん例れい

• 实例1-仿QQ界面かいめん：http://iancj.github.io/qq/
• 实例2-暴走ぼうそう漫画まんが制作せいさく器き：http://baozoumanhua.com/mobile_makers/
• 实例3-太たい湖こ金谷かなや：http://wap.neeqsz.com

• 测试页面：./test/index.html

  

类原生せい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此元素げんそ时候，页面会かい自じ动无刷新さっしん切きり换到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组合使用しよう等とう。

当然とうぜん，上面うわつら介かい绍的，只ただ是ぜ强きょう大功たいこう能のう的てき冰山一角いっかく，更さら多た信しん息いき请参考さんこう这里.

1. mobilebone.ppt.js: 可か以让web页面表ひょう现如幻灯げんとう片へん演えんじ示しめせ，尺寸しゃくすん自じ适应。 demo点てん击这里さと。

mobilebone.js只ただ做了一いち件けん事情じじょう，切きり换。所以ゆえん，JS文ぶん件けん很小，gzip后きさき4~5K, 而且很灵活かつ，几乎没ぼつ有ゆう任にん何なんUI的てき限きり制せい，适用于各个项目め各かく个场景けい。同どう时，巧妙こうみょう提供ていきょう各かく类缓存そん管理かんり、事件じけん管理かんり的てき接せっ口こう，就像是ぜ个完整せい健全けんぜん的てき骨ほね架か体系たいけい，就等你来加か血ち添肉了りょう！

MIT许可

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

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

use npm:

npm install mobilebone

• Guide documents: docs/guide/
• API documents: docs/api/

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

• Test page: test/index.html

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.

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.

1. mobilebone.ppt.js: make web page to powerpoint presentation. demo 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