Jquery Framework'ü ile tag cloud yapımı :
Gereçler :
Jquery
Javascript:
HTML :
CSS:
Gereçler :
Jquery
Javascript:
Kod:
$(document).ready(function() {
var max_tag = 0;
$(".tags_cloud").find("a").each(function() {
if($(this).attr("tag_count") != "") {
if(max_tag < parseInt($(this).attr("tag_count"))) {
max_tag = parseInt($(this).attr("tag_count"));
}
}
});
$(".tags_cloud").find("a").each(function() {
if($(this).attr("tag_count") != "") {
var percent = parseInt($(this).attr("tag_count")) / max_tag ;
if(percent < 0.4) {
percent = 0.4;
}
$(this).css("font-size",percent+"em");
}
});
});
HTML :
Kod:
<div class="tags_cloud">
<a href="/Search/plus" tag_count="4" title="plus ">plus</a>
<a href="/Search/Center" tag_count="3" title="Center ">Center</a>
<a href="/Search/Euro" tag_count="4" title="Euro ">Euro</a>
<a href="/Search/TM" tag_count="3" title="TM ">TM</a>
<a href="/Search/Company" tag_count="4" title="Company ">Company</a>
<a href="/Search/AR" tag_count="3" title="AR ">AR</a>
<a href="/Search/Articul" tag_count="3" title="Articul ">Articul</a>
<a href="/Search/creativo" tag_count="4" title="creativo ">creativo</a>
<a href="/Search/Ltd." tag_count="3" title="Ltd. ">Ltd.</a>
<a href="/Search/2Dutcmen.com" tag_count="4" title="2Dutcmen.com ">2Dutcmen.com</a>
<a href="/Search/e" tag_count="10" title="e ">e</a>
<a href="/Search/Creative" tag_count="17" title="Creative ">Creative</a>
<a href="/Search/Communication" tag_count="7" title="Communication ">Communication</a>
<a href="/Search/Comunicacao" tag_count="10" title="Comunicacao ">Comunicacao</a>
<a href="/Search/promotion" tag_count="6" title="promotion ">promotion</a>
<a href="/Search/Graphic" tag_count="4" title="Graphic ">Graphic</a>
<a href="/Search/Equipe" tag_count="3" title="Equipe ">Equipe</a>
<a href="/Search/Promo" tag_count="3" title="Promo ">Promo</a>
<a href="/Search/Business" tag_count="3" title="Business ">Business</a>
<a href="/Search/Agência" tag_count="3" title="Agência ">Agência</a>
</div>
CSS:
Kod:
.tags_cloud , .tags_cloud a{
font-size:32px;
}