spin.js 예제

순수 자바스크립트와 jQuery, prototype 에서도 가능하고..
IE6.x 와 xFlatform 이 되는 스핀 플러그인.
http://fgnass.github.com/spin.js/

제작자는, stop() 한 다음에 다시 spin() 하면 된다 했는데..
spin(option) 으로 하지 않으면 기본 옵션이 적용되므로 유의.


순수 자바스크립트에서는 아래와 같이 사용.
스핀 생성시에 자바스크립트 전역 변수에 담아 두었다가 정지시키는 방식.
<style>
 div.spin {width:100px; height:100px}
</style>

<div class="spin" id="foo1" onclick="javascript:stopMe(1)">Hi, there1!!</div>
<div class="spin" id="foo2" onclick="javascript:stopMe(2)">Hi, there2!!</div>
<div class="spin" id="foo3" onclick="javascript:stopMe(3)">Hi, there3!!</div>

<script type="text/javascript" src="http://fgnass.github.com/spin.js/spin.js"></script>
<script type="text/javascript">
 var opts = {
  lines: 10, // The number of lines to draw
  length: 10, // The length of each line
  width: 7, // The line thickness
  radius: 12, // The radius of the inner circle
  color: '#000', // #rgb or #rrggbb
  speed: 1.4, // Rounds per second
  trail: 54, // Afterglow percentage
  shadow: false // Whether to render a shadow
 };
 var target1 = document.getElementById('foo1');
 var spinner1 = new Spinner(opts).spin(target1);
 var target2 = document.getElementById('foo2');
 var spinner2 = new Spinner(opts).spin(target2);
 var target3 = document.getElementById('foo3');
 var spinner3 = new Spinner(opts).spin(target3);

 function stopMe(n){
  if(n==1) spinner1.stop();
  else if(n==2) spinner2.stop();
  else if(n==3) spinner3.stop();
 }
</script>



그러면, jQuery 에서는..? jQuery 의 data() 를 사용하네요.
<style>
 div.spin {width:100px; height:100px}
</style>

<div class="spin" id="foo1" onclick="javascript:stopMe('foo1')">Hi, there1!!</div>
<div class="spin" id="foo2" onclick="javascript:stopMe('foo2')">Hi, there2!!</div>
<div class="spin" id="foo3" onclick="javascript:stopMe('foo3')">Hi, there3!!</div>

<script type="text/javascript" src="http://fgnass.github.com/spin.js/spin.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
 var opts = {
  lines: 10, // The number of lines to draw
  length: 10, // The length of each line
  width: 7, // The line thickness
  radius: 12, // The radius of the inner circle
  color: '#000', // #rgb or #rrggbb
  speed: 1.4, // Rounds per second
  trail: 54, // Afterglow percentage
  shadow: false // Whether to render a shadow
 };

 var spinner1, spinner2, spinner3;
 function stopMe(id){
  $('#'+id).data().spinner.stop();
// $('#'+id).data('spinner').stop();
 }

 $.fn.spin = function(opts) {
  this.each(function() {
   var $this = $(this), data = $this.data();

   if (data.spinner) {
    data.spinner.stop();
    delete data.spinner;
   }
   if (opts !== false) {
    data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
   }
  });
  return this;
 };

 $(document).ready(function(){
  $('#foo1').spin(opts);
  $('#foo2').spin(opts);
  $('#foo3').spin(opts);
 });
</script>

출처 - http://jsp-making.tistory.com/72