Skip to content

Commit ca2c10a

Browse files
author
zhangxinxu
committed
nav function
1 parent 2a6d7b7 commit ca2c10a

File tree

5 files changed

+230
-65
lines changed

5 files changed

+230
-65
lines changed

‎docs/assets/docs.css‎

Lines changed: 50 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ aside { position: absolute; left: 0; top: 64px; bottom: 0; width: 250px; backgro
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; }
8-
.version{margin-left: 1ch;font-weight:400; font-size:14px;}
8+
.logo .version{margin-left: 1ch;font-weight:400; font-size:14px;}
99
.logo-h {margin:0; position: absolute;}
1010
.logo{display:block; width:230px; line-height:60px;padding:0 10px;overflow: hidden; font-family:x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,Source Han Serif SC,STZhongsong,simsun,serif; color: #fff7c7;transition:.2s;}
1111
.logo::before{content:''; background:url(logo-128.png) no-repeat center / 48px 48px; float: left; height: 64px; width:64px; margin-left: -12px;}
@@ -43,6 +43,7 @@ aside, .content { -webkit-overflow-scrolling: touch; }
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; }
4545
.content h3 { margin: 20px 0 10px; padding: 8px 10px; background-color: #cad5eb; font-size: 14px; color: #565656; }
46+
.content h3.active { filter: hue-rotate(180deg);}
4647
.content h4{margin: 1em 0 .5em; padding: 0 10px; font-size: 14px; color: #565656;}
4748
.content p { margin: 10px; color: #565656; }
4849
.content p:hover { color: #333; }
@@ -51,7 +52,7 @@ aside, .content { -webkit-overflow-scrolling: touch; }
5152
.content li { margin-top: 10px; color: #666; }
5253
.content li:hover { color: #333; }
5354
code > a:hover { background-color: #f0f3f9; color: #333; text-decoration: none; }
54-
.content pre { display: block; padding: 10px; margin: 10px; border: 1px dotted #00c; color: #00c; font-family: "Lucida Console", Monaco, monospace; white-space: pre-wrap; word-wrap: break-word; }
55+
.content pre { display: block; padding: 10px; margin: 10px; border: 1px dotted #00c; color: #00c; font-family: "Lucida Console", Monaco, monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; }
5556
.content li pre { margin-left: 0; margin-right: 0; }
5657
pre .comment { color: green; }
5758
.content li p { margin-left: 0; margin-right: 0; }
@@ -79,58 +80,83 @@ pre .comment { color: green; }
7980
.content .button { border: 1px solid rgba(0,0,0,.1);padding: 10px 50px; min-width: 50px; font-size: medium; text-align: center; }
8081
.content .button:hover{filter: saturate(1.5)}
8182

83+
[is-runable] {
84+
background-color: #fff;
85+
}
86+
[is-runable] button {
87+
position: sticky;
88+
top: 50vh;
89+
background-color: #eb4646;
90+
color: #fff;
91+
float: right;
92+
width: 150px; height: 40px;
93+
border: 0;
94+
font-size: 16px;
95+
border-radius: 4px;
96+
}
97+
98+
.iframe-example {
99+
display: none;
100+
position: fixed;
101+
width: 375px; height: 667px;
102+
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ctext x='50%25' y='50%25' font-size='12' fill='%23a2a9b6' fill-opacity='0.3' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3E示例效果%3C/text%3E%3C/svg%3E");
103+
inset: 0;
104+
margin: auto;
105+
z-index: 9;
106+
border: solid;
107+
outline: 9999px solid rgba(0,0,0,.5);
108+
}
109+
.iframe-example[open] {
110+
display: block;
111+
}
112+
@supports not (inset: 0) {
113+
.iframe-example {
114+
left: 0; right: 0; bottom: 0; top: 0;
115+
}
116+
}
117+
@media (max-width: 480px) {
118+
.iframe-example {
119+
display: block;
120+
position: static;
121+
width: calc(100% - 6px);
122+
outline: none;
123+
}
124+
}
125+
126+
82127
del { display: inline-block; opacity: .6; }
83128

84129
/* slide up */
85130
.slideup.out {
86-
-webkit-animation-name: slideouttotop;
87131
animation-name: slideouttotop;
88132
}
89133
.slideup.in {
90-
-webkit-transform: translateY(0);
91-
-webkit-animation-name: slideinfrombottom;
92134
transform: translateY(0);
93135
animation-name: slideinfrombottom;
94136
}
95137
.slideup.in.reverse {
96-
-webkit-animation-name: slideinfromtop;
97138
animation-name: slideinfromtop;
98139
}
99140
.slideup.out.reverse {
100-
-webkit-transform: translateY(100%);
101-
-webkit-animation-name: slideouttobottom;
102141
transform: translateY(100%);
103142
animation-name: slideouttobottom;
104143
}
105144

106-
@-webkit-keyframes slideinfromtop {
107-
from { -webkit-transform: translateY(-100%); }
108-
to { -webkit-transform: translateY(0); }
109-
}
110145
@keyframes slideinfromtop {
111146
from { transform: translateY(-100%); }
112147
to { transform: translateY(0); }
113148
}
114-
@-webkit-keyframes slideinfrombottom {
115-
from { -webkit-transform: translateY(100%); }
116-
to { -webkit-transform: translateY(0); }
117-
}
149+
118150
@keyframes slideinfrombottom {
119151
from { transform: translateY(100%); }
120152
to { transform: translateY(0); }
121153
}
122-
@-webkit-keyframes slideouttotop {
123-
from { -webkit-transform: translateY(0); }
124-
to { -webkit-transform: translateY(-100%); }
125-
}
154+
126155
@keyframes slideouttotop {
127156
from { transform: translateY(0); }
128157
to { transform: translateY(-100%); }
129158
}
130-
@-webkit-keyframes slideouttobottom {
131-
from { -webkit-transform: translateY(0); }
132-
to { -webkit-transform: translateY(100%); }
133-
}
159+
134160
@keyframes slideouttobottom {
135161
from { transform: translateY(0); }
136162
to { transform: translateY(100%); }

‎docs/assets/docs.js‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
if (Mobilebone.support == false) {
66
document.querySelector('.page.out').className = 'page';
77
}
8-
var ele_version = document.getElementsByClassName('version');
9-
[].slice.call(ele_version).forEach(function(version, index) {
8+
var eleVersions = document.getElementsByClassName('version');
9+
[].slice.call(eleVersions).forEach(function(version) {
1010
version.innerHTML = '(v' + Mobilebone.VERSION + ')';
1111
});
1212

@@ -34,26 +34,11 @@
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-
})
37+
// 导航与菜单栏的高亮处理
38+
let eleScriptSmartFor = document.createElement('script');
39+
eleScriptSmartFor.src = 'https://www.zhangxinxu.com/study/202011/smart-for.js';
40+
eleScriptSmartFor.onload = function () {};
41+
document.head.appendChild(eleScriptSmartFor);
5742

5843

5944

‎docs/guide/index.html‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,36 @@ <h3> 设计原则 </h3>
3737
<p> 这里的 Mobilebone.js 也是如此，保留传统 web 开发所有特性，不侵入业务代码，也就是如果没有 Mobilebone.js，我们的项目依然是可以运作的，只是形式上是传统的页面跳转。</p>
3838
<p> 比方说您现在看到的这个文档页面左侧的任意的导航链接，您使用鼠标右键→新窗口打开，会发现是一个体验和功能完全正常的文档页面（对 SEO 非常友好），但是如果您鼠标单击，会发现整个文档页是个单页（对用户非常友好），这就是 Mobilebone，可以让正常的传统网页在不需要修改任何代码的情况下，聚合成一个单页应用。</p>
3939
<p> 请注意，上面这句话虽然是实话，但是夸大了 Mobilebone 的作用。事实是这样的，Mobilebone 有能力让多页面再不动一兵一卒的情况下变成单页，但是，并不是说随便写几个页面都可以合成一个单页应用，需要开发者理解 Mobilebone 作用原理的前提下，调整对应页面的某些细节，才能让当前页面既能直接浏览，也能作为一个模块在显示在单页中。</p>
40-
<p> 以及，虽然 Mobilebone 有能力让传统 Web 网页变成单页应用，但是，在 Mobilebone 的 <a href="./style/" class="link"> 推荐指南 </a> 中，如果您的项目并不是那种偏展示型，对 SEO 要求非常高的项目，<strong> 更推荐采用 JSON 数据 + 视图渲染 </strong> 的这种实现方式，开发策略上类似于 Vue/React 等框架的单页应用，因为用户体验上会更好。</p>
40+
<p> 以及，虽然 Mobilebone 有能力让传统 Web 网页变成单页应用，但是，在 Mobilebone 的 <a href="./style/" class="link"> 推荐指南 </a> 中，如果您的项目并不是那种偏展示型，对 SEO 要求非常高的项目，<strong> 更推荐采用 JSON 数据 + 视图渲染 </strong> 的这种实现方式，开发策略上类似于 Vue/React 等框架的单页应用，因为用户体验会更好。</p>
4141
<h3> 起步 </h3>
4242
<p>Mobilebone.js 的上手成本极低，您只需要了解 HTML 和 CSS 的基础知识就可以创建 Mobilebone 单页应用。</p>
4343
<p><a href="./install.html" class="button"> 安装 </a></p>
44-
<p></p>
44+
<br>
45+
<p>先从最基本的静态效果说起。</p>
46+
<p>如果是静态页面，只需要把每一页的内容放在一个一个的“page”中，在 Mobilebone 中，这个“page”是包含类名 <code>'page'</code> 的 <code>&lt;div&gt;</code >元素，例如（点击“运行按钮”可以查看效果）：</p>
47+
<pre is-runable>&lt;!DOCTYPE html&gt;
48+
&lt;html&gt;
49+
&lt;head&gt;
50+
&lt;meta charset="utf-8"&gt;
51+
&lt;meta name="viewport" content="width=device-width"&gt;
52+
&lt;link rel="stylesheet" href="./dist/mobilebone.css"&gt;
53+
&lt;title&gt;示例&lt;/title&gt;
54+
&lt;/head&gt;
55+
&lt;body&gt;
56+
&lt;div id="page1" class="page out"&gt;
57+
&lt;p&gt;　页面1，&lt;a href="#page2"&gt;下一页&lt;/a&gt;&lt;/p&gt;
58+
&lt;/div&gt;
59+
&lt;div id="page2" class="page out"&gt;
60+
&lt;p&gt;　页面2，&lt;a href="#page1"&gt;上一页&lt;/a&gt;&lt;/p&gt;
61+
&lt;/div&gt;
62+
&lt;script src="./dist/mobilebone.min.js"&gt;&lt;/script&gt;
63+
&lt;/body&gt;
64+
&lt;/html&gt;</pre>
65+
66+
<p>转场效果的实现很简单，只需要把链接元素的 <code>href</code> 属性值指向对应的 <code>'page'</code> 元素的 <code>id</code> 属性值即可。</p>
67+
<p>例如：</p>
68+
<pre>&lt;a href="#page2"&gt;下一页&lt;/a&gt;</pre>
69+
<p>此时，点击“下一页”，页面就会平滑过渡到 <code>id</code> 值为 <code>'page2'</code> 的页面上。</p>
4570
</div>
4671
</div>
4772
<script src="nav.js"></script>

‎docs/guide/install.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ <h3>直接HTML引入</h3>
2727
<p>如果页面的过场动画不是左滑右滑，而是淡入淡出、飞翔、缩放之类，还需要引入 <code>mobilebone.animate.css</code>。</p>
2828
<pre><span class="comment">&lt;!-- 此文件只在src目录中, dist目录中没有 --&gt;</span>
2929
&lt;link rel="stylesheet" href="./src/mobilebone.animate.css"&gt;</pre>
30-
<p>引入必须的CSS文件：</p>
30+
<p>引入必须的JS文件：</p>
3131
<pre>&lt;script src="./dist/mobilebone.js"&gt;&lt;/script&gt;</pre>
3232
<p>此时<code>Mobilebone</code> 会被注册为一个全局变量。</p>
3333
<h4>CDN</h4>
@@ -67,7 +67,7 @@ <h4>最新版本</h4>
6767
<p>最新版本是：<span class="version"></span></p>
6868

6969
<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>
70+
<p>发现错误？想参与编辑？在 <a href="https://github.com/zhangxinxu/mobilebone/blob/master/docs/guide/install.html" class="link" target="_blank" rel="nooppener">GitHub 上编辑此页</a>！</p>
7171
</div>
7272
</div>
7373

0 commit comments

Comments
 (0)