滔滔插件高级自定义显示

米落,2009年9月12日

    在上篇中,我们提出了自定义滔滔插件显示内容的方法,是使用的 jQuery 更改滔滔官方显示的方法,在结尾我们又发现了其插件其实本身就提供了滔滔留言的数据内容,显示格式只是后期 Javascript 输出的,由此我们就可以在获取其数据后,自定义输出,也就是使用自己的 doApi 函数.


本地页面调用保存本地的 taotaoapi.js 显示


滔滔留言数据,可以看到是一段 Javascript 脚本

    数据连接地址是类似如下的地址:

http://www.taotao.com/cgi-bin/msgj?qq=215617543&num=20&t=0

    可以看到这段地址以Get 方法传递了三个参数 qq , num , t .
    qq , 代表要显示的QQ号码.
    num , 表示显示的条数,默认为五条,最多二十条,超过二十条则就为五条.
    t , 表示显示类别,可为 0 或 1, 0代表只显示自己发表的滔滔留言, 1表示也显示自己回复好友的滔滔留言.

    数据显示参数就是这些,在 doApi 函数中,传递的是一段 js 脚本.格式化后显示的效果就是这个

doApi({
    "posts": [{
        "cn": "觉得自己好失败,被院队除名了,最后二选一自己还是败在了跳投上.",
        "id": "8905730807",
        "sr": 0,
        "time": "2,37"
    },
    {
        "cn": "昨天放孔明灯,热气上升,很好玩.今天中午班赛,下午训练,被通知明天要早上去上薪酬管理的自考.",
        "id": "8873023416",
        "sr": 0,
        "time": "3,21"
    },
    {
        "cn": "她的生日,送花 19 Rose.",
        "id": "8816527141",
        "sr": 0,
        "time": "7,2009-09-10 14:15:08"
    },
    {
        "cn": "自考复习开始",
        "id": "8732850417",
        "sr": 0,
        "time": "7,2009-09-08 11:32:43"
    },
    {
        "cn": "1.2.3 我们都是木头人",
        "id": "8715115602",
        "sr": 3,
        "time": "7,2009-09-07 21:22:21"
    }],
    "ret": 0,
    "total": 373,
    "type": 0,
    "ui": {
        "lrank": 0,
        "name": "米落",
        "qq": 215617543,
        "rank": 0,
        "rec": "",
        "usn": 8810022
    }
})

    上面的数据对象以及属性相信大家一眼就能看出是什么作用.我们就是要解析这些数据,然后拼接 HTML 标记最后 document.write 即可.由于在官方的dkapi.js 文件中已经提供了许多功能,我就直接拿来复用了,只是稍做修改即可.

    将原文件 166 行更改为下面显示,可以去除 "更多滔滔" 和 滔滔Logo.

htm = '<div>' + '<ul id=' + taotao_pane_id + ' style="margin-bottom:5px">' + '</ul>' + '<table cellpadding="0" cellspacing="0" border="0" width="100%"></table>' + '</div>';

    将原文件 120 行的 if 块删除,即可去除时间显示上的链接.

if (parseInt(data.pqq) > 0) {
    a.href = 'http://www.taotao.com/v1/reply/t.' + data.pid + '/u.' + data.pqq;
} else {
    a.href = 'http://www.taotao.com/v1/reply/t.' + data.id + '/u.' + qq;
}

    修改时间的字体大小.

a.style.fontSize = "10px";

    最终 doApi 函数

function doApi(obj) {
    if (obj.ret != 0) {
        pane.innerHTML = "对不起！暂时无法获取滔滔的唠叨,请稍候重试...";
        return;
    }
    var qq = obj.ui.qq,
    name = obj.ui.name,
    usn = obj.ui.usn,
    rank = obj.ui.rank,
    lrank = obj.ui.lrank,
    rec = obj.rec;
    var arr = obj.posts,
    i = 0,
    data, pane = LL(taotao_pane_id),
    li,
    span,
    a,
    bD = false;
    for (i = 0; i < arr.length; i++) {
        data = arr[i];
        li = LK("li");
        li.style.wordBreak = "break-all";
        li.style.height = "auto";
        li.style.overflowY = "auto";
        if (obj.type == 1) {
            a = LK('a');
            a.style.marginRight = "8px";
            a.innerText = data.nm;
            a.textContent = data.nm;
            a.href = "http://www.taotao.com/v1/space/" + data.qq;
            li.appendChild(a);
            if (data.pqq) {
                li.appendChild(document.createTextNode("@"));
                a = LK('a');
                a.style.marginRight = "8px";
                a.innerText = data.pnm;
                a.textContent = data.pnm;
                a.href = "http://www.taotao.com/v1/space/" + data.pqq;
                li.appendChild(a);
            }
        }
        span = LK("span");
        if (data.sr == 10) {
            span.innerHTML = LE(data.cn, "_blank");
        } else if (data.sr == 9) {
            LI(data.cn);
            var cxlen = g_cximg.length;
            span.innerHTML = g_ubbcon + ' <a target="_blank" href="http://www.taotao.com/caixin.shtml?qq=' + qq + "&tid=" + data.id + '">点击查看彩信</a>';
        } else {
            span.innerHTML = LF(LG(data.cn, "_blank"));
        }
        li.appendChild(span);
        span = LK("span");
        span.style.marginLeft = "8px";
        a = LK('a');
        a.style.color = "#929091";
        a.style.fontSize = "10px";
        a.innerHTML = LJ(data.time);
        span.appendChild(a);
        li.appendChild(span);
        pane.appendChild(li);
    }

    现在我们的工作就只剩下把显示 dkapi.js 文件的路径改为自己的即可. 各位可以自定义实现更多更丰富的显示方式,其实用了这些数据我们完全可以做自己的 Flash 版,  图片显示版. 并且由于 JS 数据是实时的,所以比官方的都还要更新的即时,剩下的工作就交给大家自己去完善吧.

Tags: JavaScript  

分类: Programer | 评论:2 | 浏览:

相关文章:

发表评论