Skip to content

Commit e3101cd

Browse files
frank-lamfrank-lam
authored
Merge pull request #1 from fullstack-tutorial/frank
Frank
2 parents d35eaa0 + bd61f0c commit e3101cd

12 files changed

+467
-36
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ This is a chrome extension that supports parsing articles on GitHub and generati
1010

1111
**like the rendering graphics below, this must make you very excited !**
1212

13-
![1543907190399](assets/1543907190399.png)
13+
![markdown-toc2](assets/markdown-toc.gif)
1414

1515

1616

‎assets/687474703a2f2f696d6167652e6c69757869616e616e2e636f6d2f3230313730362f32303137303632305f3139353034375f3939325f353636382e706e67.png

-39.6 KB
Binary file not shown.

‎assets/markdown-toc.gif

983 KB
Loading

‎markdown-toc-code/css/content.css

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,40 @@
1616
#panel ul li a{
1717
display: block;
1818
text-overflow: ellipsis;
19-
}
19+
}
20+
21+
/* 目录栏的样式 */
22+
.div_toc{
23+
width: -webkit-calc(100% - 10px);
24+
height: 100%;
25+
float: left;
26+
padding: 20px;
27+
overflow: auto;
28+
overflow-x: hidden;
29+
background-color: #fafbfc;
30+
border: 1px solid #d1d5da;
31+
32+
}
33+
34+
.div_right_bar{
35+
width: 10px;
36+
height: 100%;
37+
background-color: white;
38+
cursor: e-resize;
39+
float: left;
40+
}
41+
42+
.toc{
43+
position: fixed;
44+
width: 400px;
45+
min-height: 200px;
46+
z-index: 999;
47+
48+
left: 10px;
49+
top: 70px;
50+
border-radius: 3px;
51+
height: 85%;
52+
bottom: 100px;
53+
float: left;
54+
}
55+

‎markdown-toc-code/demo.html

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2+
<html style="height:100%;">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<title>div width resize</title>
7+
<!--引用jquery-->
8+
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
9+
<script type="text/javascript">
10+
11+
12+
function bindResize(el) {
13+
//初始化参数
14+
var els = document.getElementById('div_toc').style;
15+
//鼠标的 X 和 Y 轴坐标
16+
x = 0;
17+
//邪恶的食指
18+
$(el).mousedown(function (e) {
19+
//按下元素后，计算当前鼠标与对象计算后的坐标
20+
x = e.clientX - el.offsetWidth - $("#div_toc").width();
21+
//在支持 setCapture 做些东东
22+
el.setCapture ? (
23+
//捕捉焦点
24+
el.setCapture(),
25+
//设置事件
26+
el.onmousemove = function (ev) {
27+
mouseMove(ev || event);
28+
},
29+
el.onmouseup = mouseUp
30+
) : (
31+
//绑定事件
32+
$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
33+
);
34+
//防止默认事件发生
35+
e.preventDefault();
36+
});
37+
//移动事件
38+
function mouseMove(e) {
39+
//宇宙超级无敌运算中...
40+
els.width = e.clientX - x + 'px';
41+
}
42+
//停止事件
43+
function mouseUp() {
44+
//在支持 releaseCapture 做些东东
45+
el.releaseCapture ? (
46+
//释放焦点
47+
el.releaseCapture(),
48+
//移除事件
49+
el.onmousemove = el.onmouseup = null
50+
) : (
51+
//卸载事件
52+
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
53+
);
54+
}
55+
}
56+
function divResize(){
57+
var totalHeight = window.screen.height;
58+
console.log(totalHeight);
59+
// document.getElementById("div_toc").height = totalHeight + "px";
60+
document.getElementById("div_toc").height = "100%";
61+
document.getElementById("div_right_bar").height = "100%";
62+
}
63+
$(function () {
64+
// divResize();
65+
// $(window).resize(divResize);
66+
bindResize(document.getElementById('div_right_bar'));
67+
});
68+
</script>
69+
<style type="text/css">
70+
71+
#toc{
72+
position: fixed;
73+
height: 85%;
74+
}
75+
#div_toc{
76+
float: left;
77+
width: 400px;
78+
height: 100%;
79+
min-height: 200px;
80+
z-index: 999;
81+
background-color: #fafbfc;
82+
border: 1px solid #d1d5da;
83+
padding: 20px;
84+
overflow-x: hidden;
85+
left: 10px;
86+
border-radius: 3px;
87+
overflow: auto;
88+
float: left;
89+
}
90+
#div_right_bar{
91+
height: 100%;
92+
width: 1px;
93+
background: #cccccc;
94+
cursor: e-resize;
95+
float: left;
96+
}
97+
98+
</style>
99+
</head>
100+
101+
<body>
102+
<div id="toc">
103+
<div id="div_toc">待拖拽</div>
104+
<div id="div_right_bar">bar</div>
105+
</div>
106+
</body>
107+
108+
</html>

