最近这十来天的时间，博客写的少多了

貌似是因为ttt.js^[1]的缘故吧，我整个开发的进程都被打乱了……

嘛，由此也发现，我还很弱呢……

Example

new ttt(tableEle, conObj);

tableEle为绑定的DOM节点，最好是table元素

conObj是一个对象，里面接收几个属性:

conObj.input

作为输入的值，用来生成表。conObj.input 支持两种模式，行模式 和 列模式

行模式

new ttt(tableEle, {
	input: [
		['班级', '姓名', '年龄'],
		['高一（3）', '小王', '16'],
		['高一（2）', '小张', '15'],
		['高一（4）', '小金', '15']
	]
});

列模式

new ttt(tableEle, {
	input: {
		'班级': ['高一（3）', '高一（2）', '高一（4）'],
		'姓名': ['小王', '小张', '小金'],
		'年龄': ['16', '15', '15']
	}
});

由此可以看出，行模式和列模式的区别在于是否是 数组/对象

conObj.defaultCell

默认单元格，当conObj.input输入的值过少作为填充

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var ele = hCon.log('');
$(ele).append('table', function (tableEle){
	var tab = new ttt( tableEle,{
		input: [
			['id', '标题', '最后修改', '创建时间'],
			[9, '哦是吗'],
			[99, '对，没错', (new Date).toDateString()]
		],
		defaultCell: new Date("1970-1-1").toDateString()
	});
	$(tableEle).css({'width': '480px'});
});

conObj.thead

设定表头用的。当然，接受几种类型的值

• 数组，跟行模式的是一样的
• 对象，但对象属性中并不是数组而是cell
• true，将行模式第一行作为表头或者是列模式的对象名作为表头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var ele = hCon.log('');
$(ele).append('table', function (tableEle){
	var tab = new ttt( tableEle,{
		input: [
			['id', '标题', '最后修改', '创建时间'],
			[9, '哦是吗'],
			[99, '对，没错', (new Date).toDateString()]
		],
		defaultCell: new Date("1970-1-1").toDateString(),
		thead: true
	});
	$(tableEle).css({'width': '480px'});
	$(tableEle.getElementsByTagName('thead')[0]).css(
		{'background':'rgba(27, 29, 82, 0.382)'}
	);
});

一个基于 ttt.js 的 然并卵日历表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
$(hCon.log('')).append('div', function (ele){
	this.css({'margin': 'auto', 'width': '240px', 'text-align': 'center'});
	var t = new Date;
	t.setDate(1);
	function offsetMon(num){
		return function (){
			t.setMonth( t.getMonth() + Number( num ) );
			render();
		}
	}
	this.append('button', function (ele){
		this.text('上个月');
		this.addEvent('click', offsetMon(-1), true);
	});
	var setDateLabel = function (){
		var dateLabel = $c('span', function (ele){
			this.text(t.toDateString());
		});
		this.append(dateLabel);
		return function (t){
			$(dateLabel).text( t.getFullYear() +'/'+ (t.getMonth()+1) );
		};
	}.bind(this)();
	this.append('button', function (ele){
		this.text('下个月');
		this.addEvent('click', offsetMon(1), true);
	});
	var tab = new ttt(
		$c('table', function (ele){
			this.cssLine().width('240px')
		}),
		{
			input: new function (){
				for ( var i=0; i<7; ++i)
					this[i] = Array();
			},
			thead: ['日', '一', '二', '三', '四', '五', '六']
		}
	);
	function render(){
		tab.clear();
		var ret = new Date(t);
		setDateLabel(ret);
		for (var fillDay=0; fillDay<ret.getDay(); ++fillDay)
			tab.add( String(fillDay), ' ');
		var source= ret.getMonth();
		for ( var d=ret.getDate(); source===ret.getMonth();  ret.setDate(++d))
			tab.add( String( ret.getDay() ), d );
	}
	ele.appendChild( tab.tableEle );
	render();
});

ttt.js 大概就是这样的吧，没了

回过头来，我学到了什么呢？似乎什么也没学到呢