jQuery 공작소 : 제이쿼리UI 사용하기

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

jqueryUI 만 간단히 사용하는 방법입니다.

예제 1
다운받고 로딩하기
jQuery

- http://jqueryui.com/ 에 접속 후 우측에 Stable 버튼을 눌러서 다운 받습니다.
- 다운 받은 파일을 압축해제 하고 jquery-ui.min.js 파일을 찾습니다.
- 해당 파일을 추가로 로딩해서 사용하면 됩니다.
- <script type="text/javascript" src="jquery-ui.min.js"></script> 이렇게요.
- 이 추가 파일은 이징효과드래그 같은 기능을 사용하기 위해서 필요합니다.
- 참고 글 : easing(이징) 효과 모음

예제 2
드래그 기능과 이징(easing)효과를 사용한 예제
보기
음식들을 마우스로 끌었다가 놓아보세요~



소스
<style type="text/css">
    .css_test {
    }
    .css_test img {
        cursor : move;
    }
</style>

음식들을 마우스로 끌었다가 놓아보세요~<br><br>

<div class="css_test">
    <img src="//superkts.com/img/icon/food/fff22.gif" />
    <img src="//superkts.com/img/icon/food/fff27.gif" />
    <img src="//superkts.com/img/icon/food/fff28.gif" />
    <img src="//superkts.com/img/icon/food/fo028.gif" />
    <img src="//superkts.com/img/icon/food/fo035.gif" /><br><br>
    <img src="//superkts.com/img/icon/food/food_fd32.gif" />
    <img src="//superkts.com/img/icon/food/food09[1].gif" />
    <img src="//superkts.com/img/icon/food/food_fd213.gif" />
</div>

<script type="text/javascript">

    // 보기편하게 여러줄로 코딩
    $( '.css_test img' )
    .draggable({
        stop : function(){ // 드래그 종료시 실행
            $(this).animate({ top : 0, left : 0 }, 1000, 'easeOutElastic' ); // 커지게 만들고 원위치로
            // 제이쿼리UI 의 이징효과 사용
        }
    })

</script>
관련 CSS
jQuery
- 이런 것을 만들려면 jQuery UI 가 필요합니다.
- 이징 효과와 draggable 메서드를 사용하였습니다.

- 드래그 기능 : 마우스로 음식이미지를 끌 수 있게 해줍니다.
- 이징효과 : 마우스를 놓았을때 음식이 원위치로 돌아가면서 스프링같은 움직임을 보이는데 이것이 이징효과 입니다.

* 관련 예제
- 당겼다가 놓으면 제자리로 돌아가는 음식들
- 우리가 남이가 (드래그하면 같이 움직이는 얼굴들)
- 음식 무한 복제