一个自制的Tag Cloud插件，基于jQuery -

wrymax

浏览: 6396 次
性别:
来自: 北京

最近访客更多访客>>

子不语

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

一个自制的Tag Cloud插件，基于jQuery

博客分类：

web前端

javascript js jQuery TagCloud plugin

一个自制的基于jquery的插件，代码如下：

// jquery.tag_cloud.js
jQuery.fn.tagCloud = function(params){
var max = function(arr){
    var _tmp = null;
    for(var i in arr) {
      if(_tmp) {
        _tmp = _tmp > arr[i] ? _tmp : arr[i];
      }
      else {
        _tmp = arr[i];
      }
    }
    return _tmp;
}
var min = function(arr){
    var _tmp = null;
    for(var i in arr) {
     if(_tmp) {
       _tmp = _tmp < arr[i] ? _tmp : arr[i];
      }
      else {
        _tmp = arr[i];
      }
    }
    return _tmp;
}
var _class = params.tag_class;
var _count_attr = params.count_attr;
var _max_size = params.max_size;
var _min_size = params.min_size;
var tag_arr = $(this).find('.' + _class);
var count_arr = [];
tag_arr.each(function(){
    count_arr.push($(this).data(_count_attr));
})
var _max = max(count_arr);
var _min = min(count_arr);
tag_arr.each(function(){
    $(this).css({
      fontSize: parseInt( (_max_size - _min_size ) * ($(this).data(_count_attr) - _min ) / ( _max - _min ) + _min_size)
    })
})
}

// html:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.tag_cloud.js"></script>
<style type="text/css">
#tag_cloud {
    width: 150px;
    border: 1px solid #CCC;
    padding: 5px;
}
#tag_cloud a {
    text-decoration: none;
    display: block;
    float: left;
    margin: 4px;
}
</style>
<meta charset="utf-8"/>
</head>
<body>
<div id="tag_cloud">
<a href="http://ctquan.com/search_startups/11/移动" class="tag" data-count="10">移动</a>
<a href="http://ctquan.com/search_startups/11/新能源" class="tag" data-count="20">新能源</a>
<a href="http://ctquan.com/search_startups/11/传媒娱乐" class="tag" data-count="15">传媒娱乐</a>
<a href="http://ctquan.com/search_startups/11/电子商务" class="tag" data-count="10">电子商务</a>
<a href="http://ctquan.com/search_startups/11/电脑硬件" class="tag" data-count="8">电脑硬件</a>
<div style="clear: both;"></div>
</div>
<script type="text/javascript">
// 利用一个hash来自由配置想要实现的字号范围以及标签云使用的HTML相关属性
$('#tag_cloud').tagCloud({
    tag_class : 'tag',
    count_attr : 'count',
    max_size : 30,
    min_size : 8
});
</script>
</body>
</html>

分享到：