Skip to content

Commit 91be575

Browse files
authored
Update ReadMe.md
1 parent 1c06c19 commit 91be575

File tree

1 file changed

+20
-9
lines changed

1 file changed

+20
-9
lines changed

ReadMe.md

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
mobilebone.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>&lt;link rel="stylesheet" href="mobilebone.css"></pre>
65-
<pre>&lt;script src="mobilebone.js">&lt;/script></pre>
67+
```html
68+
<link rel="stylesheet" href="./src/mobilebone.css">
69+
```
70+
```html
71+
<script src="./src/mobilebone.js"></script>
72+
```
6673

6774
HTML结构需要有一定的要求:
6875
<pre>body
@@ -73,12 +80,16 @@ HTML结构需要有一定的要求:
7380
每个page是个满屏元素, 相当于一个独立的页面。
7481

7582
Mobilebone会自动捕获页面上的a元素,如果其href值存在猫腻,就会触发切换行为。例如:
76-
<pre>&lt;a href="#targetPage">目标页面&lt;/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>&lt;a href="detail.php?id=112">请求详情页&lt;/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

Comments
 (0)