11mobilebone.js
22=============
3- 单页切换骨架。适用于移动web APP, Hybrid混合APP, Phonegap开发, 单页PC应用等 。官方网站:<a href =" http://www.mobilebone.org/ " >http://www.mobilebone.org/ </a >
3+ 单页切换骨架。适用于移动Web APP, Hybrid混合APP, 单页H5或PC应用 。官方网站:<a href =" http://www.mobilebone.org/ " >http://www.mobilebone.org/ </a >
44
55
66设计理念
77------------------
8- mobilebone设计理念是一个纯UI表现层的JS应用 ,如果没有mobilebone.js,我们的项目依然是可以运作的,只是形式上是传统的页面跳转。明白这一点,就应该可以理解为何请求页面中的src地址的script不执行了。
8+ mobilebone本质上是一个纯UI表现层的JS插件 ,如果没有mobilebone.js,我们的项目依然是可以运作的,只是形式上是传统的页面跳转。明白这一点,就应该可以理解为何请求页面中的src地址的script不执行了。
99
1010这种无侵入的设计理念使得mobilebone更像是一个外挂,一个精美的外衣,日后不喜欢了,直接拿掉就可以,完全不要担心前端变化太快项目跟不上怎么办。同时,保留了传统页面SEO友好等优点。
1111
@@ -20,9 +20,7 @@ mobilebone设计理念是一个纯UI表现层的JS应用,如果没有mobilebon
2020
2121** 近期项目GIF录屏**
2222
23- <img src =" https://qidian.qpic.cn/qidian_common/349573/60b54a019ccce3709b04af2401caf4a4/0 " alt =" " >
24-
25- <img src =" https://qidian.qpic.cn/qidian_common/349573/f8b6198e5e35b53604be9de6f6a083f4/0 " alt =" " >
23+ <img src =" https://qidian.qpic.cn/qidian_common/349573/60b54a019ccce3709b04af2401caf4a4/0 " alt =" " > <img src =" https://qidian.qpic.cn/qidian_common/349573/f8b6198e5e35b53604be9de6f6a083f4/0 " alt =" " >
2624
2725** 真实线上项目案例**
2826
@@ -60,9 +58,18 @@ C端视频制作:https://activity.hongxiu.com/be-video/
6058
6159如何使用?
6260---------------
61+
62+ ``` js
63+ npm install mobilebone
64+ ```
65+
6366引入相关的CSS以及JS, 如下:
64- <pre >< ; link rel="stylesheet" href="mobilebone.css"></pre >
65- <pre >< ; script src="mobilebone.js">< ; /script></pre >
67+ ``` html
68+ <link rel =" stylesheet" href =" ./src/mobilebone.css" >
69+ ```
70+ ``` html
71+ <script src =" ./src/mobilebone.js" ></script >
72+ ```
6673
6774HTML结构需要有一定的要求:
6875<pre >body
@@ -73,12 +80,16 @@ HTML结构需要有一定的要求:
7380每个page是个满屏元素, 相当于一个独立的页面。
7481
7582Mobilebone会自动捕获页面上的a元素,如果其href值存在猫腻,就会触发切换行为。例如:
76- <pre >< ; a href="#targetPage">目标页面< ; /a></pre >
83+ ``` html
84+ <a href =" #targetPage" >目标页面</a >
85+ ```
7786
7887当click/tap此元素时候,页面会自动无刷新切换到<code >id</code >为<code >targetPage</code >的页面。
7988
8089也可以使用ajax请求。例如:
81- <pre >< ; a href="detail.php?id=112">请求详情页< ; /a></pre >
90+ ``` html
91+ <a href =" detail.php?id=112" >请求详情页</a >
92+ ```
8293
8394所有ajax请求默认是缓存的,如果你想根据url地址不缓存,可以设置<code >data-reload</code >或者<code >data-reload="true"</code >;如果你想根据url根地址不缓存,需要设置<code >data-reload="root"</code >。
8495
0 commit comments