HTML + JAVASCRIPT + CSS

[jQCloud] 간단하게 사용하는 TAG CLOUD

lahuman 2014. 8. 18. 16:44
728x90

Tag Cloud 기술을 간단하게 사용할 수 있는 Jquery plugin 을 소개 합니다.



사용법은 간단 합니다.



 /*!
       * Create an array of word objects, each representing a word in the cloud
       */
      var word_array = [
          {text: "Lorem", weight: 15},
          {text: "Ipsum", weight: 9, link: "http://jquery.com/"},
          {text: "Dolor", weight: 6, html: {title: "I can haz any html attribute"}},
          {text: "Sit", weight: 7},
          {text: "Amet", weight: 5}
          // ...as many words as you want
      ];

      $(function() {
        // When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
        $("#example").jQCloud(word_array);
      });



과 같이 하면, 


다음과 같은 UI가 표출 됩니다.



데이터만 잘 만들면 꽤나 유용한 기능을 제공 할 것이라 판단 됩니다.

참고로 위에 소스를 보면 아시듯이 TITLE과 LINK 기능을 지원 합니다.




샘플 : http://www.lucaongaro.eu/demos/jqcloud/

github : https://github.com/lucaong/jQCloud

728x90