tag 随想 ...... tag cloud plugin

发表于

在网络信息爆炸的年代，分类已经不能满足需求了。目前标签（tag）正越来越多的被使用着。


每次为文章写标签的时候，自己总小心翼翼，左思右想，还带有那么点纠结。结果还是按照分类的思路进行着。


每每回顾时，总觉不妥。


就好像使用 google bookmarks，收藏的链接多了，tag 还是按照分类的思路进行，每个链接基本使用一个 tag ，最多使用两个。时间长了就都忘记自己把它分到哪里去了。


可能有时会觉得 tag 多了难以管理；一个东东打上那么多的 tag，那么属于每个 tag 的东东不就多了，找起来也不方便。


可是当我看了 SOSO实验室博客的 tag 后，我才突然醒悟 tag 与分类的区别，tag 之所以存在的意义。


 


同时也发现了自己在处理 tag cloud 代码上的错误：


1.  相信 js 对中文排序的支持


2.  没有根据 tag 数目对所属于的区间进行划分


 


HTML 结构如下


                        <ul>
                            <li>
                                <a href=”/tags/%E8%B0%B7%E6%AD%8C” title=”谷歌”>
                                    <span>谷歌</span>
                                    (<b>52</b>)
                                </a>
                            </li>
                        </ul>

 


现修正如下


         id = id || “tags”;

        // 根据引用次数添加样式，产生云效果
        var classes = [“tags1”, “tags2”, “tags3”, “tags4”, “tags5”],
        bList = $(“#” + id + “ b”).get();
        var max = parseInt($(“#” + id + “ b”).last().text());
        var distance = Math.ceil(max / classes.length);

        for (var i = 0; i < bList.length; i++) {
            var num = parseInt(bList[i].innerHTML);
            // 算出当前 tag 数目所在的区间，加上 class
            for (var j = 0; j < classes.length; j++) {
                if (num > j  distance && num <= (j + 1)  distance) {
                    bList[i].parentNode.className = classes[j];
                    break;
                }
            }
        }

        // 按字母或者中文拼音进行排序
        $(“#” + id).html($(“#” + id + “ li”).get().sort(function(a, b) {
            var valA = $(a).find(“span”).text().toLowerCase();
            var valB = $(b).find(“span”).text().toLowerCase();
            // 对中英文排序的处理
            return valA.localeCompare(valB);
        }));

 


突然好空白，看来还需要点颜色。决定参考下蝴蝶的颜色搭配表。


以前其实有想过用现成的，但貌似都不太理想。期待您更好的 tag cloud 插件分享。