‎markdown-toc-code/demo2.html

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2+
<html style="height:100%;">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<title>div width resize</title>
7+
<!--引用jquery-->
8+
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
9+
<script type="text/javascript">
10+
11+
12+
// 这里是绑定resize事件的方法
13+
function bindResize(el) {
14+
//初始化参数
15+
var els = document.getElementById('div_toc').style;
16+
17+
//鼠标的 X 和 Y 轴坐标
18+
x = 0;
19+
20+
//邪恶的食指
21+
el.onmousedown = function(e){
22+
//按下元素后，计算当前鼠标与对象计算后的坐标
23+
24+
x = e.clientX - el.offsetWidth,
25+
y = e.clientY - el.offsetHeight;
26+
console.log(x);
27+
//在支持 setCapture 做些东东
28+
el.setCapture ? (
29+
//捕捉焦点
30+
el.setCapture(),
31+
//设置事件
32+
el.onmousemove = function (ev)
33+
{
34+
mouseMove(ev || event);
35+
},
36+
el.onmouseup = mouseUp
37+
) : (
38+
function(){
39+
document.addEventListener('mousemove',mouseMove,false);
40+
document.addEventListener('mouseup',mouseUp,false);
41+
}()
42+
);
43+
//防止默认事件发生
44+
e.preventDefault();
45+
}
46+
47+
//移动事件
48+
function mouseMove(e) {
49+
//宇宙超级无敌运算中...
50+
els.width = e.clientX - x + 'px';
51+
}
52+
//停止事件
53+
function mouseUp() {
54+
//在支持 releaseCapture 做些东东
55+
el.releaseCapture ? (
56+
//释放焦点
57+
el.releaseCapture(),
58+
//移除事件
59+
el.onmousemove = el.onmouseup = null
60+
) : (
61+
function(){
62+
document.removeEventListener("mousemove", mouseMove);
63+
document.removeEventListener("mouseup", mouseUp);
64+
}()
65+
//卸载事件
66+
// 这里也需要改写，你帮我看下啊。这样对吗？1
67+
68+
);
69+
}
70+
}
71+
setTimeout(function () {
72+
bindResize(document.getElementById('div_right_bar'));
73+
}, 1000)
74+
75+
</script>
76+
<style type="text/css">
77+
78+
#toc{
79+
position: fixed;
80+
height: 85%;
81+
}
82+
#div_toc{
83+
float: left;
84+
width: 400px;
85+
height: 100%;
86+
min-height: 200px;
87+
z-index: 999;
88+
background-color: #fafbfc;
89+
border: 1px solid #d1d5da;
90+
padding: 20px;
91+
overflow-x: hidden;
92+
left: 10px;
93+
border-radius: 3px;
94+
overflow: auto;
95+
float: left;
96+
}
97+
#div_right_bar{
98+
height: 100%;
99+
width: 1px;
100+
background: #cccccc;
101+
cursor: e-resize;
102+
float: left;
103+
}
104+
105+
</style>
106+
</head>
107+
108+
<body>
109+
<div id="toc">
110+
<div id="div_toc">待拖拽</div>
111+
<div id="div_right_bar">bar</div>
112+
</div>
113+
</body>
114+
115+
</html>

‎markdown-toc-code/demo3.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2+
<html style="height:100%;">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<title>div width resize</title>
7+
<!--引用jquery-->
8+
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
9+
<script type="text/javascript">
10+
11+
function bindResize(el) {
12+
//初始化参数
13+
var els = document.getElementById('div_toc').style;
14+
//鼠标的 X 和 Y 轴坐标
15+
x = 0;
16+
//邪恶的食指
17+
$(el).mousedown(function (e) {
18+
//按下元素后，计算当前鼠标与对象计算后的坐标
19+
x = e.clientX - el.offsetWidth - $("#div_toc").width();
20+
//在支持 setCapture 做些东东
21+
el.setCapture ? (
22+
//捕捉焦点
23+
el.setCapture(),
24+
//设置事件
25+
el.onmousemove = function (ev) {
26+
mouseMove(ev || event);
27+
},
28+
el.onmouseup = mouseUp
29+
) : (
30+
//绑定事件
31+
$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
32+
);
33+
//防止默认事件发生
34+
e.preventDefault();
35+
});
36+
//移动事件
37+
function mouseMove(e) {
38+
//宇宙超级无敌运算中...
39+
els.width = e.clientX - x + 'px';
40+
}
41+
//停止事件
42+
function mouseUp() {
43+
//在支持 releaseCapture 做些东东
44+
el.releaseCapture ? (
45+
//释放焦点
46+
el.releaseCapture(),
47+
//移除事件
48+
el.onmousemove = el.onmouseup = null
49+
) : (
50+
//卸载事件
51+
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
52+
);
53+
}
54+
}
55+
// function divResize(){
56+
// var totalHeight = window.screen.height;
57+
// console.log(totalHeight);
58+
// // document.getElementById("div_toc").height = totalHeight + "px";
59+
// document.getElementById("div_toc").height = "100%";
60+
// document.getElementById("div_right_bar").height = "100%";
61+
// }
62+
$(function () {
63+
// divResize();
64+
// $(window).resize(divResize);
65+
bindResize(document.getElementById('div_right_bar'));
66+
});
67+
</script>
68+
<style type="text/css">
69+
70+
#toc{
71+
position: fixed;
72+
height: 85%;
73+
}
74+
#div_toc{
75+
float: left;
76+
width: 400px;
77+
height: 100%;
78+
min-height: 200px;
79+
z-index: 999;
80+
background-color: #fafbfc;
81+
border: 1px solid #d1d5da;
82+
padding: 20px;
83+
overflow-x: hidden;
84+
left: 10px;
85+
border-radius: 3px;
86+
overflow: auto;
87+
float: left;
88+
}
89+
#div_right_bar{
90+
height: 100%;
91+
width: 1px;
92+
background: #cccccc;
93+
cursor: e-resize;
94+
float: left;
95+
}
96+
97+
</style>
98+
</head>
99+
100+
<body>
101+
<div id="toc">
102+
<div id="div_toc">待拖拽</div>
103+
<div id="div_right_bar">bar</div>
104+
</div>
105+
</body>
106+
107+
</html>

‎markdown-toc-code/js/background.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ function claaback(){
77
chrome.runtime.onMessage.addEventListener(bk);
88
function bk(){
99
console.log("hello")
10-
}
10+
}
11+

0 commit comments

Comments
 (0)