Una tag cloud è un insieme di tag correlati e i relativi pesi corrispondenti. Una tipica tag cloud contiene da 30 a 150 tag. influenzare la dimensione del carattere o altri effetti visivi utilizzati. Nel frattempo, gli istogrammi o i grafici a torta sono più comunemente usati per rappresentare circa 12 pesi diversi. Pertanto, la tag cloud può rappresentare più diritti, sebbene sia meno precisa. Inoltre, i tag cloud sono spesso interattivi: i tag sono in genere collegamenti ipertestuali che consentono agli utenti di approfondire il loro contenuto.
Innanzitutto, un sito Web di alto profilo che utilizza tag cloud: il sito Web di condivisione di foto Flickr. Il progettista del tag cloud è l'interaction designer Stewart Butterfield. Successivamente, il tag cloud è stato adottato da siti web come del e Technorati.
In base alla funzione del tag cloud (piuttosto che allo stile), può essere suddiviso in tre categorie principali nelle applicazioni. Tra questi, la prima categoria viene utilizzata per descrivere ciascun elemento indipendente del sito web, mentre la seconda categoria si concentra sulla caratterizzazione dell'etichettatura di tutti gli elementi del sito web nel suo insieme:
Il primo tipo di tag cloud: ogni elemento ha il proprio tag cloud indipendente Più grande è il carattere del tag, più volte l'utente ha utilizzato questo tag in questo elemento. Questo è molto importante quando la pagina conta pubblicamente i clic e non richiede precisione essere applicabile. Ad esempio, Last utilizza il primo tipo di tag cloud.
Il secondo tipo di tag cloud: i siti web generalmente hanno un tag cloud molto grande, più grande è il carattere del tag, più voci nel sito web hanno utilizzato questo tag. Il secondo tipo di tag cloud può mostrare la popolarità dei tag ed è più comune nelle applicazioni pratiche, come flickr.
Il terzo tipo di tag cloud: in questo tipo, i tag vengono utilizzati come strumento per un elemento di dati per rappresentare la dimensione dei dati di ciascun elemento nell'intera raccolta.
In generale, tecniche di visualizzazione simili non si limitano ai tag cloud, ma possono essere utilizzate, ad esempio, anche su word cloud o data cloud.
L'introduzione testuale sopra riportata è tratta dalla voce "Tag Cloud" dell'Enciclopedia Baidu. http://baike.baidu.com/view/1284756.htm
Esempio di nuvola di tag:
La generazione del tag cloud viene generalmente aggiornata dinamicamente e il programma di generazione può essere scritto utilizzando vari script. Di seguito viene presentato un modo per generare una libreria di classi javascript. Questa libreria di classi è sviluppata da un'azienda/individuo. Per i dettagli, vedere il codice sorgente di la libreria di classi di fascia più bassa sulla pagina.
Parte della pagina visualizzata:
<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml"
<head
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312" /
<title</title
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"</script
<script type="text/javascript" src="jqcloud-1.0.0.js"</script
<link rel="stylesheet" type="text/css" href="jqcloud.css" /
<script type="text/javascript"
var word_list = [
<?php
$a="食堂,8;义,1;汗,9.4;补贴,8;扛不住,6.2;维,5;施,5;仁政,5;奶,5;以为,4";
$b=explode(";",$a);
foreach($b as $c){
$d=explode(",",$c);
echo "{text:\"".$d[0]."\", weight:".$d[1]."},";
}
?
];
$(function() {
$("#container3").jQCloud(word_list);
});
</script
</head
<body
<div class="circle_Corner" id="key_Words"
<div style="width:800px; height:600px; background-color:#FFFFFF"
<div id="container3" style="width: 800px; height: 600px; margin: 0 auto;text-align:center"</div
</div
</div
</body
</html>La pagina deve chiamare il file JQuery. jqcloud-1.0.0.js è il file della libreria di classi. Il codice sorgente è allegato. jqcloud.css è il file di controllo dello stile CSS di supporto, in cui è specificato il colore e la dimensione del carattere del testo visualizzato può essere modificato. Il codice sorgente è allegato. Nella parte dello script php, $a sono i dati originali, che sono una combinazione di (testo, valore del peso). Ogni record è separato da (;). Fare attenzione a non aggiungere (;) all'ultimo record, altrimenti uno spazio vuoto verrà generato l'array , facendo sì che il javascript venga visualizzato vuoto dopo essere stato letto e il formato compilato dello script php è
{text: "所有", weight: 2},Se utilizzi altri script per generarlo, puoi utilizzare questo formato come destinazione finale per facilitare la lettura da parte degli script javascript.
Se devi inserire tu stesso il testo per la generazione, puoi scrivere una pagina html e passare i parametri a $a.
In più occasioni, la generazione di tag cloud richiede la lettura di valori dal database per ottenere funzionalità di aggiornamento in tempo reale:
$sql=mysql_query(); $res=mysql_fetch_array($sql);
Quindi puoi attraversare l'array con un'istruzione foreach o do while loop,
echo $res[i]
creare
{text: "text", weight: weight},Modulo dati strutturati;
Può anche essere utilizzato
$res=mysql_fetch_object($sql);
form, quindi utilizzare do while loop
$res->name
Emette il valore valore per mettere insieme il modulo dati stabilito.
Se devi aggiungere un collegamento URL al testo del tag cloud, devi solo aggiungere un altro parametro alla struttura dei dati:
{text: "text", weight: weight, link: "url"},Puoi ottenere l'effetto del collegamento URL.
codice sorgente js:
/*!
* jQCloud Plugin for jQuery
*
* Version 1.0.0
*
* Copyright 2011, Luca Ongaro
* Licensed under the MIT license.
*
* Date: Tue Apr 17 16:03:49 +0200 2012
*/
(function( $ ) {
"use strict";
$.fn.jQCloud = function(word_array, options) {
// Reference to the container element
var $this = this;
// Namespace word ids to avoid collisions between multiple clouds
var cloud_namespace = $this.attr('id') || Math.floor((Math.random()*1000000)).toString(36);
// Default options value
var default_options = {
width: $this.width(),
height: $this.height(),
center: {
x: ((options && options.width) ? options.width : $this.width()) / 2.0,
y: ((options && options.height) ? options.height : $this.height()) / 2.0
},
delayedMode: word_array.length > 50,
shape: false // It defaults to elliptic shape
};
options = $.extend(default_options, options || {});
// Add the "jqcloud" class to the container for easy CSS styling, set container width/height
$this.addClass("jqcloud").width(options.width).height(options.height);
// Container's CSS position cannot be 'static'
if ($this.css("position") === "static") {
$this.css("position", "relative");
}
var drawWordCloud = function() {
// Helper function to test if an element overlaps others
var hitTest = function(elem, other_elems){
// Pairwise overlap detection
var overlapping = function(a, b){
if (Math.abs(2.0*a.offsetLeft + a.offsetWidth - 2.0*b.offsetLeft - b.offsetWidth) < a.offsetWidth + b.offsetWidth) {
if (Math.abs(2.0*a.offsetTop + a.offsetHeight - 2.0*b.offsetTop - b.offsetHeight) < a.offsetHeight + b.offsetHeight) {
return true;
}
}
return false;
};
var i = 0;
// Check elements for overlap one by one, stop and return false as soon as an overlap is found
for(i = 0; i < other_elems.length; i++) {
if (overlapping(elem, other_elems[i])) {
return true;
}
}
return false;
};
// Make sure every weight is a number before sorting
for (var i = 0; i < word_array.length; i++) {
word_array[i].weight = parseFloat(word_array[i].weight, 10);
}
// Sort word_array from the word with the highest weight to the one with the lowest
word_array.sort(function(a, b) { if (a.weight < b.weight) {return 1;} else if (a.weight > b.weight) {return -1;} else {return 0;} });
var step = (options.shape === "rectangular") ? 18.0 : 2.0,
already_placed_words = [],
aspect_ratio = options.width / options.height;
// Function to draw a word, by moving it in spiral until it finds a suitable empty place. This will be iterated on each word.
var drawOneWord = function(index, word) {
// Define the ID attribute of the span that will wrap the word, and the associated jQuery selector string
var word_id = cloud_namespace + "_word_" + index,
word_selector = "#" + word_id,
angle = 6.28 * Math.random(),
radius = 0.0,
// Only used if option.shape == 'rectangular'
steps_in_direction = 0.0,
quarter_turns = 0.0,
weight = 5,
custom_class = "",
inner_html = "",
word_span = "";
// Extend word html options with defaults
word.html = $.extend(word.html, {id: word_id});
// If custom class was specified, put them into a variable and remove it from html attrs, to avoid overwriting classes set by jQCloud
if(word.html && word.html["class"]) {
custom_class = word.html["class"];
delete word.html["class"];
}
// Check is min(weight) > max(weight) otherwise use default
if (word_array[0].weight > word_array[word_array.length - 1].weight) {
// Linearly map the original weight to a discrete scale from 1 to 10
weight = Math.round((word.weight - word_array[word_array.length - 1].weight) /
(word_array[0].weight - word_array[word_array.length - 1].weight) * 9.0) + 1;
}
word_span = $('<span>').attr(word.html).addClass('w' + weight + " " + custom_class);
// Append link if word.url attribute was set
if (word.link) {
// If link is a string, then use it as the link href
if(typeof word.link === "string") {
word.link = {href: word.link};
}
// Extend link html options with defaults
word.link = $.extend(word.link, {href: encodeURI(word.link.href).replace(/'/g, "%27")});
inner_html = $('<a>').attr(word.link).text(word.text);
} else {
inner_html = word.text;
}
word_span.append(inner_html);
// Bind handlers to words
if (!!word.handlers) {
for (var prop in word.handlers) {
if (word.handlers.hasOwnProperty(prop) && typeof word.handlers[prop] === 'function') {
$(word_span).bind(prop, word.handlers[prop]);
}
}
}
$this.append(word_span);
var width = word_span.width(),
height = word_span.height(),
left = options.center.x - width / 2.0,
top = options.center.y - height / 2.0;
// Save a reference to the style property, for better performance
var word_style = word_span[0].style;
word_style.position = "absolute";
word_style.left = left + "px";
word_style.top = top + "px";
while(hitTest(document.getElementById(word_id), already_placed_words)) {
// option shape is 'rectangular' so move the word in a rectangular spiral
if (options.shape === "rectangular") {
steps_in_direction++;
if (steps_in_direction * step > (1 + Math.floor(quarter_turns / 2.0)) * step * ((quarter_turns % 4 % 2) === 0 ? 1 : aspect_ratio)) {
steps_in_direction = 0.0;
quarter_turns++;
}
switch(quarter_turns % 4) {
case 1:
left += step * aspect_ratio + Math.random() * 2.0;
break;
case 2:
top -= step + Math.random() * 2.0;
break;
case 3:
left -= step * aspect_ratio + Math.random() * 2.0;
break;
case 0:
top += step + Math.random() * 2.0;
break;
}
} else { // Default settings: elliptic spiral shape
radius += step;
angle += (index % 2 === 0 ? 1 : -1)*step;
left = options.center.x - (width / 2.0) + (radius*Math.cos(angle)) * aspect_ratio;
top = options.center.y + radius*Math.sin(angle) - (height / 2.0);
}
word_style.left = left + "px";
word_style.top = top + "px";
}
already_placed_words.push(document.getElementById(word_id));
// Invoke callback if existing
if ($.isFunction(word.afterWordRender)) {
word.afterWordRender.call(word_span);
}
};
var drawOneWordDelayed = function(index) {
index = index || 0;
if (!$this.is(':visible')) { // if not visible then do not attempt to draw
setTimeout(function(){drawOneWordDelayed(index);},10);
return;
}
if (index < word_array.length) {
drawOneWord(index, word_array[index]);
setTimeout(function(){drawOneWordDelayed(index + 1);}, 10);
} else {
if ($.isFunction(options.afterCloudRender)) {
options.afterCloudRender.call($this);
}
}
};
// Iterate drawOneWord on every word. The way the iteration is done depends on the drawing mode (delayedMode is true or false)
if (options.delayedMode){
drawOneWordDelayed();
}
else {
$.each(word_array, drawOneWord);
if ($.isFunction(options.afterCloudRender)) {
options.afterCloudRender.call($this);
}
}
};
// Delay execution so that the browser can render the page before the computatively intensive word cloud drawing
setTimeout(function(){drawWordCloud();}, 10);
return $this;
};
})(jQuery);codice sorgente css:
div.jqcloud {
font-family: 微软雅黑,"Helvetica", "Microsoft YaHei", sans-serif;
color: #09f;
overflow: hidden;
position: relative;
}
div.jqcloud a {
color: inherit;
font-size: inherit;
text-decoration: none;
}
div.jqcloud a:hover {
color: #0df;
}
div.jqcloud a:hover {
color: #0cf;
}
div.jqcloud span {
padding: 0;
}
div.jqcloud span.w10 {
font-size: 40px;
color: #ff4c8e;
}
div.jqcloud span.w9 {
font-size: 36px;
color: #ffc552;
}
div.jqcloud span.w8 {
font-size: 34px;
color: #addb48;
}
div.jqcloud span.w7 {
font-size: 32px;
color: #d680ff;
}
div.jqcloud span.w6 {
font-size: 30px;
color: #81d7ff;
}
div.jqcloud span.w5 {
font-size: 28px;
color: #FF87B7;
}
div.jqcloud span.w4 {
font-size: 26px;
color: #FBC97A;
}
div.jqcloud span.w3 {
font-size:24px;
color: #BEE269;
}
div.jqcloud span.w2 {
font-size: 22px;
color: #E4AFFF;
}
div.jqcloud span.w1 {
font-size: 20px;
color: #AFE8FF;
}Beta:
http://thatV.promote esistente prestiti.com/Ha appena mancato