最近这十来天的时间,博客写的少多了
貌似是因为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
输入的值过少作为填充
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,将行模式第一行作为表头或者是列模式的对象名作为表头
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 的 然并卵日历表
$(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 大概就是这样的吧,没了
回过头来,我学到了什么呢?似乎什么也没学到呢