Skip to content

Commit a6c540f

Browse files
author
张鑫旭
committed
v2.7.9 support import/export
1 parent 91be575 commit a6c540f

File tree

10 files changed

+1848
-11
lines changed

10 files changed

+1848
-11
lines changed

‎ReadMe.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,23 @@ C端视频制作：https://activity.hongxiu.com/be-video/
5959
如何使用？
6060
---------------
6161

62+
包引入：
63+
6264
```js
6365
npm install mobilebone
6466
```
67+
```html
68+
<!-- 支持import引入 -->
69+
<script>
70+
import Mobilebone from 'mobilebone'
71+
// 初始化
72+
Mobilebone.init();
73+
</script>
74+
<!-- 例如在Vue中 -->
75+
<style src="mobilebone/dist/mobilebone.css">
76+
```
6577
66-
引入相关的CSS以及JS, 如下：
78+
也支持直接链接相关的CSS以及JS, 如下：
6779
```html
6880
<link rel="stylesheet" href="./src/mobilebone.css">
6981
```
@@ -84,7 +96,7 @@ Mobilebone会自动捕获页面上的a元素，如果其href值存在猫腻，
8496
<a href="#targetPage">目标页面</a>
8597
```
8698
87-
当click/tap此元素时候，页面会自动无刷新切换到<code>id</code>为<code>targetPage</code>的页面。
99+
当click此元素时候，页面会自动无刷新切换到<code>id</code>为<code>targetPage</code>的页面。
88100
89101
也可以使用ajax请求。例如：
90102
```html

‎build.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* @description let Mobilebone can be improted by ES6 export/import
3+
* @author zhangxinxu(.com) on 2020-11-18
4+
*/
5+
6+
const fs = require('fs');
7+
const fsPromises = fs.promises;
8+
9+
async function createFolder (path) {
10+
let result = await fsPromises.stat(path).catch(err => {
11+
if (err.code === "ENOENT") {
12+
return fsPromises.mkdir(path);
13+
}
14+
throw err;
15+
});
16+
17+
if (result === false) {
18+
return fsPromises.mkdir(path);
19+
}
20+
21+
return result;
22+
}
23+
24+
// 文件创建
25+
async function buildFiles () {
26+
await createFolder('./dist');
27+
28+
// JS文件的处理
29+
fsPromises.readFile('./src/mobilebone.js', 'utf-8').then((data) => {
30+
// data就是文件字符内容，进行替换
31+
let newData = data.replace(/\(function\(root, factory\)[\w\W]+\)\), /, `const Mobilebone = (`).replace(/;\s*$/, `(self, {});
32+
33+
export default Mobilebone;
34+
`);
35+
// 重新写入文件
36+
fs.writeFile('./dist/mobilebone.js', newData, () => {
37+
console.log('./dist/mobilebone.js生成成功');
38+
});
39+
})
40+
41+
// css文件的处理
42+
fsPromises.copyFile('./src/mobilebone.css', './dist/mobilebone.css')
43+
.then(() => console.log('./dist/mobilebone.css生成成功'))
44+
.catch((err) => console.log('./src/mobilebone.css无法复制，原因是：' + err));
45+
};
46+
47+
buildFiles();
48+

