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/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);