Commits

Jiyin Yiyong  committed 45c4be9

demo

  • Participants

Comments (0)

Files changed (8)

+
+cd `dirname $0`
+echo '-- start watching'
+
+coffee -o page/ -wbc src/*coffee &
+jade -O page/ -wP src/*jade &
+stylus -o page -w src/*styl &
+doodle page/ &
+
+read
+
+pkill -f jade
+pkill -f stylus
+pkill -f coffee
+pkill -f doodle
+
+echo '-- stop watching'

File page/demo.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>site-nav</title>
+    <script src="../lib/jquery-1.8.2.min.js"></script>
+    <script src="site-nav.js"></script>
+    <link rel="stylesheet" href="site-nav.css">
+  </head>
+  <body>
+    <p>nothing will be here</p>
+  </body>
+</html>

File page/site-nav.css

+#site-nav {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  border: 2px solid #d1d1fa;
+  border-right: 0px;
+  background: #fefbf5;
+  padding: 10px;
+  border-radius: 8px 0px 0px 8px;
+  font-family: "microsoft yahei", Sawasdee;
+  font-size: 20px;
+  position: absolute;
+  right: 0px;
+  top: 100px;
+  width: 20px;
+  overflow-x: hidden;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+#site-nav:hover {
+  width: 100px;
+}
+#site-nav a {
+  text-decoration: none;
+  white-space: nowrap;
+  color: #a3a3f5;
+}
+#site-nav p {
+  margin: 0px;
+}
+#site-nav p:hover a {
+  color: #3d3663;
+}

File page/site-nav.js

+// Generated by CoffeeScript 1.4.0
+var site_nav;
+
+site_nav = function() {
+  var data, nav, query, show, table;
+  query = function(str) {
+    return document.querySelector(str);
+  };
+  show = function(obj) {
+    return console.log(obj);
+  };
+  data = {
+    "精弘": "http://www.zjut.com/",
+    "BBS": 'http://bbs.zjut.com/',
+    "Feel": 'http://feel.zjut.com/',
+    "Mirror": 'http://mirror.zjut.com/',
+    "Go": 'http://go.zjut.com/',
+    "Mail": "http://mail.zjut.com/index.php",
+    "Down": "http://down.zjut.com/",
+    "PT": "http://pt.zjut.com/login.php",
+    "Apps": 'http://s.zjut.in/app-nav/page/'
+  };
+  table = function() {
+    var key, str, value;
+    str = "";
+    for (key in data) {
+      value = data[key];
+      str += "<p><a href='" + value + "' target='_blank'>" + key + "</a></p>";
+    }
+    return str;
+  };
+  nav = document.createElement('div');
+  nav.setAttribute('id', 'site-nav');
+  nav.innerHTML = table();
+  return document.body.appendChild(nav);
+};
+
+window.onload = site_nav;

File pic/cross.png

Added
New image

File src/demo.jade

+
+doctype 5
+html
+  head
+    meta(charset='utf-8')
+    title site-nav
+    script(src='site-nav.js')
+    //- script(src='http://192.168.1.103:7777/doodle.js')
+    link(rel='stylesheet',href='site-nav.css')
+  body
+    p nothing will be here

File src/site-nav.coffee

+
+site_nav = ->
+
+  query = (str) -> document.querySelector str
+  show = (obj) -> console.log obj
+
+  data =
+    "精弘": "http://www.zjut.com/"
+    "BBS": 'http://bbs.zjut.com/'
+    "Feel": 'http://feel.zjut.com/'
+    "Mirror": 'http://mirror.zjut.com/'
+    "Go": 'http://go.zjut.com/'
+    "Mail": "http://mail.zjut.com/index.php"
+    "Down": "http://down.zjut.com/"
+    "PT": "http://pt.zjut.com/login.php"
+    "Apps": 'http://s.zjut.in/app-nav/page/'
+
+  table = ->
+    str = ""
+
+    for key, value of data
+      str += "<p><a href='#{value}' target='_blank'>#{key}</a></p>"
+
+    str
+
+  nav = document.createElement 'div'
+  nav.setAttribute 'id', 'site-nav'
+  nav.innerHTML = table()
+  document.body.appendChild nav
+
+window.onload = site_nav

File src/site-nav.styl

+
+#site-nav
+  box-sizing border-box
+  -moz-box-sizing border-box
+
+  border 2px solid hsl(240,80,90)
+  border-right 0px
+  background hsl(40,90,98)
+  padding 10px
+  border-radius 8px 0px 0px 8px
+  font-family "microsoft yahei", Sawasdee
+  font-size 20px
+  position absolute
+  right 0px
+  top 100px
+  width 20px
+  overflow-x hidden
+  -webkit-transition-duration 0.3s
+  -moz-transition-duration 0.3s
+  -o-transition-duration 0.3s
+  transition-duration 0.3s
+
+  &:hover
+    width 100px
+
+  a
+    text-decoration none
+    white-space nowrap
+    color hsl(240,80,80)
+
+  p
+    margin 0px
+
+    &:hover a
+      color hsl(250,30,30)