ttt.js & 懒癌

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

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

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

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

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


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

回过头来,我学到了什么呢?似乎什么也没学到呢

Alice


  1. 这里可以获取:ttt.js ↩︎