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

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

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

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 大概就是这样的吧，没了

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