fullstack-tutorial · frank-lam · Dec 5, 2018 · Dec 5, 2018 · Dec 5, 2018 · Dec 5, 2018
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ This is a chrome extension that supports parsing articles on GitHub and generati
 
 **like the rendering graphics below, this must make you very excited !**
 
-![1543907190399](assets/1543907190399.png)
+![markdown-toc2](assets/markdown-toc.gif)
 
 
 

diff --git a/...f6d2f3230313730362f32303137303632305f3139353034375f3939325f353636382e706e67.png b/...f6d2f3230313730362f32303137303632305f3139353034375f3939325f353636382e706e67.png
diff --git a/assets/markdown-toc.gif b/assets/markdown-toc.gif
diff --git a/markdown-toc-code/css/content.css b/markdown-toc-code/css/content.css
@@ -16,4 +16,40 @@
 #panel ul li a{
 	display: block;
 	text-overflow: ellipsis;
-}
+}
+
+/* 目录栏的样式 */
+.div_toc{
+	width: -webkit-calc(100% - 10px);
+	height: 100%;
+	float: left;
+	padding: 20px;
+	overflow: auto;
+	overflow-x: hidden;
+	background-color: #fafbfc;
+	border: 1px solid #d1d5da;
+
+}
+
+.div_right_bar{
+	width: 10px; 
+	height: 100%;
+	background-color: white; 
+	cursor: e-resize; 
+	float: left;
+}
+
+.toc{
+	position: fixed;
+	width: 400px;
+	min-height: 200px;
+	z-index: 999;
+
+	left: 10px;
+	top: 70px;
+	border-radius: 3px;
+	height: 85%;
+	bottom: 100px;
+	float: left;
+}
+
diff --git a/markdown-toc-code/demo.html b/markdown-toc-code/demo.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html style="height:100%;">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>div width resize</title>
+    <!--引用jquery-->
+    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
+    <script type="text/javascript">
+
+
+        function bindResize(el) {
+            //初始化参数
+            var els = document.getElementById('div_toc').style;
+            //鼠标的 X 和 Y 轴坐标
+            x = 0;
+            //邪恶的食指
+            $(el).mousedown(function (e) {
+                //按下元素后，计算当前鼠标与对象计算后的坐标
+                x = e.clientX - el.offsetWidth - $("#div_toc").width();
+                //在支持 setCapture 做些东东
+                el.setCapture ? (
+                    //捕捉焦点
+                    el.setCapture(),
+                    //设置事件
+                    el.onmousemove = function (ev) {
+                        mouseMove(ev || event);
+                    },
+                    el.onmouseup = mouseUp
+                ) : (
+                        //绑定事件
+                        $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
+                    );
+                //防止默认事件发生
+                e.preventDefault();
+            });
+            //移动事件
+            function mouseMove(e) {
+                //宇宙超级无敌运算中...
+                els.width = e.clientX - x + 'px';
+            }
+            //停止事件
+            function mouseUp() {
+                //在支持 releaseCapture 做些东东
+                el.releaseCapture ? (
+                    //释放焦点
+                    el.releaseCapture(),
+                    //移除事件
+                    el.onmousemove = el.onmouseup = null
+                ) : (
+                        //卸载事件
+                        $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
+                    );
+            }
+        }
+        function divResize(){
+            var totalHeight = window.screen.height;
+            console.log(totalHeight);
+            // document.getElementById("div_toc").height = totalHeight + "px";
+            document.getElementById("div_toc").height = "100%";
+            document.getElementById("div_right_bar").height = "100%";
+        }
+        $(function () {
+            // divResize();
+            // $(window).resize(divResize);
+            bindResize(document.getElementById('div_right_bar'));
+        });
+    </script>
+    <style type="text/css">
+
+        #toc{
+            position: fixed;
+            height: 85%;
+        }
+        #div_toc{
+            float: left;
+            width: 400px;
+            height: 100%;
+            min-height: 200px;
+            z-index: 999;
+            background-color: #fafbfc;
+            border: 1px solid #d1d5da;
+            padding: 20px;
+            overflow-x: hidden;
+            left: 10px;
+            border-radius: 3px;
+            overflow: auto;
+            float: left;
+        }
+        #div_right_bar{
+            height: 100%;
+            width: 1px; 
+            background: #cccccc; 
+            cursor: e-resize; 
+            float: left;
+        }
+
+    </style>
+</head>
+
+<body>
+    <div id="toc">
+        <div id="div_toc">待拖拽</div>
+        <div id="div_right_bar">bar</div>
+    </div>
+</body>
+
+</html>
diff --git a/markdown-toc-code/demo2.html b/markdown-toc-code/demo2.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html style="height:100%;">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>div width resize</title>
+    <!--引用jquery-->
+    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
+    <script type="text/javascript">
+
+
+// 这里是绑定resize事件的方法
+function bindResize(el) {
+    //初始化参数
+    var els = document.getElementById('div_toc').style;
+
+    //鼠标的 X 和 Y 轴坐标
+    x = 0;
+
+     //邪恶的食指
+    el.onmousedown = function(e){
+        //按下元素后，计算当前鼠标与对象计算后的坐标
+
+        x = e.clientX - el.offsetWidth,
+        y = e.clientY - el.offsetHeight;
+        console.log(x);
+        //在支持 setCapture 做些东东
+        el.setCapture ? (
+        //捕捉焦点
+            el.setCapture(),
+        //设置事件
+            el.onmousemove = function (ev)
+            {
+                mouseMove(ev || event);
+            },
+            el.onmouseup = mouseUp
+        ) : (
+            function(){
+                document.addEventListener('mousemove',mouseMove,false);
+                document.addEventListener('mouseup',mouseUp,false);
+            }()
+        );
+        //防止默认事件发生
+        e.preventDefault();
+    }
+
+    //移动事件
+    function mouseMove(e) {
+        //宇宙超级无敌运算中...
+        els.width = e.clientX - x + 'px';
+    }
+    //停止事件
+    function mouseUp() {
+        //在支持 releaseCapture 做些东东
+        el.releaseCapture ? (
+            //释放焦点
+            el.releaseCapture(),
+            //移除事件
+            el.onmousemove = el.onmouseup = null
+        ) : (
+                function(){
+                    document.removeEventListener("mousemove", mouseMove);
+                    document.removeEventListener("mouseup", mouseUp);
+                }()
+                //卸载事件
+                // 这里也需要改写，你帮我看下啊。这样对吗？1
+
+            );
+    }
+}
+        setTimeout(function () {
+            bindResize(document.getElementById('div_right_bar'));
+        }, 1000)
+
+    </script>
+    <style type="text/css">
+
+        #toc{
+            position: fixed;
+            height: 85%;
+        }
+        #div_toc{
+            float: left;
+            width: 400px;
+            height: 100%;
+            min-height: 200px;
+            z-index: 999;
+            background-color: #fafbfc;
+            border: 1px solid #d1d5da;
+            padding: 20px;
+            overflow-x: hidden;
+            left: 10px;
+            border-radius: 3px;
+            overflow: auto;
+            float: left;
+        }
+        #div_right_bar{
+            height: 100%;
+            width: 1px; 
+            background: #cccccc; 
+            cursor: e-resize; 
+            float: left;
+        }
+
+    </style>
+</head>
+
+<body>
+    <div id="toc">
+        <div id="div_toc">待拖拽</div>
+        <div id="div_right_bar">bar</div>
+    </div>
+</body>
+
+</html>
diff --git a/markdown-toc-code/demo3.html b/markdown-toc-code/demo3.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html style="height:100%;">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>div width resize</title>
+    <!--引用jquery-->
+    <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
+    <script type="text/javascript">
+
+        function bindResize(el) {
+            //初始化参数
+            var els = document.getElementById('div_toc').style;
+            //鼠标的 X 和 Y 轴坐标
+            x = 0;
+            //邪恶的食指
+            $(el).mousedown(function (e) {
+                //按下元素后，计算当前鼠标与对象计算后的坐标
+                x = e.clientX - el.offsetWidth - $("#div_toc").width();
+                //在支持 setCapture 做些东东
+                el.setCapture ? (
+                    //捕捉焦点
+                    el.setCapture(),
+                    //设置事件
+                    el.onmousemove = function (ev) {
+                        mouseMove(ev || event);
+                    },
+                    el.onmouseup = mouseUp
+                ) : (
+                        //绑定事件
+                        $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
+                    );
+                //防止默认事件发生
+                e.preventDefault();
+            });
+            //移动事件
+            function mouseMove(e) {
+                //宇宙超级无敌运算中...
+                els.width = e.clientX - x + 'px';
+            }
+            //停止事件
+            function mouseUp() {
+                //在支持 releaseCapture 做些东东
+                el.releaseCapture ? (
+                    //释放焦点
+                    el.releaseCapture(),
+                    //移除事件
+                    el.onmousemove = el.onmouseup = null
+                ) : (
+                        //卸载事件
+                        $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
+                    );
+            }
+        }
+        // function divResize(){
+        //     var totalHeight = window.screen.height;
+        //     console.log(totalHeight);
+        //     // document.getElementById("div_toc").height = totalHeight + "px";
+        //     document.getElementById("div_toc").height = "100%";
+        //     document.getElementById("div_right_bar").height = "100%";
+        // }
+        $(function () {
+            // divResize();
+            // $(window).resize(divResize);
+            bindResize(document.getElementById('div_right_bar'));
+        });
+    </script>
+    <style type="text/css">
+
+        #toc{
+            position: fixed;
+            height: 85%;
+        }
+        #div_toc{
+            float: left;
+            width: 400px;
+            height: 100%;
+            min-height: 200px;
+            z-index: 999;
+            background-color: #fafbfc;
+            border: 1px solid #d1d5da;
+            padding: 20px;
+            overflow-x: hidden;
+            left: 10px;
+            border-radius: 3px;
+            overflow: auto;
+            float: left;
+        }
+        #div_right_bar{
+            height: 100%;
+            width: 1px; 
+            background: #cccccc; 
+            cursor: e-resize; 
+            float: left;
+        }
+
+    </style>
+</head>
+
+<body>
+    <div id="toc">
+        <div id="div_toc">待拖拽</div>
+        <div id="div_right_bar">bar</div>
+    </div>
+</body>
+
+</html>
diff --git a/markdown-toc-code/js/background.js b/markdown-toc-code/js/background.js
@@ -7,4 +7,5 @@ function claaback(){
 chrome.runtime.onMessage.addEventListener(bk);
 function bk(){
 	console.log("hello")
-}
+}
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,7 +10,7 @@ This is a chrome extension that supports parsing articles on GitHub and generati

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

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



Expand Down