JQuery 是一種非常流行的 JavaScript 庫(kù),它可以被用來(lái)簡(jiǎn)化開(kāi)發(fā) Web 應(yīng)用程序的過(guò)程。JQuery 有非常多的特性和插件,其中之一就是標(biāo)簽云。
標(biāo)簽云是一種將標(biāo)簽按照頻率或者其他標(biāo)準(zhǔn)排列顯示的方式。在 Web 開(kāi)發(fā)中,標(biāo)簽云經(jīng)常被用來(lái)顯示文章或者網(wǎng)站上的標(biāo)簽。JQuery 提供了非常方便的方式來(lái)創(chuàng)建自己的標(biāo)簽云。
<script> $.fn.tagcloud = function(options) { var opts = $.extend({}, $.fn.tagcloud.defaults, options); var classes = opts.colorClasses.length; return this.each(function() { var taglist = {}; $.each(opts.tags, function(index, item) { var key = item.toLowerCase().trim(); if(taglist[key] == null) { taglist[key] = 1; } else { taglist[key]++; } }); $.each(taglist, function(tag, count) { var size = opts.fontSize.min + (opts.fontSize.max - opts.fontSize.min) * count / opts.maxSize; var colorClassIndex = Math.floor(count / (opts.maxSize / classes)); if(colorClassIndex >= classes) colorClassIndex = classes - 1; $('<span></span>').text(tag + ' ').attr('title',count + ' occurrences').css({ 'font-size' : size + opts.fontSize.unit, 'cursor' : 'pointer', 'margin-right' : '5px', 'color' : opts.colorClasses[colorClassIndex], 'line-height' : opts.lineHeight, }).appendTo(this); }); }); }; $.fn.tagcloud.defaults = { tags : [], maxSize : 20, fontSize : {min : 12, max : 18, unit : 'px'}, colorClasses : [ '#FF6666', '#F6AA93', '#B2D6FF', '#ADA7F6', '#F4E7B4', '#A2D5BA', '#E3A3A3', '#CAEAD1', '#FE8F80', '#C6E59F'], lineHeight: 'normal' }; </script>
使用這個(gè) JQuery 插件非常簡(jiǎn)單,只需要在需要顯示標(biāo)簽云的地方加入如下代碼即可:
<div class="tagcloud"></div> <script> $('.tagcloud').tagcloud({ tags : ['Tag1','Tag2','Tag3'], maxSize : 30, fontSize : {min : 14, max : 24, unit : 'px'}, colorClasses : [ '#FF6666', '#F6AA93', '#B2D6FF', '#ADA7F6', '#F4E7B4', '#A2D5BA', '#E3A3A3', '#CAEAD1', '#FE8F80', '#C6E59F'], lineHeight: 'normal' }); </script>
這個(gè)插件可以根據(jù)你的需要來(lái)定制標(biāo)簽云的樣式,比如最大字體大小,最小字體大小,顏色,和每一行的行高。
總之,JQuery 標(biāo)簽云插件是一個(gè)非常出色而又實(shí)用的工具,可以方便地添加標(biāo)簽云功能到你的網(wǎng)站上。