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 com..

Browse Source
This commit is contained in:
wlh
2015-01-07 22:49:23 +08:00
parent b690d5bdbf
commit e31afd76bb
14 changed files with 412 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
component/css/main.css
+21 -1
View File
@@ -12,6 +12,26 @@ header ul li{float:left;margin-right:25px;}
.item_list div:nth-child(4){background-color:#3498DB;}
.item_list div:nth-child(5){background-color:#0A64A4;}
.codeshow{position:absolute;top:70px;left:240px;/*border:1px solid red;*/min-height:400px;min-width:850px;}
.code{background-color:#272822;min-height:400px;width:570px;border:1px dashed #FFF;font-size:14px;}
.code{background-color:#272822;min-height:400px;min-width:570px;border:1px dashed #FFF;font-size:14px;}
.show{margin-left:10px;}
.hide{display:none;}
/*-----------------------------------------------------*/
#calendar{width:390px; height:300px;}
#calendar_info{margin-top:15px;background-color:#FFF;border-radius:3px;height:80px;border:1px solid #959695;}
#calendar_info span{margin-left:10px;}
#guid_textarea{width:350px;height:80px;resize:none;border-radius:3px;outline:none;padding-left:4px;border:1px solid #8FE4F5;}
#guid_genrator{height:24px;width:80px;border-radius:2px;line-height:24px;text-align:center;color:#fff;background-color:#2AA198;margin-top:5px;cursor:pointer;}
.cookie_text>div:first-child input{height:25px;border:1px solid #ccc;border-radius:3px;outline:none;padding-left:3px;}
.cookie_text>div:nth-child(2){height:24px;background-color: #2AA198;width:80px;color:#FFF;margin-top:5px;border-radius:3px;margin-left:45px;cursor:pointer;}
.cookie_text>div:nth-child(3){margin-top:10px;}
.cookie_text>div:nth-child(3)>textarea{height:190px;width:380px;margin-left:45px;border:1px solid #CCCCCC;resize:none;outline:none;border-radius:3px;}
#tip_avatar{margin-top:120px;margin-left:20px;}
.mask_div img{height:400px;}
component/img/avatar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

component/img/cookie.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

component/img/guid.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

component/img/guxiang.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 KiB

component/img/mask.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

component/img/tip.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

component/index.html
+65 -8
View File
@@ -2,13 +2,13 @@
<html>
<head>
<meta charset="utf-8" />
<title>动手写JS组件</title>
<title>JavaScript组件</title>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
</head>
<body>
<header>
<ul>
<li>首页</li>
<li>写个工具自己玩</li>
<li>GitHub</li>
<li>About</li>
</ul>
@@ -22,19 +22,76 @@
<div id="mask">mask</div>
</section>
<section class="codeshow">
<div id="code_calendar" class="code fl">
<section class="codeshow hide" id="calendar_codeshow">
<div class="code fl">
<img src="img/calendar.png"/>
</div>
<div id="show_calendar" class="show fl">
<div id="calendar" style="width:390px; height:300px;"></div>
<div style="margin-top:15px;background-color:#FFF;border-radius:3px;height:80px;border:1px solid #959695;">
<div class="show fl">
<div id="calendar"></div>
<div id="calendar_info">
<br/>
<span id="calendar_time" style="margin-left:10px;">点击日历上的日期试试</span>
<span id="calendar_time">点击日历上的日期试试</span>
</div>
</div>
</section>
<section class="codeshow hide" id="guid_codeshow">
<div class="code fl">
<img src="img/guid.png"/>
</div>
<div class="show fl">
<div>
<textarea id="guid_textarea"></textarea>
</div>
<div id="guid_genrator">创建GUID</div>
</div>
</section>
<section class="codeshow hide" id="cookie_codeshow">
<div class="code fl">
<img src="img/cookie.png"/>
</div>
<div class="show fl cookie_text">
<div>
name <input id="cookie_name" type="text" />
value <input id="cookie_value" type="text" />
</div>
<div id="setCookie">设置cookie</div>
<div>
<textarea id="allCookie"></textarea>
</div>
</div>
</section>
<section class="codeshow hide" id="tip_codeshow">
<div class="code fl">
<img src="img/tip.png"/>
</div>
<div class="show fl tip_div">
<div>
<div id="tip_avatar">
鼠标移动到这，将会显示头像
</div>
</div>
</div>
</section>
<section id="mask_codeshow" class="codeshow hide">
<div id="mask_container">
<div class="code fl">
<img src="img/mask.png"/>
</div>
<div class="show fl mask_div">
<img src="img/guxiang.png"/>
</div>
</div>
</section>
<script type="text/javascript" src="js/calendar.js" ></script>
<script type="text/javascript" src="js/guid.js" ></script>
<script type="text/javascript" src="js/cookie.js" ></script>
<script type="text/javascript" src="js/tip.js"></script>
<script type="text/javascript" src="js/mask.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
component/js/cookie.js
+96
View File
@@ -0,0 +1,96 @@
/*
* HTTP Cookie:存储会话信息
* 名称和值传送时必须是经过RUL编码的
* cookie绑定在指定的域名下，非本域无法共享cookie，但是可以是在主站共享cookie给子站
* cookie有一些限制：比如IE6 & IE6- 限定在20个；IE7 50个；Opear 30个...所以一般会根据【必须】需求才设定cookie
* cookie的名称不分大小写；同时建议将cookie URL编码；路径是区分cookie在不同情况下传递的好方式；带安全标志cookie
* 在SSL情况下发送到服务器端，http则不会。建议针对cookie设置expires、domain、 path；每个cookie小于4KB
* */
//对cookie的封装，采取getter、setter方式
'use strict';
(function(global){
//获取cookie对象，以对象表示
function getCookiesObj(){
var cookies = {};
if(document.cookie){
var objs = document.cookie.split('; ');
for(var i in objs){
var index = objs[i].indexOf('='),
name = objs[i].substr(0, index),
value = objs[i].substr(index + 1, objs[i].length);
cookies[name] = value;
}
}
return cookies;
}
//设置cookie
function set(name, value, opts){
//opts maxAge, path, domain, secure
if(name && value){
var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
//可选参数
if(opts){
if(opts.maxAge){
cookie += '; max-age=' + opts.maxAge;
}
if(opts.path){
cookie += '; path=' + opts.path;
}
if(opts.domain){
cookie += '; domain=' + opts.domain;
}
if(opts.secure){
cookie += '; secure';
}
}
document.cookie = cookie;
return cookie;
}else{
return '';
}
}
//获取cookie
function get(name){
return decodeURIComponent(getCookiesObj()[name]) || null;
}
//清除某个cookie
function remove(name){
if(getCookiesObj()[name]){
document.cookie = name + '=; max-age=0';
}
}
//清除所有cookie
function clear(){
var cookies = getCookiesObj();
for(var key in cookies){
document.cookie = key + '=; max-age=0';
}
}
//获取所有cookies
function getCookies(name){
return getCookiesObj();
}
//解决冲突
function noConflict(name){
if(name && typeof name === 'string'){
if(name && window['cookie']){
window[name] = window['cookie'];
delete window['cookie'];
return window[name];
}
}else{
return window['cookie'];
delete window['cookie'];
}
}
global['cookie'] = {
'getCookies': getCookies,
'set': set,
'get': get,
'remove': remove,
'clear': clear,
'noConflict': noConflict
};
})(window);
component/js/guid.js
+16
View File
@@ -0,0 +1,16 @@
/**
* Inspired from the book of JavaScript Patterns, Stoyan Stefanov.
* You can add some special value in this guid, such as user's email or nickname or id.
* @module guid for JavaScript client
*/
(function(exports){
exports.guid = {
'create': function(){
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
}).toUpperCase();
}
};
})(window);
component/js/highlight.js
-1
View File
File diff suppressed because one or more lines are too long
component/js/main.js
+109 -1
View File
@@ -1,17 +1,125 @@
(function(global){
var calendar_codeshow = document.getElementById('calendar_codeshow');
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 canlendar = new Calendar('calendar',new Date('2015-1'));
canlendar.showUI(function(date){
document.getElementById('calendar_time').innerHTML = date;
});
//GUID
var guid_textarea = document.getElementById('guid_textarea');
guid_textarea.value = guid.create();
//mask
new Mask('mask_container').show();
//tip
Tip('tip_avatar', {
content: '<img src="img/avatar.png"/>',
height: 200,
width:200
});
setShow('calendar_codeshow');
//初始化hash
var hash = window.location.hash;
if(hash){
switch(hash){
case '#calendar':
setShow('calendar_codeshow');
break;
case '#guid':
setShow('guid_codeshow');
break;
case '#cookie':
setShow('cookie_codeshow');
break;
case '#tip':
setShow('tip_codeshow');
break;
case '#mask':
setShow('mask_codeshow');
break;
default:
setShow('calendar_codeshow');
break;
}
}
document.getElementById('calendar_menu').onclick = function(){
window.location.hash = 'calendar';
setShow('calendar_codeshow');
};
//GUID
document.getElementById('guid').onclick = function(){
alert(11);
window.location.hash = 'guid';
setShow('guid_codeshow');
};
document.getElementById('guid_genrator').onclick = function(){
guid_textarea.value = guid.create();
};
//cookie
document.getElementById('cookie').onclick = function(){
window.location.hash = 'cookie';
setShow('cookie_codeshow');
};
document.getElementById('allCookie').value = JSON.stringify(cookie.getCookies());
document.getElementById('setCookie').onclick = function(){
var name = document.getElementById('cookie_name').value || '';
var value = document.getElementById('cookie_value').value || '';
if(name && value){
cookie.set(name, value);
}
document.getElementById('allCookie').value = JSON.stringify(cookie.getCookies());
};
document.getElementById('tip').onclick = function(){
window.location.hash = 'tip';
setShow('tip_codeshow');
};
document.getElementById('mask').onclick = function(){
window.location.hash = 'mask';
setShow('mask_codeshow');
};
//控制div的显示与隐藏
function setShow(name){
calendar_codeshow.style.display = 'none';
guid_codeshow.style.display = 'none';
cookie_codeshow.style.display = 'none';
tip_codeshow.style.display = 'none';
mask_codeshow.style.display = 'none';
switch(name){
case 'calendar_codeshow':
calendar_codeshow.style.display = 'block';
break;
case 'guid_codeshow':
guid_codeshow.style.display = 'block';
break;
case 'cookie_codeshow':
cookie_codeshow.style.display = 'block';
break;
case 'tip_codeshow':
tip_codeshow.style.display = 'block';
break;
case 'mask_codeshow':
mask_codeshow.style.display = 'block';
break;
default:
break;
}
};
})(this);
component/js/mask.js
+41
View File
@@ -0,0 +1,41 @@
/*
* 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);
var width = mask.offsetWidth;
var height = mask.offsetHeight;
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.zIndex = 300;
this.div.style.width = width + 'px';
this.div.style.height = height + 'px';
this.div.style.backgroundColor = '#000';
this.div.style.opacity = 0.5; // 考虑
//add other css, like backgroundColor、border...
if(otherCssObj){
for(var key in otherCssObj){
this.div.style[key] = otherCssObj[key];
}
}
mask.appendChild(this.div);
this.div.style.display = 'none';
};
Mask.prototype.show = function(){
this.div.style.display = 'block';
};
Mask.prototype.hide = function(){
this.div.style.display = 'none';
};
exports.Mask = Mask;
})(window);
component/js/tip.js
+64
View File
@@ -0,0 +1,64 @@
/*
* 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
* width: number, 宽度
* height: number, 高度
* backgroundColor: '#ccc', 背景颜色
* border:'1px solid blue', 边框
* offsetTop: number,
* offsetLeft: number,
* content: HTML string
* otherCSS: css text, is optional
* */
function Tip(id, opts, otherCSS){
var tipContainer = document.getElementById(id);
var tip = document.createElement('div');
//user define css property
tip.style.width = (opts && opts.width) ? (opts.width + 'px') : '150px';
tip.style.height = (opts && opts.height) ? (opts.height + 'px') : '100px';
tip.style.backgroundColor = (opts && opts.backgroundColor) ? opts.backgroundColor : '#DDD';
tip.style.border = (opts && opts.border) ? opts.border : '1px solid #CCC';
//offset
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';
//default css property
tip.style.zIndex = 100;
tip.style.position = 'absolute';
tip.style.display = 'none';
tip.innerHTML = opts.content;
//other css text
if(otherCSS){
tip.style.cssText = otherCSS;
}
//append to parent
tipContainer.appendChild(tip);
function show(){
tip.style.display = 'block';
}
function hide(){
tip.style.display = 'none';
}
if(!!tipContainer.addEventListener){
tipContainer.addEventListener('mouseenter', show);
tipContainer.addEventListener('mouseleave', hide);
}else if(!!tipContainer.attachEvent){
tipContainer.attachEvent('mouseenter', show);
tipContainer.attachEvent('mouseleave', hide);
}else{
tipContainer.onmouseenter = show;
tipContainer.onmouseleave = hide;
}
}
exports.Tip = Tip;
})(window);