Skip to content

Commit 2a6d7b7

Browse files
author
zhangxinxu
committed
install.html docs update
1 parent 3fa9e7d commit 2a6d7b7

File tree

9 files changed

+136
-36
lines changed

9 files changed

+136
-36
lines changed

‎dist/mobilebone.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,8 @@
55
* good luck for U, ^_^
66
**/
77

8-
a, img {
9-
-webkit-touch-callout: none;
10-
}
118
body {
129
margin: 0;
13-
-webkit-user-select: none;
14-
user-select: none;
1510
}
1611

1712
/* construction */

‎docs/assets/docs.css‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
body { line-height: 1.5; font-size: 14px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5fa;}
1+
body { line-height: 1.5; font-size: 14px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5fa; -webkit-user-select: auto; user-select: auto;}
22
a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); color: inherit; }
33
time { opacity: .75; }
4-
aside { position: absolute; left: 0; top: 64px; bottom: 0; width: 250px; background-color: #0C121A; box-shadow: 2px 0 1px rgba(0,0,0,.3); color: #fff; overflow: auto; z-index: 1; }
4+
aside { position: absolute; left: 0; top: 64px; bottom: 0; width: 250px; background-color: #0C121A; box-shadow: 1px 0 rgba(0,0,0,.3); color: #fff; overflow: auto; z-index: 1; }
55
aside > h2 { font-size: 1.2em; margin-bottom: .25em; }
66

77
header {position: fixed;left: 0; right: 0; background-color: #0C121A; z-index: 2; box-shadow: 0 1px hsla(0,0%,100%,.1), inset 0 -1px #000; color: #fff; height: 64px; }
@@ -13,7 +13,7 @@ header {position: fixed;left: 0; right: 0; background-color: #0C121A; z-index: 2
1313
.header-nav-a{display: inline-block; padding:20px 40px; transition: .2s; font-size: 18px;border-right: 1px solid rgba(255,255,255,.1);}
1414
.header-nav-a:first-child{border-left: 1px solid rgba(255,255,255,.1);}
1515
.header-nav-a:hover,.logo:hover{background-color: hsla(0,0%,100%,.1);}
16-
.header-nav-a.active{box-shadow:inset 1px 0 #000, inset -1px 0 #000;background-color: rgba(0,0,0,.2);}
16+
.header-nav-a.active{box-shadow:inset 1px 0 #000, inset -1px 0 #000;background-color: rgba(0,0,0,.2);color: #fff7c7;}
1717
.header-nav-r {position: absolute; right: 20px;border-left: 1px solid rgba(255,255,255,.1);}
1818

1919
.nav-a { display: block; padding: 5px 10px; color: #fff; position: relative; }
@@ -23,7 +23,7 @@ header {position: fixed;left: 0; right: 0; background-color: #0C121A; z-index: 2
2323
.nav-a[href*=autoInit], .nav-a[href*=getPage] { text-decoration: line-through; display: none; }
2424
.nav-a[href*=getFunction] { opacity: .6; }
2525
.nav-a > .mask { display: inline; width: 26px; height: 31px; top: 0; right: 8px; left: auto; background-color: transparent; -webkit-transform: scale(.8,.8); -ms-transform: scale(.75,.75); transform: scale(.75,.75); }
26-
a.nav-a.active { background-color: rgba(0,0,0,.2); box-shadow: inset 0 -1px rgba(255,255,255, .1), inset 0 1px #000; }
26+
a.nav-a.active { background-color: rgba(0,0,0,.2); box-shadow: inset 0 -1px rgba(255,255,255, .1), inset 0 1px #000; color: #fff7c7; }
2727

2828
.nav-h{margin-bottom:0; font-size:1rem;}
2929
.nav-secondary{display: none;}
@@ -33,7 +33,7 @@ a.nav-a.active { background-color: rgba(0,0,0,.2); box-shadow: inset 0 -1px rgba
3333

3434
h3 [type="radio"] {opacity: 0;}
3535

36-
.content { position: absolute; top: 0; bottom: 0; left: 250px; right: 0; padding: 20px; padding-top: 84px; cursor: default; overflow: auto; }
36+
.content { position: absolute; top: 0; bottom: 0; left: 250px; right: 0; padding: 20px; padding-top: 84px; cursor: default; overflow: auto; scroll-behavior: smooth; }
3737
aside, .content { -webkit-overflow-scrolling: touch; }
3838

3939
.download { display: inline-block; width: 280px; padding: 10px 0; background-color: #34538b; color: #fff; text-align: center; box-shadow: 3px 3px #beceeb; white-space: nowrap; }
@@ -42,7 +42,8 @@ aside, .content { -webkit-overflow-scrolling: touch; }
4242
.content h1 { font-size: 20px; margin-top: 10px; margin-left: 10px; }
4343
.content h1 sub { margin-top: -20px; font-weight: normal; font-size: 12px; letter-spacing: -1px; color: #ddd; position: absolute; pointer-events: none; }
4444
.content h2 { margin-top: 0; margin-bottom: 20px; padding: 10px; background-color: #C1D2EE; font-size: 16px; text-shadow: 1px 1px #eee; }
45-
.content h3 { margin: 20px 0 10px; padding: 10px; background-color: #cad5eb; font-size: 14px; color: #666; }
45+
.content h3 { margin: 20px 0 10px; padding: 8px 10px; background-color: #cad5eb; font-size: 14px; color: #565656; }
46+
.content h4{margin: 1em 0 .5em; padding: 0 10px; font-size: 14px; color: #565656;}
4647
.content p { margin: 10px; color: #565656; }
4748
.content p:hover { color: #333; }
4849
.content code { border: 1px solid #ddddef; background-color: #f0f0f0; border-radius: 3px; padding: 1px 4px; margin-left: 2px; margin-right: 2px; font-family: Consolas, monospace; color: #333;}
@@ -54,24 +55,29 @@ code > a:hover { background-color: #f0f3f9; color: #333; text-decoration: none;
5455
.content li pre { margin-left: 0; margin-right: 0; }
5556
pre .comment { color: green; }
5657
.content li p { margin-left: 0; margin-right: 0; }
57-
.content tip { position: absolute; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }
58+
.content tip { position: absolute; -ms-transform: translateX(-100%); transform: translateX(-100%); }
5859
.content tip::before { content: attr(data-content); display: inline-block; padding: 0 .3em; background-color: #34538b; color:#fff; font-size: 12px; opacity: .2; }
5960

60-
.content table { border-spacing: 0; border-collapse: collapse; *border-collapse: separate; margin-left: 10px; color: #666; }
61+
.content table { border-spacing: 0; border-collapse: collapse; margin-left: 10px; color: #666; }
6162
.content tr:hover { color: #333; }
6263
.content th { border: 1px solid #a0b3d6; background-color: #f0f3f9; padding: 2px 10px; }
6364
.content td { border: 1px solid #a0b3d6; padding: 2px 10px; }
6465
.content tr:nth-of-type(even) td { background-color: #f6f6f6; }
66+
.content video{background-color: #000; object-fit: contain;}
6567

66-
.content .link { text-decoration: underline; color: #34538b; }
67-
.content .link:hover { text-decoration: none; }
68+
.content .link { color: #2a80eb; margin: 0 2px; }
69+
.content .link:hover{ color: #0057c3;}
6870
.content .link:active { color: #f30; }
6971
.button { display: inline-block; padding: .5em 1em; color: #444; border: 0; border-radius: .2em; background-color: #f0f3f9; box-shadow: 1px 1px #a0b3d6, 2px 2px #a0b3d6, 3px 3px #a0b3d6, 4px 4px #a0b3d6; text-decoration: none; text-shadow: 1px 1px #f0f3f9; font-weight: 700; font-size: 12px; cursor: pointer; -webkit-transition: all .1s; transition: all .1s; }
7072
.button:hover { background-color: #E3E8F2; color: #333; }
71-
.button:active { -webkit-transform: translate(2px, 2px); -ms-transform: translate(2px, 2px); transform: translate(2px, 2px); box-shadow: 1px 1px #a0b3d6, 2px 2px #a0b3d6; }
73+
.button:active { -ms-transform: translate(2px, 2px); transform: translate(2px, 2px); box-shadow: 1px 1px #a0b3d6, 2px 2px #a0b3d6; }
7274
.button:focus { outline: 0 none; background-color: #E3E8F2; }
7375
.content .supplement { margin-left: 20px; color: #999; }
7476
.content img { max-width: 100%; }
77+
.content hr { border:0; border-top: 1px solid #d0d0d5; margin-top: 3rem;}
78+
79+
.content .button { border: 1px solid rgba(0,0,0,.1);padding: 10px 50px; min-width: 50px; font-size: medium; text-align: center; }
80+
.content .button:hover{filter: saturate(1.5)}
7581

7682
del { display: inline-block; opacity: .6; }
7783

‎docs/assets/docs.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,26 @@
3434
}
3535
})();
3636

37+
Object.defineProperty(HTMLInputElement.prototype, 'checked', {
38+
set: function (value) {
39+
if (!this.id) {
40+
return;
41+
}
42+
if (value) {
43+
this.setAttribute('checked', '');
44+
} else {
45+
this.removeAttribute('checked');
46+
}
47+
let eleLabels = document.querySelectorAll('label[for="'+ this.id +'"]');
48+
[].slice.call(eleLabels).forEach(function (eleLabel) {
49+
if (value) {
50+
eleLabel.classList.add('active');
51+
} else {
52+
eleLabel.classList.remove('active');
53+
}
54+
}.bind(this));
55+
}
56+
})
57+
58+
3759

‎docs/guide/index.html‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
7-
<meta name="description" content="Mobilebone.js 使用教程-中文版-首页" />
7+
<meta name="description" content="Mobilebone.js 使用教程 - 中文版 - 首页" />
88
<meta name="keywords" content="Mobilebone.js, Mobilebone, 路由, javascript, 使用教程" />
9+
<meta name="referrer" content="never">
910
<meta name="author" content="张鑫旭, zhangxinxu" />
1011
<link rel="icon" href="../assets/favicon.ico">
1112
<link rel="prefetch" href="_aside.html">
12-
<title>Mobilebone.js使用教程-中文版-首页</title>
13+
<title>Mobilebone.js 使用教程 - 中文版 - 首页 </title>
1314
<link rel="stylesheet" href="../../src/mobilebone.css">
1415
<link rel="stylesheet" href="../../src/mobilebone.animate.css">
1516
<link rel="stylesheet" href="../assets/docs.css">
@@ -20,9 +21,27 @@
2021
<aside id="aside" href="_aside.html"></aside>
2122
<div id="indexPage" class="page out">
2223
<div class="content">
23-
<h2>mobilebone.js下载</h2>
24-
<p><a href="../src/mobilebone.js" class="download" data-ajax="false">Development Version<span class="version"></span></a></p>
25-
<p><a href="https://raw.github.com/zhangxinxu/mobilebone/master/src/mobilebone.js" class="download" data-ajax="false">Edge Version(master)</a></p>
24+
<h2> 开始 </h2>
25+
<h3>Mobilebone.js 是什么？</h3>
26+
<p>Mobilebone 是一个可以让传统 Web 网页有类似于 Native APP 交互体验的 UI 框架。</p>
27+
<p> 例如下面这个视频（点击播放）所示的单页应用，虽然是个 H5 页面，但是体验效果如同原生 APP。</p>
28+
<p><video src='https://image.zhangxinxu.com/video/blog/202011/mobilebone-example.mp4' type="video/mp4" width="120" height="210" preload="auto" autobuffer loop x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" webkit-playsinline="true" playsinline="true" onclick="this.play();this.width=372;this.height=664;"></video></p>
29+
<p> 是的，Mobilebone.js 虽然体积很小（min &lt; 18K, Gzip ≈ 6K），但是本质上还是一个框架，正如其名称所示，移动端开发的骨架。</p>
30+
<p> 通过对比流行的 Vue.js 可以让大家更好地了解 Mobilebone.js。</p>
31+
<p>Vue 框架的核心是负责视图层的构建，支持多页应用，也支持单页应用，其中单页应用的路由功能需要借助第三方的插件，例如 Vue Router 插件。此时，Vue 框架是核心，Vue Router 属于插件，Vue Router 的使用需要遵循 Vue 框架的规则。</p>
32+
33+
<p>Mobilebone 框架的核心则是路由与转场，可以让多页应用无缝转变为单页应用。Mobilebone 不参与视图层的构建，如果希望当前应用拥有数据驱动的视图渲染能力，需要引用其他插件，例如 Vue.js。此时，Mobilebone 框架是核心，Vue.js 属于插件，Vue.js 的使用需要遵循 Mobilebone 框架的规则。</p>
34+
35+
<h3> 设计原则 </h3>
36+
<p>Mobilebone 的作者是一个道家思想主义者，讲求追本溯源、无为而治，无论是生活、做人或者是程序开发，都遵循这样的哲学思想。比方说早些年的 <a href="https://github.com/zhangxinxu/ieBetter.js" target="_blank" class="link" rel="noopener">ieBetter.js</a>，或者是不少人熟知的 <a href="https://github.com/yued-fe/lulu" target="_blank" class="link" rel="noopener">LuLu UI</a> 等，有则锦上添花，无则江山依旧。</p>
37+
<p> 这里的 Mobilebone.js 也是如此，保留传统 web 开发所有特性，不侵入业务代码，也就是如果没有 Mobilebone.js，我们的项目依然是可以运作的，只是形式上是传统的页面跳转。</p>
38+
<p> 比方说您现在看到的这个文档页面左侧的任意的导航链接，您使用鼠标右键→新窗口打开，会发现是一个体验和功能完全正常的文档页面（对 SEO 非常友好），但是如果您鼠标单击，会发现整个文档页是个单页（对用户非常友好），这就是 Mobilebone，可以让正常的传统网页在不需要修改任何代码的情况下，聚合成一个单页应用。</p>
39+
<p> 请注意，上面这句话虽然是实话，但是夸大了 Mobilebone 的作用。事实是这样的，Mobilebone 有能力让多页面再不动一兵一卒的情况下变成单页，但是，并不是说随便写几个页面都可以合成一个单页应用，需要开发者理解 Mobilebone 作用原理的前提下，调整对应页面的某些细节，才能让当前页面既能直接浏览，也能作为一个模块在显示在单页中。</p>
40+
<p> 以及，虽然 Mobilebone 有能力让传统 Web 网页变成单页应用，但是，在 Mobilebone 的 <a href="./style/" class="link"> 推荐指南 </a> 中，如果您的项目并不是那种偏展示型，对 SEO 要求非常高的项目，<strong> 更推荐采用 JSON 数据 + 视图渲染 </strong> 的这种实现方式，开发策略上类似于 Vue/React 等框架的单页应用，因为用户体验上会更好。</p>
41+
<h3> 起步 </h3>
42+
<p>Mobilebone.js 的上手成本极低，您只需要了解 HTML 和 CSS 的基础知识就可以创建 Mobilebone 单页应用。</p>
43+
<p><a href="./install.html" class="button"> 安装 </a></p>
44+
<p></p>
2645
</div>
2746
</div>
2847
<script src="nav.js"></script>
@@ -36,7 +55,7 @@ <h2>mobilebone.js下载</h2>
3655
document.getElementById("indexPage").className = "page";
3756
}
3857
</script>
39-
<!-- ga统计 -->
58+
<!-- ga 统计 -->
4059
<script>
4160
var _gaq = _gaq || [];
4261
_gaq.push(['_setAccount', 'UA-11205167-1']);

‎docs/guide/install.html‎

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,56 @@
1818
<aside id="aside" href="_aside.html"></aside>
1919
<div class="page out">
2020
<div class="content">
21-
<h2>安装</h2>
22-
<p><code>page</code>元素的标志类名。默认值是<code>"page"</code>.</p>
23-
<h3>值类型</h3>
24-
<p>字符串。</p>
21+
<h2>安装</h2>
22+
<p>Mobilebone 主要支持直接引用和NPM安装两种模式。</p>
23+
<h3>直接HTML引入</h3>
24+
<p>引入必须的CSS文件：</p>
25+
<pre>&lt;link rel="stylesheet" href="./dist/mobilebone.css"&gt;</pre>
26+
<p><code>mobilebone.css</code> 包含的CSS内容非常的少（&lt; 3K），且非常稳定，因此如果条件允许，可以和其他业务CSS代码整合在一起。</p>
27+
<p>如果页面的过场动画不是左滑右滑，而是淡入淡出、飞翔、缩放之类，还需要引入 <code>mobilebone.animate.css</code>。</p>
28+
<pre><span class="comment">&lt;!-- 此文件只在src目录中, dist目录中没有 --&gt;</span>
29+
&lt;link rel="stylesheet" href="./src/mobilebone.animate.css"&gt;</pre>
30+
<p>引入必须的CSS文件：</p>
31+
<pre>&lt;script src="./dist/mobilebone.js"&gt;&lt;/script&gt;</pre>
32+
<p>此时<code>Mobilebone</code> 会被注册为一个全局变量。</p>
33+
<h4>CDN</h4>
34+
<p>您还可以直接链接在线的CDN地址，例如：</p>
35+
<pre>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mobilebone/dist/mobilebone.css"&gt;</pre>
36+
<pre>&lt;script src="https://cdn.jsdelivr.net/npm/mobilebone/dist/mobilebone.js"&gt;&lt;/script&gt;</pre>
37+
<p>引用第3方提供的静态资源总是伴随着巨大的风险（域名变更、站点倒闭或者被墙），因此，上面的地址不建议在生产环境使用。</p>
38+
39+
<p>如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：</p>
40+
<pre>&lt;script type="module"&gt;
41+
import Mobilebone from 'https://cdn.jsdelivr.net/npm/mobilebone/dist/mobilebone.esm.js'
42+
&lt;/script&gt;</pre>
43+
44+
<p>通常更建议使用带有具体版本号的资源，以避免新版本带来不可预期的破坏：</p>
45+
<pre>&lt;script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mobilebone.js"&gt;&lt;/script&gt;</pre>
46+
47+
<p>Mobilebone 也可以在 <a href="https://unpkg.com/mobilebone/dist/mobilebone.js" class="link" target="_blank" rel="noopener">unpkg</a> 和 <a href="https://cdnjs.cloudflare.com/ajax/libs/mobilebone/2.7.9/mobilebone.js" class="link" target="_blank" rel="noopener">cdnjs</a> 上获取。</p>
48+
49+
<h3>NPM安装</h3>
50+
<p>在大型项目中，推荐使用 NPM 安装，因为 NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用：</p>
51+
<pre>npm install mobilebone</pre>
52+
<p>例如在Vue-CLI环境中，可以使用下面的语法进行CSS和JS的引入：</p>
53+
<pre><span class="comment">&lt;!-- 支持import引入 --&gt;</span>
54+
&lt;script&gt;
55+
import Mobilebone from 'mobilebone'
56+
&lt;/script&gt;
57+
<span class="comment">&lt;!-- CSS引用 --&gt;</span>
58+
&lt;style src="mobilebone/dist/mobilebone.css"&gt;</pre>
59+
60+
<h3>其他说明</h3>
61+
<h4>兼容性</h4>
62+
<p>Mobilebone 不支持IE9及其以下版本的浏览器，因为 Mobilebone 使用了 IE10 浏览器才开始支持的 HTML5 history API 作为路由管理。</p>
63+
<p></p>
64+
<h4>语义化版本控制</h4>
65+
<p>Mobilebone 遵循<a href="https://semver.org/lang/zh-CN/" class="link" target="_blank" rel="noopener">语义化版本控制</a>。从 v2.8.0 开始，Mobilebone 的变更细节会描述在<a href="https://github.com/vuejs/vue/releases" class="link" target="_blank" rel="noopener">发布说明</a>中。</p>
66+
<h4>最新版本</h4>
67+
<p>最新版本是：<span class="version"></span></p>
68+
69+
<hr>
70+
<p>发现错误？想参与编辑？ 在 <a href="https://github.com/zhangxinxu/mobilebone/blob/master/docs/guide/install.html" class="link" target="_blank" rel="nooppener">GitHub 上编辑此页</a>！</p>
2571
</div>
2672
</div>
2773

@@ -32,5 +78,18 @@ <h3>值类型</h3>
3278
window.navKey = "install";
3379
</script>
3480
<script src="../assets/docs.js"></script>
81+
<!-- ga统计 -->
82+
<script>
83+
var _gaq = _gaq || [];
84+
_gaq.push(['_setAccount', 'UA-11205167-1']);
85+
_gaq.push(['_trackPageview']);
86+
(function() {
87+
if (location.host == 'www.zhangxinxu.com') {
88+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
89+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
90+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
91+
}
92+
})();
93+
</script>
3594
</body>
3695
</html>

‎docs/guide/nav.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,19 @@ var funSubNav = function (elePageIn) {
4444
if (eleNav && !eleNav.isSubNav) {
4545
[].slice.call(eleH3s).forEach(function (eleH, index) {
4646
var id = urlKey.replace(/\W/g, '') + index;
47-
htmlList += '<label for="'+ id +'" class="nav-a" href>'+ eleH.textContent +'</label>';
47+
htmlList += '<label for="'+ id +'" class="nav-a" href>'+ eleH.textContent.replace('？', '') +'</label>';
4848
eleH.insertAdjacentHTML('beforeend', '<input type="radio" name="'+ id.replace(/\d/g, '') +'" id="'+ id +'">');
4949
});
5050

5151
eleNav.classList.add('active');
5252
eleNav.insertAdjacentHTML('afterend', htmlSubNav.replace('${list}', htmlList));
5353

5454
eleNav.isSubNav = true;
55-
}
55+
}
56+
57+
[].slice.call(elePageIn.querySelectorAll('.version:empty')).forEach(function (ele) {
58+
ele.innerHTML = Mobilebone.VERSION;
59+
});
5660
};
5761

5862
document.addEventListener('click', function (event) {

‎src/mobilebone.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,8 @@
55
* good luck for U, ^_^
66
**/
77

8-
a, img {
9-
-webkit-touch-callout: none;
10-
}
118
body {
129
margin: 0;
13-
-webkit-user-select: none;
14-
user-select: none;
1510
}
1611

1712
/* construction */

‎src/mobilebone.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -644,7 +644,7 @@
644644
}
645645

646646
// get url of root
647-
cleanUrl = href.split("#")[0].replace(/&+$/, "");
647+
cleanUrl = href.split("#")[0].replace(/&+$/, "").replace(/^\.\/+/, "");
648648

649649
if (cleanUrl.slice(-1) == "?") {
650650
cleanUrl = cleanUrl.split("?")[0];
@@ -1030,7 +1030,7 @@
10301030
if (eleMask == null) {
10311031
eleMask = document.createElement("div");
10321032
eleMask.className = classMask;
1033-
eleMask.innerHTML = '<i class="loading"></i>';
1033+
eleMask.innerHTML = '<s class="loading"></s>';
10341034
if (typeof attrMask == "string") {
10351035
eleOrObj.appendChild(eleMask);
10361036
} else {

‎test/modular-load/import.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<div id="page3" class="page out"></div>
2929

3030
<script type="module">
31-
import Mobilebone from '../../dist/mobilebone.js'
31+
import Mobilebone from '../../dist/mobilebone.esm.js'
3232

3333
Mobilebone.onpagefirstinto = function (elePageIn) {
3434
if (elePageIn.innerHTML === '') {

0 commit comments

Comments
 (0)