‎dist/mobilebone.css

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/*!
2+
* mobilebone.css
3+
* by zhangxinxu(.com) 2014-09-26
4+
* some necessary CSS for mobilebone.js
5+
* good luck for U, ^_^
6+
**/
7+
8+
a, img {
9+
-webkit-touch-callout: none;
10+
}
11+
body {
12+
margin: 0;
13+
-webkit-user-select: none;
14+
user-select: none;
15+
}
16+
17+
/* construction */
18+
html, body, .page {
19+
height: 100%; width: 100%;
20+
overflow: hidden;
21+
}
22+
.page {
23+
position: absolute; left: 0; top: 0;
24+
}
25+
26+
.page.out {
27+
display: none;
28+
}
29+
30+
.in, .out {
31+
-webkit-animation-fill-mode: both;
32+
animation-fill-mode: both;
33+
}
34+
35+
/* mask layer when ajax sending... */
36+
.mask {
37+
height: 100%; width: 100%;
38+
background-color: rgba(255,255,255,.35);
39+
position: absolute; left: 0; top: 0;
40+
z-index: 9;
41+
}
42+
.loading { /* more info: http://www.zhangxinxu.com/wordpress/?p=3357 */
43+
width: 3px; height:3px;
44+
border-radius: 100%;
45+
box-shadow: 0 -10px 0 1px currentColor, /* top, 1px expand */
46+
10px 0px currentColor, /* right */
47+
0 10px currentColor, /* bottom */
48+
-10px 0 currentColor, /* left */
49+
50+
-7px -7px 0 .5px currentColor, /* left-top, 0.5px expand */
51+
7px -7px 0 1.5px currentColor, /* right-top, 1.5px expand */
52+
7px 7px currentColor, /* right-bottom */
53+
-7px 7px currentColor; /* left-bottom */
54+
-webkit-animation: spin 1s steps(8) infinite;
55+
animation: spin 1s steps(8) infinite;
56+
/*center*/
57+
position: absolute;
58+
top: 0; right: 0; bottom: 0; left: 0;
59+
margin: auto;
60+
}
61+
62+
/* Default animation - slide, you can visit 'src/mobilebone.aniamte.css' to get more styles of animation */
63+
.slide.out, .slide.in {
64+
-webkit-animation-timing-function: ease-out;
65+
-webkit-animation-duration: 225ms;
66+
animation-timing-function: ease-out;
67+
animation-duration: 225ms;
68+
}
69+
.slide.in {
70+
-webkit-animation-name: slideinfromright;
71+
animation-name: slideinfromright;
72+
}
73+
.slide.out {
74+
-webkit-animation-name: slideouttoleft;
75+
animation-name: slideouttoleft;
76+
}
77+
.slide.reverse.out {
78+
-webkit-animation-name: slideouttoright;
79+
animation-name: slideouttoright;
80+
}
81+
.slide.reverse.in {
82+
-webkit-animation-name: slideinfromleft;
83+
animation-name: slideinfromleft;
84+
}
85+
86+
/* keyframes for slidein from sides */
87+
@-webkit-keyframes slideinfromright {
88+
from { -webkit-transform: translate3d(100%,0,0); }
89+
to { -webkit-transform: translate3d(0,0,0); }
90+
}
91+
@keyframes slideinfromright {
92+
from { transform: translateX(100%); }
93+
to { transform: translateX(0); }
94+
}
95+
@-webkit-keyframes slideinfromleft {
96+
from { -webkit-transform: translate3d(-100%,0,0); }
97+
to { -webkit-transform: translate3d(0,0,0); }
98+
}
99+
@keyframes slideinfromleft {
100+
from { transform: translateX(-100%); }
101+
to { transform: translateX(0); }
102+
}
103+
/* keyframes for slideout to sides */
104+
@-webkit-keyframes slideouttoleft {
105+
from { -webkit-transform: translate3d(0,0,0); }
106+
to { -webkit-transform: translate3d(-100%,0,0); }
107+
}
108+
@keyframes slideouttoleft {
109+
from { transform: translateX(0); }
110+
to { transform: translateX(-100%); }
111+
}
112+
@-webkit-keyframes slideouttoright {
113+
from { -webkit-transform: translate3d(0,0,0); }
114+
to { -webkit-transform: translate3d(100%,0,0); }
115+
}
116+
@keyframes slideouttoright {
117+
from { transform: translateX(0); }
118+
to { transform: translateX(100%); }
119+
}
120+
121+
/* chrysanthemum loading effect */
122+
@-webkit-keyframes spin {
123+
0% { -webkit-transform: rotate(0deg); }
124+
100% { -webkit-transform: rotate(360deg); }
125+
}
126+
@keyframes spin {
127+
0% { transform: rotate(0deg); }
128+
100% { transform: rotate(360deg); }
129+
}

0 commit comments

Comments
 (0)