Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zzx_123123
zui
提交
b580ce63
Z
zui
项目概览
zzx_123123
/
zui
与 Fork 源项目一致
Fork自
易企天创 / zui
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b580ce63
编写于
9月 05, 2016
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* document support double view layout.
上级
2865c3e2
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
411 addition
and
83 deletion
+411
-83
index.html
index.html
+38
-1
src/js/doc.js
src/js/doc.js
+41
-5
src/less/doc.less
src/less/doc.less
+332
-77
未找到文件。
index.html
浏览文件 @
b580ce63
...
...
@@ -67,6 +67,7 @@
</div>
</header>
<!-- 新开子页面 -->
<div
id=
"page"
>
<div
id=
"pageHeader"
>
<div
class=
"wrapper container"
>
...
...
@@ -104,6 +105,7 @@
</div>
</div>
<!-- 当 file: 协议访问时的提示 -->
<div
id=
"fileProtocolTip"
class=
"hidden"
>
<div
class=
"container-fixed-sm"
>
<h1>
不支持
<code>
file://
</code>
协议
</h1>
...
...
@@ -123,8 +125,14 @@
</div>
</div>
<div
data-placement=
"left"
title=
"切换界面布局"
data-toggle=
"tooltip"
id=
"changeViewWrapper"
>
<button
type=
"button"
class=
"btn btn-primary"
id=
"changeViewBtn"
data-toggle=
"modal"
data-target=
"#changeViewModal"
><i
class=
"icon icon-columns"
></i></button>
</div>
<!-- 远程内容加载图标 -->
<div
class=
"text-muted loader loading"
><i
class=
"icon icon-spin icon-spinner-indicator"
></i>
加载中...
</div>
<!-- 内容目录 -->
<div
id=
"grid"
>
<div
class=
"container"
>
<div
class=
"row"
>
...
...
@@ -221,7 +229,7 @@
<p
class=
"text-muted"
><small>
文档版本
<span
class=
"doc-version"
><i
class=
"icon icon-spin icon-spinner-indicator"
></i></span></small></p>
</div>
</footer>
<!-- 一些html模板代码片段 -->
<div
class=
"template"
>
<div
class=
"card section fade scale slide-in-up-100 slide-in-right-50"
id=
"sectionTemplate"
>
...
...
@@ -242,6 +250,35 @@
<button
id=
"copyCodeBtn"
data-html=
"true"
data-animation=
"false"
data-toggle=
"tooltip"
data-title=
"复制代码"
type=
"button"
class=
"btn btn-copy-code"
data-tip-id=
"copyCodeTip"
data-container=
"body"
><i
class=
"icon icon-copy"
></i></button>
</div>
<div
class=
"modal fade"
id=
"changeViewModal"
>
<div
class=
"modal-dialog"
>
<div
class=
"modal-content"
>
<div
class=
"modal-header"
>
<button
type=
"button"
class=
"close"
data-dismiss=
"modal"
><span
aria-hidden=
"true"
>
×
</span><span
class=
"sr-only"
>
关闭
</span></button>
<h4
class=
"modal-title"
>
你想用哪种布局展示页面?
</h4>
</div>
<div
class=
"modal-body"
>
<div
class=
"view-options"
>
<a
class=
"view-option view-option-single"
>
<div
class=
"view-shape"
>
<div
class=
"s-1"
></div>
</div>
<div
class=
"title strong"
>
单页面
</div>
<p
class=
"text-muted"
>
页面在页面中间显示,并隐藏目录。
</p>
</a>
<a
class=
"view-option view-option-double"
>
<div
class=
"view-shape"
>
<div
class=
"s-1"
></div>
</div>
<div
class=
"title strong"
>
双栏
</div>
<p
class=
"text-muted"
>
目录在左侧显示,页面在右侧显示,更好的利用宽屏空间。
</p>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
<script
src=
"assets/jquery.js"
></script>
<script
src=
"assets/clipboard/clipboard.min.js"
></script>
...
...
src/js/doc.js
浏览文件 @
b580ce63
...
...
@@ -1478,7 +1478,16 @@
window
.
open
(
section
.
url
,
'
_blank
'
);
break
;
case
'
page
'
:
openPage
(
$section
,
section
,
topic
);
var
pageViewLayout
=
$
.
zui
.
store
.
get
(
'
pageViewLayout
'
);
if
(
!
pageViewLayout
&&
$
(
window
).
width
()
>=
1600
)
{
$
(
'
#changeViewModal
'
).
on
(
'
hide.zui.modal
'
,
function
()
{
pageViewLayout
=
$
.
zui
.
store
.
get
(
'
pageViewLayout
'
);
if
(
!
pageViewLayout
)
$
.
zui
.
store
.
set
(
'
pageViewLayout
'
,
'
single
'
);
openPage
(
$section
,
section
,
topic
);
}).
modal
(
'
show
'
);
}
else
{
openPage
(
$section
,
section
,
topic
);
}
break
;
default
:
if
(
debug
)
console
.
error
(
"
Open section failed: unknown target.
"
);
...
...
@@ -1921,6 +1930,30 @@
}
};
var
initChangeView
=
function
()
{
var
changePageView
=
function
(
pageViewLayout
)
{
if
(
pageViewLayout
)
{
$
.
zui
.
store
.
set
(
'
pageViewLayout
'
,
pageViewLayout
);
}
else
{
pageViewLayout
=
$
.
zui
.
store
.
get
(
'
pageViewLayout
'
);
}
var
isDoubleView
=
pageViewLayout
===
'
double
'
&&
$
(
window
).
width
()
>=
1200
;
$
(
'
body
'
).
toggleClass
(
'
view-double
'
,
isDoubleView
);
};
var
$modal
=
$
(
'
#changeViewModal
'
);
$modal
.
on
(
'
show.zui.modal
'
,
function
()
{
var
isDoubleView
=
$
(
'
body
'
).
hasClass
(
'
view-double
'
);
$modal
.
find
(
'
.view-option.active
'
).
removeClass
(
'
active
'
);
$modal
.
find
(
'
.view-option-
'
+
(
isDoubleView
?
'
double
'
:
'
single
'
)).
addClass
(
'
active
'
);
}).
on
(
'
click
'
,
'
.view-option
'
,
function
()
{
changePageView
(
$
(
this
).
hasClass
(
'
view-option-double
'
)
?
'
double
'
:
'
single
'
);
$modal
.
modal
(
'
hide
'
);
});
changePageView
();
};
var
init
=
function
()
{
documentTitle
=
window
.
document
.
title
;
...
...
@@ -2073,6 +2106,7 @@
}).
on
(
'
keydown
'
,
function
(
e
)
{
var
code
=
e
.
which
;
var
isPageNotShow
=
!
$body
.
hasClass
(
'
page-show
'
);
var
isDoubleView
=
$body
.
hasClass
(
'
view-double
'
);
var
isInputFocus
=
$body
.
hasClass
(
'
input-query-focus
'
);
if
(
code
===
9
)
{
// Tab
if
(
!
$body
.
hasClass
(
'
input-query-focus
'
))
{
...
...
@@ -2080,7 +2114,7 @@
e
.
preventDefault
();
}
}
else
if
(
code
===
13
)
{
// Enter
if
(
isPageNotShow
&&
isChoosedSection
())
{
if
(
(
isDoubleView
||
isPageNotShow
)
&&
isChoosedSection
())
{
openSection
();
}
}
else
if
(
code
===
27
)
{
// Esc
...
...
@@ -2101,15 +2135,15 @@
chooseRightSection
();
e
.
preventDefault
();
// }
}
else
if
(
code
===
38
)
{
//
To
p
if
(
isPageNotShow
)
{
}
else
if
(
code
===
38
)
{
//
U
p
if
(
isPageNotShow
||
isDoubleView
)
{
choosePrevSection
();
e
.
preventDefault
();
}
else
{
scrollToThis
(
$pageBody
,
'
up
'
);
}
}
else
if
(
code
===
40
)
{
// Down
if
(
isPageNotShow
)
{
if
(
isPageNotShow
||
isDoubleView
)
{
chooseNextSection
();
e
.
preventDefault
();
}
...
...
@@ -2174,6 +2208,8 @@
});
}
initChangeView
();
// init code copy function
initCopyable
();
...
...
src/less/doc.less
浏览文件 @
b580ce63
...
...
@@ -2067,83 +2067,6 @@ body.page-show {
}
}
body.layout-classic {
#heading {
display: none
}
#navbar {
width: 400px;
left: 0;
top: 0;
padding: 10px 0;
margin-bottom: 0;
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
float: right;
margin-right: 0;
}
.navbar-collapse {
display: none!important;
&.in,
&.collapsing {
&:before {
right: 10px;
}
> .navbar-right {
float: none!important;
}
display: block!important;
width: 140px;
> .navbar-nav > li {
float: none;
}
}
}
}
#search {
padding: 0;
}
#header {
position: fixed;
left: 0;
top: 0;
height: 200px;
width: 400px;
padding-top: 60px;
}
#grid {
position: fixed;
top: 100px;
left: 0;
bottom: 0;
width: 400px;
}
}
body.layout-page {
padding-top: 60px;
overflow-y: auto;
#header {
height: auto!important
}
#page {
box-shadow: none;
&.loading {
#pageAttrs {
display: none
}
}
}
#pageBody {
position: relative;
top: auto!important;
bottom: auto!important
}
}
body[data-page="basic-theme"] {
@color-primary-inverse: contrast(@color-primary, #333, #fff);
@color-primary-dark: darken(@color-primary, 10%);
...
...
@@ -2170,3 +2093,335 @@ body[data-page="basic-theme"] {
}
}
}
#changeViewWrapper {display: none}
@media (min-width: 1200px) {
#changeViewWrapper {
display: block;
position: fixed;
top: 14px;
right: 15px;
z-index: 1030;
}
#changeViewBtn {
border-color: #fff;
background-color: rgba(0,0,0, .1);
border-color: rgba(0,0,0, 0);
padding: 5px;
min-width: 32px;
&:hover,
&:focus,
&:active {background-color: rgba(0,0,0, .2);}
}
body.view-double.compact-mode-in {
#changeViewBtn {
color: #666;
}
#navbar {
width: 360px;
left: 0;
top: 0;
padding: 10px 0!important;
margin-bottom: 0;
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
float: right;
margin-right: 0;
}
.navbar-collapse {
display: none!important;
&.in,
&.collapsing {
&:before {
right: 10px;
}
> .navbar-right {
float: none!important;
}
display: block!important;
width: 140px;
> .navbar-nav > li {
float: none;
}
}
}
#compactTogger,
.brand-title {display: none}
}
#headContainer {
position: absolute;
top: 0;
right: 0;
left: 0;
> .container {width: 100%!important}
}
#search {
padding: 0;
right: 60px;
width: 120px;
left: auto;
transition: width .2s;
}
#searchInput::placeholder {
color: transparent;
transition: color .2s;
}
&.input-query-focus {
#search {
width: 240px;
}
#navbar .zui-version {display: none}
#searchInput::placeholder {color: rgba(255, 255, 255, .5)}
}
#header {
position: fixed;
left: 0;
top: 0;
height: 60px;
width: 360px;
padding-top: 60px;
}
#grid {
position: fixed;
padding: 10px 0;
top: 60px;
margin-top: 0;
left: 0;
bottom: 0;
width: 360px;
opacity: 1!important;
transform: none!important;
border-right: 1px solid @color-gray-light;
overflow-y: auto;
> .container {
width: 100%!important;
.row > .col {width: 100%;}
}
.chapter {margin-bottom: 10px;}
.section-preview.icon-preview > .icons > .icon {
&.icon-10x {font-size: 70px;}
&.icon-5x {font-size: 42px;}
&.icon-2x {font-size: 28px;}
}
}
#pageCloseBtn {display: none}
#pageReloadBtn {right: 15px;}
#page {
display: block!important;
position: fixed;
left: 360px;
top: 0;
right: 0;
bottom: 0;
}
#pageHeader > .container {margin: 0 auto 0 15px;}
#pageBody > .container {margin: 0 auto 0 10px;}
> footer {
position: fixed;
left: 0;
bottom: 0;
width: 400px;
background: rgba(255,255,255,.5);
> .container {width: 100%!important;}
hr {display: none}
p {
margin: 0;
line-height: 20px;
height: 20px;
}
}
}
}
@keyframes scale-shape
{
0% {opacity: 0; transform: scale(0);}
20% {opacity: 1; transform: scale(1);}
100% {opacity: 1; transform: scale(1);}
}
#changeViewModal {
.modal-dialog {
max-width: 450px;
overflow: hidden;
}
.modal-body {padding: 0}
.view-shape {
position: absolute;
left: 20px;
top: 15px;
width: 120px;
height: 100px;
background-color: #fff;
border: 1px solid @color-gray-light;
}
.view-option-single {
.view-shape {
&:before,
&:after {
display: block;
content: ' ';
position: absolute;
top: 0;
right: 10px;
left: 10px;
}
&:before {
height: 10px;
background: @color-primary;
}
&:after {
top: 12px;
background: @color-gray-light;
bottom: 0;
}
.s-1 {
position: absolute;
top: 13px;
left: 11px;
right: 11px;
bottom: 0;
background: #fafafa;
z-index: 1;
&:before,
&:after {
display: block;
content: ' ';
position: absolute;
top: 5px;
right: 5px;
left: 5px;
height: 30px;
border-top: 5px solid #aaa;
border-bottom: 5px solid #bbb;
}
&:after {
top: 17px;
right: 30px;
border-color: #ccc;
}
}
}
}
.view-option-double {
.view-shape {
&:before,
&:after {
display: block;
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 40px;
}
&:before {
background: @color-primary;
height: 10px;
}
&:after {
top: 10px;
bottom: 0;
background: @color-gray-light;
}
.s-1 {
position: absolute;
top: 0;
left: 42px;
right: 0;
bottom: 0;
background: #fafafa;
z-index: 1;
&:before,
&:after {
display: block;
content: ' ';
position: absolute;
top: 5px;
right: 5px;
left: 5px;
height: 30px;
border-top: 5px solid #aaa;
border-bottom: 5px solid #bbb;
}
&:after {
top: 17px;
right: 30px;
border-color: #ccc;
}
}
}
}
.view-option {
padding: 15px;
padding-left: 160px;
display: block;
position: relative;
min-height: 130px;
cursor: pointer;
> .title {
font-size: 14px;
color: #333;
font-weight: bold;
margin-bottom: 5px;
opacity: .7;
}
&.active,
&:hover,
&:focus,
&:active {
background-color: @color-pale;
color: @color-primary;
text-decoration: none;
.view-shape .s-1 {
animation: scale-shape 2s infinite linear normal;
}
> .title {opacity: 1}
}
&.active {
background: @color-green-pale;
> .title:after {
content: '(当前)';
color: @color-green;
display: inline-block;
margin-left: 5px;
font-weight: normal;
}
}
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录