diff --git a/component/css/main.css b/component/css/main.css index e7acc65..12f5f5a 100644 --- a/component/css/main.css +++ b/component/css/main.css @@ -15,6 +15,7 @@ header ul li{float:left;margin-right:25px;} .code{background-color:#272822;min-height:400px;min-width:570px;border:1px dashed #FFF;font-size:14px;} .show{margin-left:10px;} .hide{display:none;} +a{color:#FFF;text-decoration:none;} /*-----------------------------------------------------*/ #calendar{width:390px; height:300px;} diff --git a/component/index.html b/component/index.html index 9149e28..6461c2a 100644 --- a/component/index.html +++ b/component/index.html @@ -2,15 +2,14 @@ - JavaScript组件 + 写一些工具类或者效果
@@ -76,16 +75,18 @@ -
-
-
- +
+
+
+
+ +
+
+ +
-
- -
-
-
+ + diff --git a/component/js/main.js b/component/js/main.js index 9e357a1..34ce09e 100644 --- a/component/js/main.js +++ b/component/js/main.js @@ -3,7 +3,7 @@ var guid_codeshow = document.getElementById('guid_codeshow'); var cookie_codeshow = document.getElementById('cookie_codeshow'); var tip_codeshow = document.getElementById('tip_codeshow'); - var mask_codeshow = document.getElementById('mask_codeshow'); + var mask_container = document.getElementById('mask_container'); //日历 var canlendar = new Calendar('calendar',new Date('2015-1')); @@ -42,7 +42,7 @@ setShow('tip_codeshow'); break; case '#mask': - setShow('mask_codeshow'); + setShow('mask_container'); break; default: setShow('calendar_codeshow'); @@ -86,7 +86,7 @@ document.getElementById('mask').onclick = function(){ window.location.hash = 'mask'; - setShow('mask_codeshow'); + setShow('mask_container'); }; @@ -97,7 +97,7 @@ guid_codeshow.style.display = 'none'; cookie_codeshow.style.display = 'none'; tip_codeshow.style.display = 'none'; - mask_codeshow.style.display = 'none'; + mask_container.style.display = 'none'; switch(name){ case 'calendar_codeshow': @@ -112,8 +112,8 @@ case 'tip_codeshow': tip_codeshow.style.display = 'block'; break; - case 'mask_codeshow': - mask_codeshow.style.display = 'block'; + case 'mask_container': + mask_container.style.display = 'block'; break; default: break; diff --git a/component/js/mask.js b/component/js/mask.js index cdc90e6..9801fca 100644 --- a/component/js/mask.js +++ b/component/js/mask.js @@ -1,7 +1,4 @@ -/* - * Mask: You can use the function in your project, - * when don't want the user to pay attention to inside information of DIV. - */ + (function(exports){ var Mask = function(id/*target element id*/, otherCssObj /*is a json obj, like css text*/){ var mask = document.getElementById(id); @@ -10,8 +7,8 @@ this.div = document.createElement('div'); this.div.style.position = 'absolute'; - this.div.style.left = mask.offsetLeft + 'px'; - this.div.style.top = mask.offsetTop + 'px'; +// this.div.style.left = mask.offsetLeft + 'px'; +// this.div.style.top = mask.offsetTop + 'px'; this.div.style.zIndex = 300; this.div.style.width = width + 'px'; this.div.style.height = height + 'px'; diff --git a/component/js/tip.js b/component/js/tip.js index d9c0f32..0e23d02 100644 --- a/component/js/tip.js +++ b/component/js/tip.js @@ -1,9 +1,4 @@ -/* - * tip: when mouse over a element, will be show a tip(detail div) - * For example: - * when mouse over a user's avatar, will be show some user's infomation in tip. - * Later, I will apply it to the project of OurTimes. - * */ + (function(exports){ /* id: target element id * opts: json obj, is optional @@ -28,8 +23,9 @@ var left = (opts && opts.offsetLeft) ? (tipContainer.offsetLeft - opts.offsetLeft): tipContainer.offsetLeft; var top = (opts && opts.offsetTop) ? (tipContainer.offsetTop - opts.offsetTop): tipContainer.offsetTop; //modify? - tip.style.left = left + 'px'; - tip.style.top = (top + tipContainer.offsetHeight) + 'px'; + // 当时float div时，删除下面两句代码 + //tip.style.left = left + 'px'; + //tip.style.top = (top + tipContainer.offsetHeight) + 'px'; //default css property tip.style.zIndex = 100; tip.style.position = 'absolute';