jQuery - Stringball TagCloud

사내 멘토링 진행하면서 했던것 정리 용 'ㅁ'

원본은 http://codesign.verse.jp/jquery/2009/09/stringball.html
위 사이트에서 확인 하실 수 있습니다.
http://codesign.verse.jp/jquery/ 여기를 방문하면 다양한 jQuery 플러그인을 볼 수 있습니다.
 
저기서 제공하는 플러그인은 단순히 태그 클라우드 구성만 해주기 때문에,
이 플러그인에다가 두 가지 기능을 추가했습니다.

1. 태그에 마우스를 올릴 경우 회전 중지
2. 태그를 클릭할 경우 태그명을 가지고 액션을 수행할 수 있도록 함

간단하게 플러그인에 대한 설명을 하면
(사이트의 설명을 펌질 했습니다.)

・headへの記述

<script type="text/javascript" src="jquery-1.3.2.min.jsへのパス"></script>
<script type="text/javascript" src="jquery.stringball.jsへのパス"></script>
<script type="text/javascript">
$(function(){
	$("ul#stringball").stringball({
		camd:800,  //ボールまでの距離です。
		radi:250,　//ボールの半径です。
		speed:20　 //回転スピードです。
});
});
</script>

・bodyへの記述

<ul id="stringball">
	<li><a href="#">text1</a></li>
	<li><a href="#">text2</a></li>
	<li><a href="#">text4</a></li>
      <!--必要分liタグを繰り返し-->
</ul>

 
ul로 구성된 html에다가 js에서 $("ul#stringball").stringball()을 지정해 주기만 하면 태그 클라우드가 구성 됩니다. 만약 태그를 동적으로 구성하고 싶다면 ul에다가 li를 동적으로 append 해줘야 겠죠.
ex :)
$.ajax({
    url : 'someUrl',
    type: 'post',
    dataType : 'json',
    success : function( data) {
        $.each( data, function( val) {
            $( '#stringball').append('<li><a href="#">val<a/></li>');
        }
    }
});
 
이렇게 태그 클라우드는 간단하게 구성 할 수 있습니다.
참 쉽죠잉~ 태그 플러그인 소스를 살펴 보아도...
사실 별다른 내용은 없고, 위치를 계산 하기 위한 소스가 대부분 입니다.
게다가 주석은 모두 일본어!!! 쿠왁!!
히라가나면 어찌 좀 보겠지만 한문은 무리.. ;
 
플러그인 안에는 두개의 함수가 있습니다.

• setini() - 초기 태그의 위치 값 들을 설정
• setpos() - 태그들의 위치를 설정

그리고 마우스가 태그 클라우드에 hover 했을때 동작하도록 하는 이벤트가 있습니다.
 
여기까지가 기본적인 StringBall에 대한 설명이고
추가로 들어간 기능에 대해서 알아 보도록 하겠습니다.
 
1. 태그에 마우스 올라간 경우 회전 중지
이 경우는 setini()에서 각 태그들의 위치를 설정 할 때,
해당 태그에 mouseover 했을 경우 태그의 스피드를 0으로 설정 하면 됩니다.
ex :)
//태그 위에 마우스 올라왔을때 회전 중지
    $( elem[i]).mouseover(
     function() {
      speed = 0;
    }).mouseout(
     function() {
      speed = realSpeed;
    });
mouseout 했을 때는 이전 스피드로 복구하는걸 잊으시면 안되구요

 

2. 태그를 클릭할 경우 태그명을 가지고 액션을 수행할 수 있도록 함

이것도 setini()에서 태그를 클릭 할 때 수행말 함수를 지정해 주면 됩니다.

ex :)

//태그 클릭했을 때
    $( elem[i]).click( function() {
     clickFunction( $( this).text());
    });

태그를 클릭 했을 때 clickFunction 을 수행하도록 되어 있는데

clickFunction에 동작할 function을 지정해 주기 위해서는

ex :)

var target=$(this),
  elem=$("li" ,target),
  scrz=500,
  radi=options.radi,
  camd=options.camd,
  speed=options.speed, realSpeed=options.speed, clickFunction = options.clickFunction;

이렇게 StringBall 소스를 수정 해야 합니다.

이렇게 수정 한 후, StringBall을 생성 할 때 사용할 함수를 지정해 주면 됩니다.

ex:)

// Tag cloud 생성
   $( target).stringball({
    camd:  850,
    radi:  100,
    speed:  10,
    clickFunction: getTagInfo
   });

이렇게 하면 clickFunction에 getTagInfo라는 함수가 지정 됩니다.

 

여기까지 해서 간단하게 태그클라우드 플러그인을 사용하고 확장 하는 방법을 알아봤습니다.

예제소스를 첨부하오니 확인하시기 바랍니다. ^^