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 component

Browse Source
This commit is contained in:
wlh
2015-01-06 23:50:34 +08:00
parent c1c3402efa
commit b690d5bdbf
405 changed files with 332 additions and 27950 deletions
Download Patch File Download Diff File Expand all files Collapse all files
component/.project
+37
View File
@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>component</name>
<comment>Create By HBuilder</comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
</natures>
<filteredResources>
<filter>
<id>1420554096649</id>
<name></name>
<type>10</type>
<matcher>
<id>org.eclipse.ui.ide.orFilterMatcher</id>
<arguments>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-projectRelativePath-matches-false-false-bin</arguments>
</matcher>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-projectRelativePath-matches-false-false-setting</arguments>
</matcher>
</arguments>
</matcher>
</filter>
</filteredResources>
</projectDescription>
component/css/highlight.css
+1
View File
@@ -0,0 +1 @@
.hljs{display:block;padding:.5em;background:#002b36;color:#839496}.hljs-comment,.hljs-template_comment,.diff .hljs-header,.hljs-doctype,.hljs-pi,.lisp .hljs-string,.hljs-javadoc{color:#586e75}.hljs-keyword,.hljs-winutils,.method,.hljs-addition,.css .hljs-tag,.hljs-request,.hljs-status,.nginx .hljs-title{color:#859900}.hljs-number,.hljs-command,.hljs-string,.hljs-tag .hljs-value,.hljs-rules .hljs-value,.hljs-phpdoc,.tex .hljs-formula,.hljs-regexp,.hljs-hexcolor,.hljs-link_url{color:#2aa198}.hljs-title,.hljs-localvars,.hljs-chunk,.hljs-decorator,.hljs-built_in,.hljs-identifier,.vhdl .hljs-literal,.hljs-id,.css .hljs-function{color:#268bd2}.hljs-attribute,.hljs-variable,.lisp .hljs-body,.smalltalk .hljs-number,.hljs-constant,.hljs-class .hljs-title,.hljs-parent,.haskell .hljs-type,.hljs-link_reference{color:#b58900}.hljs-preprocessor,.hljs-preprocessor .hljs-keyword,.hljs-pragma,.hljs-shebang,.hljs-symbol,.hljs-symbol .hljs-string,.diff .hljs-change,.hljs-special,.hljs-attr_selector,.hljs-subst,.hljs-cdata,.clojure .hljs-title,.css .hljs-pseudo,.hljs-header{color:#cb4b16}.hljs-deletion,.hljs-important{color:#dc322f}.hljs-link_label{color:#6c71c4}.tex .hljs-formula{background:#073642}
component/css/main.css
+17
View File
@@ -0,0 +1,17 @@
html body{margin: 0;background-color:#F8F8F8;}
.fl{float:left;} .fr{float: right;}
body{width:100%;height:100%;font-family: georgia,"微软雅黑";}
header{height:35px;width:100%;background-color:#222222;margin-top:-15px;}
header ul{list-style:none;margin-left:10px;color:#CCCCCC;line-height:35px; font-size:14px;}
header ul li{float:left;margin-right:25px;}
.item_list{position:absolute;top:70px;width:200px;left:10px;color:#fff;}
.item_list div{height:50px;line-height:50px;width:100%;margin-bottom:10px;text-align:center;cursor:pointer;border-radius:3px;}
.item_list div:nth-child(1){background-color:#6F5499;}
.item_list div:nth-child(2){background-color:#E74C3C;}
.item_list div:nth-child(3){background-color:#1FA67A;}
.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;}
.show{margin-left:10px;}
component/img/calendar.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

component/index.html
+40
View File
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>动手写JS组件</title>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
</head>
<body>
<header>
<ul>
<li>首页</li>
<li>GitHub</li>
<li>About</li>
</ul>
</header>
<section class="item_list">
<div id="calendar_menu">canlendar</div>
<div id="guid">guid</div>
<div id="cookie">cookie</div>
<div id="tip">tip</div>
<div id="mask">mask</div>
</section>
<section class="codeshow">
<div id="code_calendar" 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;">
<br/>
<span id="calendar_time" style="margin-left:10px;">点击日历上的日期试试</span>
</div>
</div>
</section>
<script type="text/javascript" src="js/calendar.js" ></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
component/js/calendar.js
+219
View File
@@ -0,0 +1,219 @@
/*
+------------------------------
@author:vczero
@time:2014/8/10
@desc:简易日历组件
+------------------------------
*/
(function(global){
var Calendar = function(div, date){
this.div = document.getElementById(div);
var w = this.div.style.width || 390;
var h = this.div.style.height || (300 - 30);
this.width = parseInt(w) >= 360 ? w : 360;
this.height = parseInt(h) >= 180 ? h : 180;
this.date = date;
this.div.style.width = this.width + 'px'; //按默认值设置回去
this.div.style.height = this.height + 'px';//按默认值设置回去
};
Calendar.week = ['星期一', '星期二','星期三', '星期四','星期五', '星期六', '星期日'];
Calendar.prototype['showUI'] = function(callback){
var exist = document.getElementById('vczero_celldom_0');
if(!!exist){
for(var e = 0; e < 42; e++){
var node = document.getElementById('vczero_celldom_' + e);
node.onclick = null; //移除事件处理程序
this.div.removeChild(node);
}
}
var width = this.width,
height = this.height,
cell = {width: (parseInt(width) - 20)/7, height: (parseInt(height) -30 - 20)/6},
monthArr = this._monthPanel(this.date);
this.div.style.paddingLeft = '8px';
this.div.style.border = '2px solid #57ABFF';
this.div.style.cursor = 'default';
this.div.style.fontFamily = '微软雅黑';
this._addHeader();
this._addWeekday();
for(var i = 0; i < 42; i++){
var cellDOM = document.createElement('div');
cellDOM.style.width = cell.width + 'px';
cellDOM.style.height = cell.height + 'px';
cellDOM.style.display = 'inline-block';
cellDOM.style.cssFloat = 'left';
cellDOM.style.cursor = 'pointer';
cellDOM.style.textAlign = 'center';
cellDOM.id = 'vczero_celldom_' + i;
cellDOM.style.lineHeight = cell.height + 'px';
cellDOM.setAttribute('date',monthArr.date[i]); //设置日期对象到DOM属性date上
cellDOM.innerHTML = monthArr.date[i].getDate();
//去掉最后一行横线
if(i < 35){
cellDOM.style.borderBottom = '1px solid #C8CACC';
}
if(i < monthArr.preLen || i >= monthArr.currentLen + monthArr.preLen){
cellDOM.style.color = '#BFBFBF';
}
this.div.appendChild(cellDOM);
}
//使用父元素事件委托
this.div.addEventListener('click',function(e){
var node = e.target;
if(node.id.indexOf('vczero_celldom_') > -1){
var date = new Date(node.getAttribute('date')).toLocaleString();
callback(date.split('上午')[0]);
}
});
};
Calendar.prototype._addHeader = function(){
var exist = document.getElementById('vczero_datediv');
if(!!exist){
exist.onclick = null;
this.div.removeChild(exist);
}
var header = document.createElement('div');
header.style.height = '22px';
header.style.width = this.div.style.width || '800px';
//包含左 时间 右的大DIV
var dateDiv = document.createElement('div');
dateDiv.style.width = '200px';
dateDiv.style.height = '22px';
dateDiv.style.margin = '0 auto';
dateDiv.style.textAlign = 'center';
dateDiv.style.fontWeight = 'bold';
dateDiv.id = 'vczero_datediv';
//< DIV
var leftDiv = document.createElement('div');
leftDiv.innerHTML = '<';
leftDiv.style.display = 'inline-block';
leftDiv.style.float = 'left';
leftDiv.style.width = '50px';
leftDiv.style.cursor = 'pointer';
leftDiv.style.color = '#C5BFBF';
var _that = this; //获取到this对象
leftDiv.addEventListener('click', function(event){
var year = parseInt(_that.date.getFullYear()),
month = parseInt(_that.date.getMonth());
if(month === 0){
_that.date = new Date(year - 1, 11, 1);
}else{
_that.date = new Date(year, month - 1, 1);
}
_that['showUI'](function(){});
});
//> DIV
var rightDiv = document.createElement('div');
rightDiv.innerHTML = '>';
rightDiv.style.display = 'inline-block';
rightDiv.style.float = 'left';
rightDiv.style.width = '50px';
rightDiv.style.cursor = 'pointer';
rightDiv.style.color = '#C5BFBF';
rightDiv.addEventListener('click', function(event){
var year = parseInt(_that.date.getFullYear()),
month = parseInt(_that.date.getMonth());
if(month === 11){
_that.date = new Date(year + 1, 0, 1);
}else{
_that.date = new Date(year, month + 1, 1);
}
_that['showUI'](function(){});
});
//显示月份的DIV
var timeDiv = document.createElement('div');
timeDiv.style.display = 'inline-block';
timeDiv.style.float = 'left';
timeDiv.style.width = '100px';
timeDiv.innerHTML = this.date.getFullYear() + '年' + (this.date.getMonth() + 1) + '月';
dateDiv.appendChild(leftDiv);
dateDiv.appendChild(timeDiv);
dateDiv.appendChild(rightDiv);
this.div.appendChild(dateDiv);
};
//增加星期
Calendar.prototype._addWeekday = function(){
var exist = document.getElementById('vczero_week_0');
if(!!exist){
for(var i = 0; i < 7; i++){
var node = document.getElementById('vczero_week_' + i);
node.onclick = null;
this.div.removeChild(node);
}
}
for(var n = 0; n < 7; n++){
var weekday = document.createElement('div');
weekday.style.width = (parseInt(this.width) - 20)/7 + 'px';
weekday.style.height = '20px';
weekday.style.display = 'inline-block';
weekday.style.float = 'left';
weekday.style.color = '#BFBFBF';
weekday.style.fontWeight = 'bold';
weekday.style.textAlign = 'center';
weekday.id = 'vczero_week_' + n;
weekday.innerHTML = Calendar.week[n];
this.div.appendChild(weekday);
}
};
Calendar.prototype._monthPanel = function(date){
//如果传递了Date对象，则按Date对象进行计算月份面板
//否则，按照当前月份计算面板
var myDate = date || new Date(),
year = myDate.getFullYear(),
month = myDate.getMonth(),
day = myDate.getDate(),
week = myDate.getDay(),
currentDays = new Date(year, month + 1, 0).getDate(),
preDays = new Date(year, month, 0).getDate(),
firstDay = new Date(year, month, 1),
firstCell = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1,
bottomCell = 42 - currentDays - firstCell;
//前一个月该显示多少天
var preMonth = [];
for(var p = firstCell; p > 0; p--){
preMonth.push(new Date(year, month - 1, preDays - p + 1));
}
var len = preMonth.length;
//本月
var currentMonth = [];
for(var c = 0; c < currentDays; c++){
currentMonth.push(new Date(year, month, c + 1));
}
//下一个月
var nextMonth = [];
for(var n = 0; n < bottomCell; n++){
nextMonth.push(new Date(year, month + 1, n + 1));
}
preMonth = preMonth.concat(currentMonth, nextMonth);
return {
date: preMonth,
preLen: len,
currentLen: currentMonth.length
};
};
global.Calendar = Calendar;
})(window);
component/js/highlight.js
+1
View File
File diff suppressed because one or more lines are too long
component/js/main.js
+17
View File
@@ -0,0 +1,17 @@
(function(global){
var canlendar = new Calendar('calendar',new Date('2015-1'));
canlendar.showUI(function(date){
document.getElementById('calendar_time').innerHTML = date;
});
document.getElementById('guid').onclick = function(){
alert(11);
};
})(this);