标签云 - jqcloud 用法

 

 

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, {
        width: 300,
        height: 200
    });
});

 

https://github.com/lucaong/jQCloud

 

posted @ 2016-03-25 17:15  ibg  阅读(2572)  评论(0)  编辑  收藏  举报