[javascript]자바 스크립트 한줄 공지 구현. (vtiker.js)

http://richhollis.github.io/vticker/

에서 소스를 다운받는다
js 파일을 다운 받는게 아니라 코드 자체를 복사 붙혀 해서 뷰 페이지 에 파일을 생성 하고 선언한다.

난 vticker.js 파일로 저장했고 루트경로에 js 폴더에 두었다.


<script type="text/javascript" src="/js/vticker.js"></script>


아래와 같은 html 태그가 있을때
<div id="target">
<ul>
                   <li>aaaa</li>
                   <li>bbbb</li>
                   <li>cccc</li>
</ul>
</div>

$('#target').vTicker({
speed : 1000
,pause : 2000
,showItems : 1
});

와 같은 방식으로 옵션 값을 주고 시작 할수도 있고

$('#target').vTicker(); 기본 값으로 시작 할수도 있다.


멈추고 싶을 경우

$('#target').vTicker('stop'); stop 문자열을 파라미터로 넘기면 멈춘다.

유의사항

이미 html <li> 가 그려져 있는경우
는 정상적으로 작동하지만
ajax 데이터 또는 기타 동적으로 li 태그를 그려줘야 할경우

var li = '';

for(var i in data){
    li +='<li>data[i].text</li>';

}

$("#target > ul).html(li);
또는
$("#target > ul).append(li);

했을때 총 3개의 li가 생성되어야 하는데 vticker 버그인지 6개의 빈 li 가 중간에 하나씩 껴서 6개의 li 가 생성됨.


그래서 위의 코딩 방법으론 정상적인 결과가 나오지 않았다.

해결방법

for(var i in data){
    $("#target > ul")
                 .append($("<li>")
                                 .text(data[i].text));
}

문자열로 붙이는 구조가 아닌 노드를 생성하고 붙이는 방법으로 변경

후 vtickjer  함수 호출 하니 정상적으로 3개의 li 가 생성되어
하나씩 애니매이트 되면서 각각 출력되었다.