html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="jqcloud.css" /> <link rel="stylesheet" type="text/css" href="cloud.css"/> </head> <body> <h1>web-html</h1> <p id="elenum"></p> <div id="words"></div> <h2>h2</h2> <script src="scripts/jquery-2.2.2.js"></script> <script src="scripts/jqcloud-1.0.4.js"></script> <script src="scripts/cloud.js"></script> </body> </html>
js
var word_list = [ { text: "Lorem", weight: 13, link: "https://github.com/DukeLeNoir/jQCloud" }, { text: "Ipsum", weight: 10.5, html: { title: "My Title", "class": "custom-class" }, link: { href: "http://jquery.com/", target: "_blank" } }, { text: "Dolor", weight: 9.4 }, // ... ]; $(function() { //$("#my_favorite_latin_words").jQCloud(word_list); // how many elements on this page var e = $('*').get(); console.log(e.length); // tag name array var arr = [] $.each($('*'), function() { //var myname = this.tagName; // HTML var myname = this.localName; // html if ($.inArray(myname, arr) < 0) { arr.push(myname); } }); $('#elenum').text("Elements number: " + arr.length); console.log("unique:", arr, "lenght:", arr.length); // convert to json var newarr = []; for (i = 0; i < arr.length; i++) { var num = $(arr[i]).length; var data = {}; data['text'] = arr[i]; data['weight'] = num; newarr.push(data); console.log('tag:' + arr[i], "num:" + num); } console.log(JSON.stringify(newarr)); // replace "" var rep = JSON.stringify(newarr) .replace(/"text"/g, "text") .replace(/"weight"/g, "weight"); console.log("->", rep); $("#words").jQCloud(newarr, { 300, height: 200 }); });
https://github.com/lucaong/jQCloud