{"id":13564411,"url":"https://github.com/zhangxinxu/mobilebone","last_synced_at":"2025-05-15T11:03:26.101Z","repository":{"id":22238360,"uuid":"25571625","full_name":"zhangxinxu/mobilebone","owner":"zhangxinxu","description":"Single Page Switching bone(include page manage, events manage) for mobile web APP, Hybrid APP, Phonegap, PPT, Single-Screen PC page...","archived":false,"fork":false,"pushed_at":"2023-03-15T15:08:25.000Z","size":1599,"stargazers_count":1404,"open_issues_count":58,"forks_count":328,"subscribers_count":97,"default_branch":"master","last_synced_at":"2025-04-14T16:58:45.257Z","etag":null,"topics":["javascript-library","mobile-web","mobilebone"],"latest_commit_sha":null,"homepage":"http://www.zhangxinxu.com/wordpress/?p=4381","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhangxinxu.png","metadata":{"files":{"readme":"ReadMe.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2014-10-22T08:53:56.000Z","updated_at":"2025-04-11T06:32:02.000Z","dependencies_parsed_at":"2022-08-20T11:20:29.495Z","dependency_job_id":"9cfeda1b-5c36-4c05-8692-ef1389c7edcf","html_url":"https://github.com/zhangxinxu/mobilebone","commit_stats":{"total_commits":246,"total_committers":6,"mean_commits":41.0,"dds":0.1260162601626016,"last_synced_commit":"4d2869acd2881c4b30ad90ae2a0ba7fc763d4cc5"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangxinxu%2Fmobilebone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangxinxu%2Fmobilebone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangxinxu%2Fmobilebone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhangxinxu%2Fmobilebone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhangxinxu","download_url":"https://codeload.github.com/zhangxinxu/mobilebone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248923721,"owners_count":21183951,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript-library","mobile-web","mobilebone"],"created_at":"2024-08-01T13:01:30.931Z","updated_at":"2025-04-14T16:58:53.895Z","avatar_url":"https://github.com/zhangxinxu.png","language":"JavaScript","readme":"mobilebone.js\n=============\n\n\u003cimg src=\"https://www.zhangxinxu.com/GitHub/mobilebone/docs/assets/logo-128.png\"\u003e\n\n单页切换骨架。适用于移动Web APP, Hybrid混合APP, 单页H5或PC应用。官方网站：\u003ca href=\"http://www.mobilebone.org/\"\u003ehttp://www.mobilebone.org/\u003c/a\u003e\n\n\n设计理念\n------------------\nmobilebone本质上是一个纯UI表现层的JS插件，如果没有mobilebone.js，我们的项目依然是可以运作的，只是形式上是传统的页面跳转。明白这一点，就应该可以理解为何请求页面中的src地址的script不执行了。\n\n这种无侵入的设计理念使得mobilebone更像是一个外挂，一个精美的外衣，日后不喜欢了，直接拿掉就可以，完全不要担心前端变化太快项目跟不上怎么办。同时，保留了传统页面SEO友好等优点。\n\n教程和文档\n------------------\n\n狠狠地点击这里：\n\n* \u003ca href=\"https://www.zhangxinxu.com/GitHub/mobilebone/docs/guide/\" style=\"color: #cd0000;\"\u003e\u003cstrong\u003e详细使用教程\u003c/strong\u003e\u003c/a\u003e\n* \u003ca href=\"https://www.zhangxinxu.com/GitHub/mobilebone/docs/api/\" style=\"color: #cd0000;\"\u003e\u003cstrong\u003e中文API文档\u003c/strong\u003e\u003c/a\u003e\n\n\n实例、测试和文档\n------------------\n\n**近期项目GIF录屏**\n\n\u003cimg src=\"https://qidian.qpic.cn/qidian_common/349573/60b54a019ccce3709b04af2401caf4a4/0\" alt=\"\"\u003e \u003cimg src=\"https://qidian.qpic.cn/qidian_common/349573/f8b6198e5e35b53604be9de6f6a083f4/0\" alt=\"\"\u003e\n\n**真实线上项目案例**\n\nC端视频制作：https://activity.hongxiu.com/be-video/\n\n\u003cp\u003e\u003cimg src=\"https://imgservices-1252317822.image.myqcloud.com/image/20201012/f5e3bbcezz.png\"\u003e\u003c/p\u003e\n\n也可以手机扫描访问：\n\u003cp\u003e\u003cimg src=\"https://imgservices-1252317822.image.myqcloud.com/image/20201012/rrsqqyiu1w.png\" width=\"150\" height=\"150\" /\u003e\u003c/p\u003e\n\n采用Vue + Mobilebone实现。\n\n**其他案例**\n\n\u003cul\u003e\n\t\u003cli\u003e实例1-仿QQ界面：http://iancj.github.io/qq/\u003c/li\u003e\n\t\u003cli\u003e实例2-暴走漫画制作器：http://baozoumanhua.com/mobile_makers/\u003c/li\u003e\n\t\u003cli\u003e实例3-太湖金谷：http://wap.neeqsz.com\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cul\u003e\n\t\u003cli\u003e测试页面：\u003ca href=\"https://www.zhangxinxu.com/GitHub/mobilebone/test/\"\u003e./test/index.html\u003c/a\u003e\n\t\t\u003cp\u003e\u003cimg src=\"https://qidian.qpic.cn/qidian_common/349573/6b30e1a98239bdd169b16d9570151baf/0\" width=\"150\" height=\"150\"\u003e\u003c/p\u003e\n\t\u003c/li\u003e\n\u003c/ul\u003e\n\n为何需要？\n-------------\n类原生APP的过场体验，适用于这些场景：\u003cbr\u003e\n1. 跨移动平台开发，静态页面都是index.html, 单页面，因此，需要跟原生一样的过场体验。\u003cbr\u003e\n2. Hybrid app开发，原生APP内嵌web APP, 为了两者体验一致，不至于交互太唐突，也需要无刷新过场效果。\u003cbr\u003e\n3. 就算是纯粹的移动web APP, 使用无刷新模式也不失为一种不错的选型策略。\u003cbr\u003e\n4. 对兼容性没有要求的单页PC应用，如类PowerPoint web文档，单页翻屏web站点等。\n\n\n如何使用？\n---------------\n\n包引入：\n\n```js\nnpm install mobilebone\n```\n```html\n\u003c!-- 支持import引入 --\u003e\n\u003cscript\u003e\nimport Mobilebone from 'mobilebone'\n// 初始化\nMobilebone.init();\n\u003c/script\u003e\n\u003c!-- 例如在Vue中 --\u003e\n\u003cstyle src=\"mobilebone/dist/mobilebone.css\"\u003e\n```\n\n也支持直接链接相关的CSS以及JS, 如下：\n```html\n\u003clink rel=\"stylesheet\" href=\"./src/mobilebone.css\"\u003e\n```\n```html\n\u003cscript src=\"./src/mobilebone.js\"\u003e\u003c/script\u003e\n```\n\nHTML结构需要有一定的要求：\n\u003cpre\u003ebody\n  page\n  page\n  page\u003c/pre\u003e\n\n每个page是个满屏元素, 相当于一个独立的页面。\n\nMobilebone会自动捕获页面上的a元素，如果其href值存在猫腻，就会触发切换行为。例如：\n```html\n\u003ca href=\"#targetPage\"\u003e目标页面\u003c/a\u003e\n```\n\n当click此元素时候，页面会自动无刷新切换到\u003ccode\u003eid\u003c/code\u003e为\u003ccode\u003etargetPage\u003c/code\u003e的页面。\n\n也可以使用ajax请求。例如：\n```html\n\u003ca href=\"detail.php?id=112\"\u003e请求详情页\u003c/a\u003e\n```\n\n所有ajax请求默认是缓存的，如果你想根据url地址不缓存，可以设置\u003ccode\u003edata-reload\u003c/code\u003e或者\u003ccode\u003edata-reload=\"true\"\u003c/code\u003e；如果你想根据url根地址不缓存，需要设置\u003ccode\u003edata-reload=\"root\"\u003c/code\u003e。\n\n你可以控制切换的方向，任意扩展动画类型，可以被seajs, requiejs模块化加载(\u003ccode\u003erequire('mobilebone')\u003c/code\u003e)，可以和Backbone组合使用等。\n\n当然，上面介绍的，只是强大功能的冰山一角，更多信息请[参考这里](https://www.zhangxinxu.com/wordpress/?p=4381).\n\n插件\n----------------\n\u003col\u003e\n\t\u003cli\u003e\u003cstrong\u003emobilebone.ppt.js\u003c/strong\u003e: 可以让web页面表现如幻灯片演示，尺寸自适应。 \u003ca href=\"https://www.zhangxinxu.com/GitHub/mobilebone/plugins/ppt/index.html\"\u003edemo点击这里\u003c/a\u003e。\u003c/li\u003e\n\u003c/ol\u003e\n\n优势？\n------------------\nmobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后4~5K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。同时，巧妙提供各类缓存管理、事件管理的接口，就像是个完整健全的骨架体系，就等你来加血添肉了！\u003cimg src=\"https://mat1.gtimg.com/www/mb/images/face/4.gif\" align=\"absmiddle\"\u003e\n\n许可\n-------------------\nMIT许可\n\nmobilebone.js\n=============\nSingle Page Switching bone for mobile web APP, Hybrid APP, Phonegap, ...\n\n\u003cpre\u003egit clone git://github.com/zhangxinxu/mobilebone.git\u003c/pre\u003e\n\nuse \u003ccode\u003enpm\u003c/code\u003e:\n\u003cpre\u003enpm install mobilebone\u003c/pre\u003e\n\nDocuments\n------------------\n\n\u003cul\u003e\n\t\u003cli\u003eGuide documents: \u003ca href=\"https://www.zhangxinxu.com/GitHub/mobilebone/docs/guide/\"\u003edocs/guide/\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003eAPI documents: \u003ca href=\"https://www.zhangxinxu.com/GitHub/mobilebone/docs/api/\"\u003edocs/api/\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\nExamples and Tests\n------------------\n\u003col\u003e\n\t\u003cli\u003eExample1: http://iancj.github.io/qq/\u003c/li\u003e\n\t\u003cli\u003eExample2: http://baozoumanhua.com/mobile_makers/\u003c/li\u003e\n\t\u003cli\u003eExample3: http://wap.neeqsz.com\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cul\u003e\n\t\u003cli\u003eTest page: \u003ca href=\"https://www.zhangxinxu.com/GitHub/mobilebone/develop/test/index.html\"\u003etest/index.html\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\nWhy need this?\n-----------------\nInteraction experience is good enough to compare with the native APP. \u003cbr\u003e\n1. Phonegap that to native APP is a single index.html, We need the same switch effects as native.\u003cbr\u003e\n2. Hybrid app, as you know, mixed web-app and native-app. So, it' better that they have some switching experience.\u003cbr\u003e\n3. Even no refresh interaction is not something bad for mobile APP.\n\nHow to use?\n----------------\nJust include mobilebone.css and mobilebone.js, as follow:\n\u003cpre\u003e\u0026lt;link rel=\"stylesheet\" href=\"mobilebone.css\"\u003e\u003c/pre\u003e\n\u003cpre\u003e\u0026lt;script src=\"mobilebone.js\"\u003e\u0026lt;/script\u003e\u003c/pre\u003e\n\nAnd, you should use specific HTML structure.\n\u003cpre\u003ebody\n  page\n  page\n  page\u003c/pre\u003e\n\nThen Mobilebone will catch your attribute of href of 'a' element, and do switch. For example:\n\u003cpre\u003e\u0026lt;a href=\"#targetPage\"\u003etarget page\u0026lt;/a\u003e\u003c/pre\u003e\n\nThe interface will switch to page whitch's value of \u003ccode\u003eid\u003c/code\u003e is \u003ccode\u003etargetPage\u003c/code\u003e when you tap this link.\n\nOf course, you can control the direction of switching, or use a ajax get, or as a modular loaded by seajs, requirejs using \u003ccode\u003erequire('mobilebone')\u003c/code\u003e...\n\nFor more detail, you can [visit here](http://www.zhangxinxu.com/wordpress/?p=4381).\n\nPlugins\n----------------\n\u003col\u003e\n\t\u003cli\u003e\u003cstrong\u003emobilebone.ppt.js\u003c/strong\u003e: make web page to powerpoint presentation. \u003ca href=\"https://www.zhangxinxu.com/GitHub/mobilebone/plugins/ppt/index.html\"\u003edemo here\u003c/a\u003e.\u003c/li\u003e\n\u003c/ol\u003e\n\nAdvantage?\n--------------\nwhat 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.\n\nLicense\n-------------------\nThe MIT License\n\n\n\n\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhangxinxu%2Fmobilebone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhangxinxu%2Fmobilebone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhangxinxu%2Fmobilebone/lists"}