wushenghua/vczero.github.io
1
0
Fork 0
mirror of https://github.com/wu736139669/vczero.github.io.git synced 2026-08-05 06:23:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

add demo

Browse Source
This commit is contained in:
wlh
2015-01-08 21:53:48 +08:00
parent e31afd76bb
commit b4f751bb8a
5 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
component/css/main.css
+1
View File
@@ -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;}
component/index.html
+7 -6
View File
@@ -2,15 +2,14 @@
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript组件</title>
<title>写一些工具类或者效果</title>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
</head>
<body>
<header>
<ul>
<li>写个工具自己玩</li>
<li>GitHub</li>
<li>About</li>
<li>纯属自己玩</li>
<li><a href="https://github.com/vczero/component">GitHub</a></li>
</ul>
</header>
@@ -76,8 +75,9 @@
</div>
</section>
<section id="mask_codeshow" class="codeshow hide">
<div id="mask_container">
<div id="mask_container" style="width:846px;height:400px;position:absolute;top:70px;left:240px;">
<section id="mask_codeshow">
<div>
<div class="code fl">
<img src="img/mask.png"/>
</div>
@@ -86,6 +86,7 @@
</div>
</div>
</section>
</div>
<script type="text/javascript" src="js/calendar.js" ></script>
<script type="text/javascript" src="js/guid.js" ></script>
component/js/main.js
+6 -6
View File
@@ -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;
component/js/mask.js
+3 -6
View File
@@ -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';
component/js/tip.js
+4 -8
View File
@@ -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';