发现搜狐有一个很贴心的功能,用JS控制tag cloud的排序方式~
但我想请问各位高手,能否改到排序方式,不是用自定的4个css,而是用各tag的引用数目,例如原来的
<li class="tag_popularity_4"><a href="">八一</a></li>
<li class="tag_popularity_4"><a href="">文兴宇</a></li>
改成
<li class="tag_popularity_4" title="43"><a href="">八一</a></li>
<li class="tag_popularity_4" title="41"><a href="">文兴宇</a></li>
然後用title来排序.
烦请解答,谢谢 ><
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="index,follow"><title>标签 - 搜狐博客</title>
<style>
ul#tag_cloud, ul#tag_sortnav{margin:0;padding:0;list-style:none;}
/* Box Structure */
.box{margin:0 0 10px;border:1px solid #dedede;}
.bHead{
padding:2px 7px 1px;
border-bottom:1px solid #ddd;
background:#fdfdfd url(images/bHead_bg.jpg) top repeat-x;
}
.bHead h3{}
.bHead small{
text-align:right;
margin-top:-20px;
display:block;
}
.bNav{
background:#f6f6f6;
padding:5px 10px;
}
.bNav li{
display:inline;
margin:0 10px 0 5px;
padding:0 0 0 0px;
}
.bNav li.current{
color:#333;
background:url(images/bNavCurrent.gif) left no-repeat;
cursor:default;
text-decoration:none;
}
.bNav li.unCurrent{
color:#104d6c;
cursor:pointer;
text-decoration:underline;
}
.bBody{
padding:10px;
}
.bBody li{
font-family:"宋体";
}
.bBody .innerBox{
}
.bFoot{
padding:5px 10px;
text-align:right;
font-family:"宋体";
font-weight:bold;
}
/* tags */
.cloud li{display:inline;margin:0 5px 5px 0;>margin:0 2px 5px 0;}
.cloud a{padding:3px 2px 1px 3px;line-height:1.5em;text-decoration:none;word-wrap:break-word;word-break:break-all;}
.cloud a:hover{text-decoration:none !important;}
li.tag_popularity_1 a,li.tag_popularity_1 a:hover{color:#104d6c;font-size:12px;font-weight:normal;}
li.tag_popularity_2 a,li.tag_popularity_2 a:hover{color:#104d6c;font-size:12px;font-weight:bold;}
li.tag_popularity_3 a,li.tag_popularity_3 a:hover{color:#104d6c;font-size:16px;font-weight:bold;}
li.tag_popularity_4 a,li.tag_popularity_4 a:hover{color:#f06;font-size:16px;font-weight: bold;}
li.tag_popularity_1 a:hover,
li.tag_popularity_2 a:hover,
li.tag_popularity_3 a:hover{background:#104d6c;color:#fff !important;}
li.tag_popularity_4 a:hover{background:#f06;color:#fff !important;}
/* Clearfix */
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{display:inline-table;}
/* Hides from IE-mac \*/
* html .clear{height:1%;}
.clear{display:block;}
/* End hide from IE-mac */
*+html .clear{min-height:1%;}/* IE7 */
</style>
<script type="text/javascript">
function TagSort(){this.initialize.apply(this, arguments);}
TagSort.prototype = {
initialize: function (timeBtn, hotBtn, timeEle, focusClass, noFocusClass, classArray) {
this.timeBtn = document.getElementById(timeBtn);
this.hotBtn = document.getElementById(hotBtn);
this.timeEle = document.getElementById(timeEle);
this.focusClass = focusClass;
this.noFocusClass = noFocusClass;
this.classArray = classArray;

this.hotUl = null;

this.observe(this.timeBtn, "click", this.bindThis(this.showByTime, this));
this.observe(this.hotBtn, "click", this.bindThis(this.showByHot, this));
},

observe: function (element, name, observer) {
if (element.attachEvent) {
element.attachEvent("on" + name, observer);
} else if (element.addEventListener) {
element.addEventListener(name, observer, false);
}
},

bindThis: function (func, object) {
return function () {
func.call(object);
};
},

showByTime: function () {
this.hotBtn.className = this.noFocusClass;
if (this.hotEle) {
this.hotEle.style.display = "none";
}
this.timeBtn.className = this.focusClass;
this.timeEle.style.display = "";
},

showByHot: function () {
if (this.hotEle == null) {
var hotSorts = {};
for (var i=0; i<this.classArray.length; i++) {
hotSorts[this.classArray[i]] = "";
}

var timeUl = null;
var timeEleChilds = this.timeEle.childNodes;
for(var i=0; i<timeEleChilds.length; i++) {
if(timeEleChilds[i].tagName && timeEleChilds[i].tagName.toLowerCase() == "ul") {
timeUl = timeEleChilds[i];
break;
}
}

var childs = timeUl.childNodes;
var childCount = childs.length;
for (var i=0; i<childCount; i++) {
var childNow = childs[i];
if(childNow.tagName && childNow.tagName.toLowerCase() == "li") {
var childClass = childNow.className;
hotSorts[childClass] += '<li class="' + childClass + '">' + childNow.innerHTML + '</li>';
}
}

var hotInnerHTML = "";
for (var i=0; i<this.classArray.length; i++) {
hotInnerHTML += hotSorts[this.classArray[i]];
}

var timeUlId = timeUl.id;
this.hotEle = document.createElement("div");
this.hotEle.innerHTML = '<ul id="' + timeUlId + '">' + hotInnerHTML + '</ul>';
this.hotEle = this.timeEle.parentNode.insertBefore(this.hotEle, this.timeEle);
}

this.timeBtn.className = this.noFocusClass;
this.timeEle.style.display = "none";
this.hotBtn.className = this.focusClass;
this.hotEle.style.display = "";
}
};
window.onload = function () {
new TagSort("sortByTime", "sortByHot", "sortTagDiv", "current", "unCurrent", ["tag_popularity_4","tag_popularity_3","tag_popularity_2","tag_popularity_1"]);
};
</script>
</head>
<body>
        <div id="newTagsCloud" class="box">
          <div class="bNav clear">
            <ul id="tag_sortnav"><li id="sortByTime" class="current">按时间排列</li><li id="sortByHot" class="unCurrent">按热度排列</li></ul>
          </div>
          <div class="bBody clear">
            <div class="cloud">
              <div id="sortTagDiv">
               <ul id="tag_cloud">
<li class="tag_popularity_4"><a href="http://tag.blog.sohu.com/%B0%CB%D2%BB/">八一</a></li>
<li class="tag_popularity_4"><a href="http://tag.blog.sohu.com/%CE%C4%D0%CB%D3%EE/">文兴宇</a></li>
<li class="tag_popularity_3"><a href="http://tag.blog.sohu.com/%CB%D1%BA%FC/">搜狐</a></li>
<li class="tag_popularity_3"><a href="http://tag.blog.sohu.com/%B2%A9%BF%CD%B4%F3%BB%E1/">博客大会</a></li>
<li class="tag_popularity_3"><a href="http://tag.blog.sohu.com/%BF%EC%C4%D0/">快男</a></li>
<li class="tag_popularity_4"><a href="http://tag.blog.sohu.com/%D1%C7%D6%DE%B1%AD/">亚洲杯</a></li>
<li class="tag_popularity_3"><a href="http://tag.blog.sohu.com/%C1%F5%B5%C2%BB%AA/">刘德华</a></li>
<li class="tag_popularity_4"><a href="http://tag.blog.sohu.com/%B8%DF%BF%BC%D7%F7%CE%C4/">高考作文</a></li>
<li class="tag_popularity_4"><a href="http://tag.blog.sohu.com/%B8%DF%BF%BC%B9%CA%CA%C2/">高考故事</a></li>
<li class="tag_popularity_4"><a href="http://tag.blog.sohu.com/%B3%C2%CF%FE%D0%F1/">陈晓旭</a></li>
<li class="tag_popularity_3"><a href="http://tag.blog.sohu.com/%C4%B8%C7%D7%BD%DA/">母亲节</a></li>
<li class="tag_popularity_2"><a href="http://tag.blog.sohu.com/%D3%CE%BC%C7/">游记</a></li>
<li class="tag_popularity_1"><a href="http://tag.blog.sohu.com/%BC%FB%CE%C5/">见闻</a></li>
</ul>
              </div>
            </div>
          </div>
        </div>
     </body></html>