순수 자바스크립트와 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

Introduction

다른 테이블에서 가져온 데이터로 현재 테이블에 있는 정보를 찾는 방법을 이번 장에서 알아 본다. 책에선 하위 쿼리라고 하는데, 한글로 번역하지 않고, 그냥 서브 쿼리라고 부르는게 더 좋다고 생각한다.(하위 쿼리라고 검색하면 정보가 서브 쿼리보다 적기 때문이다.)

Content

1. 무엇을 SQL 쿼리라고 하는가?

사전전 의미로 쿼리는 질의인데, DB에 "어떤 어떤 것 주세요~" 라고 요청하는 SQL 절을 쿼리라고 한다.

2. 무엇을 서브 쿼리 라고 하는가?

쿼리 안에 있는 쿼리를 서브 쿼리 라고 한다. 내가 본 시야가 아닌 다른 사람이 본 시야도 같이 참조 하면 더욱 확실해 질 것이다.(이런 여러 시야로 대상을 바라보면, 3D 처럼 구조화 된다.

관련 링크

1. http://kukuta.tistory.com/128
   
2. http://sql.1keydata.com/kr/sql-subquery.php
   

3. 언제 서브 쿼리가 필요한가?

DB에 접근하는 속도를 높이기 위해서, 테이블을 다른 테이블과 관계를 맺어 만든다. 왜냐하면 한 테이블에 많은 정보가 들어 있으면, 속도가 느려지기 때문이다. 이 말은 중복 값을 다른 테이블에 빼고 테이블을 참조 한다는 뜻이다. 이렇게 만들어진 테이블들은 원하는 정보를 가져올 때, 원하는 정보를 찾을 수 있도록 해 주는 키워드가 다른 테이블에 저장되어 있다. 그러므로 다른 테이블에 있는 정보를 가져와 현재 테이블에서 찾고자 할 때, 서브 쿼리가 필요하다.

서브쿼리는 SQL 절에서 계산필드, FROM, WHERE, HAVING에 들어갈 수 있으며, 대개 WHERE 절에서 많이 쓰인다. 사용 방법은 다음과 같다.

4-1 WHERE 절에서 사용 하기

4-2 계산 필드에서 사용 하기

보여줄 열이 SELECT의 결과로 쓰이는 형태로, 다음과 같이 사용 한다.

4-3 FROM 에서 사용 하기

FROM 에서 사용 할 경우(써본적은 없다.)는 대부분 VIEW 테이블이지 않을까 한다. FROM 절에 있는 서브 쿼리로 결과를 얻은 것이 "테이블" 이라고 생각하고 사용 하면 된다.

마땅히 예자가 떠오르지 않아, 사용하기 위한 코드로써 남겨 둔다.

5. 서브 쿼리 사용 규칙

1. 서브쿼리를 WHERE 절에 사용 할 땐, 출력 결과가 한개 열만 된다. (SELECT * FROM .... 이 안된다는 뜻)
   
2. 서브쿼리를 계산 필드에 사용 할 땐, (출력 레코드 갯수 * 서브쿼리) 만큼 쿼리 량이 증가 된다. 이는 성능 정하를 나타낸다.
   
3. 서브쿼리 말고 JOIN 으로도 결과를 나타낼 수 있을 땐, 두개의 성능을 비교 해 보는 것이 좋다.
   

Digression

관련 링크를 찾는 습관을 길러야 겠다고 느낀 장이였다.

출처 - http://ikpil.com/1101

jquery를 이용한 ajax 테이블 페이징

테이블에 여러자료가 있고 그것이 아주많다면 한페이지에 다루기 힘들것이다. 따라서 일부분만보여주고 페이지로 나누어 보여주려고 한다.

여전히 네이버 베스트셀러리스트를 참조했다. 소스가기니 접어두었다.아래 참조

접기

접기

아래와 같은 순서로 해볼것이다.

• 보여줄 페이지설정
• 전체 페이지계산
• 스크립트로 페이지버튼html 소스짜기

보여줄 페이지 설정

한페이지당 우리는 표에서 5개를 봉줄것이다. 따라서 다음과 같이 정한다.

currentPage로 초기값을 0으로주었다.그리고 numPerPage로 기본값을 5로주고 그아래는 계산하고.slice()메소드를 이용해 필요한 만큼 보여주도록 되어있다.

페이지계산 하기

표가 여러개있고 그중 우리는 5개식 보여주기로 했다. 전체표의 열을 5로나누었을때 소수가 되면 페이지계산이안되니 반올림해서 페이지를 늘이도록하자.

위와 같이 한다면 기본소스에서 14열을 사용했으니 반올림하여 14/5 = 3. 따라서 3개의 페이지가 만들어질 것이다.

페이지버튼 html 소스짜기

마지막으로 해 줄 것은 페이지버튼을 만들어주는것이다. 페이지가 늘어남에따라 이버튼역시 늘어나니 스크립트로 만들어줘야한다.

위에서 이벤트가 .click으로 바로 가지않고 .bind로 설정된것은 변수들이 함수밖에 정의되있는것을 참조하기 때문이다. 그냥.click으로 처리한다면 빈페이지가뜰것이다. 이로서 완성되었다.3개의 페이지버튼이나오것이고 한페이지에 5열이 나올 것이다.

다시 둘러보기

이 함수가 정열과 함께 사용되려면 정열이될때마다 페이징이 실행되도록 하면된다.이때 역시 외부에서 참조 하도록 .bind를 쓴다. 최종 코드를보자

마지막으로 호출하기위해 앞쪽의 정렬키뒤에 $table.trigger('repaginate'); 를 추가 해준다

예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/T_usePage.html

출처 - http://siana.tistory.com/entry/ajax-%ED%85%8C%EC%9D%B4%EB%B8%94-%ED%8E%98%EC%9D%B4%EC%A7%95