반응형

JQuery 12

jQuery 이펙트(Effect) - Callback(콜백)

자바스크립트는 줄 단위로 실행합니다. 하지만 여러가지 효과들은 효과가 끝나기 전에 다음라인을 수행합니다. 이러한 것으로 인해서 오류가 일어날 수 있습니다. 콜백은 효과가 모두 종료되어야 실행됩니다. 지금까지 보았던 이펙트 관련된 것들을 보면 callback 이라는 부분이 있습니다. 이곳에 필요한 것들을 넣어주게 됩니다. $(selector).hide(speed, callback); 직접 동작을 보는게 좋겠죠. 대가리(head)를 만듭니다. $(document).ready(function(){ $("button").click(function(){ $("p").hide("5000",function(){ alert("The paragraph is now hidden"); }); }); }); 본문(body)는..

Programming 2013.08.01

jQuery 이펙트(Effects) - stop 실행 중단

여러가지 효과를 주다 보면 중단을 시켜야할 때도 있다. 그럴때 사용하는 것이 stop 이다. 구문은 다음과 같다. $(selector).stop(stopAll, gotToEnd); 일단 두상(head)과 몸뚱아리를 만들어 어떻게 동작을 하는지 보도록 하자. $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle(10000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); 몸통은 다음과 같이 작성한다. 이놈 꼼짝마 클릭하시면 쑥쑥 자라나요. 은행 이자가 이렇게 늘어나면 좋겠는데 상단부를 누르면 자라목과 같이 슉하고 나오는데 그 동안에 상단의 버튼을 누르..

Programming 2013.07.31

jQuery 이펙트(Effects) - animate() 애니메이션

다른 이펙트보다 더 동적인 움직임을 표현할 수 있습니다. animate의 구문은 다음과 같습니다. $(selector).animate({params},speed,callback); // {params} 에 들어가는 것은 해당 요소를 꾸미는 것입니다. CSS 일단 어떤 동작을 하는지 보기 위해서 머리(head) 부분에 다음과 같이 입력합니다. 몸뚱아리(body)를 꾸며야 동작을 하는걸 볼수 있겠죠? 투포환 선수 폭탄 입니다. 버튼을 누르게 되면 처음에 있던 자리에서 왼쪽으로 350픽셀만큼 이동합니다. 그럼 조금 더 다른 것을 해보겠습니다. head에서 조금만 변경합니다. $("div").animate({left:'350px'}); // 위처럼 되어 있는 곳을 아래와 같이 바꿉니다. $("div").anim..

Programming 2013.07.30

jQuery 이펙트(Effects) - 슬라이딩(sliding) - 스르륵 사라지고 나타나기

축구에 보면 슬라이딩이라는 말이 있다. 미끄러지면서 상대방의 공을 뺏는 것을 말한다. 물론 여러곳에서 쓰이지만 jQuery 이펙트에도 이런 형태의 효과가 있다. sliding 은 다음과 같은 것이 있다. $().slideDown();// 아래쪽으로 미끄러지는 효과 $().slideUp();// 위쪽으로 미끄러지는 효과 $().slideToggle();// 오르락 내리락 반복하는 효과 Down + UP 그럼 일단 대가리 아니 head에 들어가는 부분을 다음과 같이 작성한다. jQuery를 포함하는 구문은 생략한다. 몸뚱아리(body) 부분에는 다음과 같이 작성을 한다. 19금 아니여도 클릭해주세요. 이렇게 슝하고 나오는 겁니다. 아래로 툭 하고 튀어나오는 것을 볼수 있을 겁니다. 이제 슉 들어가는 slid..

Programming 2013.07.29

jQuery 이펙트(Effects) - 페이드(Fading) 숨김, 나타내기, 투명도등등...

fade 효과를 적용하기 위해서는 다음과 같은 함수들을 사용합니다. $().fadeIn();// 지정한 요소를 나타나게 합니다. $().fadeOut();// 지정한 요소를 사라지게 합니다. $().fadeToggle();// in + out 효과를 반복합니다. $().fadeTo();// 불투명하게 사라집니다. 어떤 동작을 하는지 알아보기 위해서 일단 head에 다음과 같이 작성합니다. html의 body에 다음과 같이 입력합니다. 눌러보세요. 시골 부동산 가격 비싸다 fadeout을 알아보기 위해서 head에는 다음을 입력합니다. 내용이 보여야 되는 body 부분에는 눌러보세요. 보험료도 대박 페이지를 확인하면 처음에 보이던 것이 버튼을 누르면 사라집니다. fadeToggle는 fadeIn과 Out을..

Programming 2013.07.29

jQuery 이펙트(Effects) - 숨김, 나타내기 (Hide and Show, toggle)

웹사이트를 돌아다니다 보면 버튼이나 아이콘을 클릭하면 사라졌다가 나타나는 것을 볼수 있다. 이러한 것들이 javascript를 이용한 것이다. jQuery에서는 이러한 효과를 간단하게 적용할 수 있다. 다음과 같은 것을 사용한다. $().hide();// 해당하는 html 요소를 숨긴다. $().show();// 해당하는 html 요소를 보여준다. $().togggle();// hide와 show를 번갈아 가면수 수행한다. 위 3가지의 구문은 다음과 같다. $(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback); 어떻게 동작하는지 확인해보기 위해서 일단 head 부분에 다음과 ..

Programming 2013.07.28

jQuery 이벤트(jQuery Event Methods)

jQuery는 html 페이지에 일어나는 작업에 대해서 처리를 합니다. 예를 틀면 마우스 이동, 마우스클릭, 키보드, 입력 폼, 문서 읽기등 같은 것을 말합니다. 몇가지 알아보도록 하겠습니다. $("").click();// 클릭에 관한 것을 처리합니다. $("").dbclick();// 더블클릭 처리 $("").mouseenter();// 마우스가 해당하는 요소로 들어오는 것을 감지합니다. click()은 아래와 같은 형태를 해보면 작동하는 것을 확인할 수 있습니다. head에 다음과 같은 것을 입력합니다. body에 div 요소가 들어가는 것을 입력합니다. div 요소 클릭하면 사라져요. DIV가 아니라 안 사라져요. 저도 DIV요소라서 같이 사라져요 작성이 되었다면 해당 요소를 클릭했을때 사라지는 것..

Programming 2013.07.28

jQuery 기본사용 및 Selectors

jQuery 는 HTML 요소를 선택하고 그것에 여러가지 작업을 할 수 있습니다. 기본 형태는 다음과 같습니다. $(selector).action() $ 는 jQuery를 사용한다는 것을 명시하기 위해서 기본적으로 필요한 것입니다. (selector) 작업을 하기 위해서 선택하는 html 구성요소를 말합니다. action() 선택한 요소에 어떤 것을 수행할지 그 작업에 대한 것을 말합니다. 예를 들면 다음과 같은 형태로 사용됩니다. $("p").hide()// html 코드중 요소를 모두 숨깁니다. $(".test").hide()// html 코드중 class="test"로 지정된 것을 숨깁니다. $("#test").hide()// html 코드중 id="test" 로 지정된 것을 숨깁니다. jQuery..

Programming 2013.07.27

jQuery 및 javascript 외부에서 추가하는 여러가지 방법

jQuery 및 javascript 외부에서 추가하는 여러가지 방법 jQuery 사이트에서 해당하는 것을 다운로드 받은후 해당하는 페이지에 적용하는게 일반적(?)이다. 하지만 이렇게 하면 사용자 계정의 트래픽이 증가하게 된다. 용량이 크지는 않지만 트래픽 허용량이 작은 계정을 사용하는 사람이라면 부담이 된다. 온라인으로 jQuery를 제공하는 사이트들이 몇 곳 있다. 이 곳을 사용하면 약간(?)이나마 부담을 덜 수 있다. 1. Google 에서 제공하는 jQuery 구글에서는 몇가지 자바스크립트 들에 대해서 제공하고 있다. AngularJS, ChromeFrame, Dojo, Ext Core, jQuery, jQuery UI, MooTools Prototype, script.aculo.us, SWFObj..

Programming 2013.07.24

이미지 또는 글을 간단하게 슬라이딩(Slideshow plugin for the Tabs with jquery)

이미지 또는 글을 간단하게 슬라이딩(Slideshow plugin for the Tabs with jquery) 이미지나 글들이 일정한 시간에 따라 변하는 것을 본적이 있을 것이다. 이것을 적용하는 방법은 여러가지가 있는데 그중 하나를 적어봅니다. 1. jQuery를 사용하려면 항상 해야 하는 것이 있다.jQuery 파일을 html에 넣어주어야 한다.다음은 구글 CDN에서 받아도로록 하는 것이다.html 문서 처음에 있는 head 부분에 넣어주도록 한다. 2. css를 넣는다. 기존에 가지고 있던 파일에 추가하거나 새로운 파일을 만들어 html에 넣어준다. /* container for slides */ .images { background:#fff url(h3.png) repeat-x; border:1..

Programming 2013.07.24

아코디언(accordion) 메뉴를 적용해 보자.

한쪽이 줄어들면 다른 쪽은 늘어나는 형태의 메뉴이다. 개인에 따라서 수정을 해야 되는 부분도 있지만 쉽게(?) 적용이 가능하다. 1. jQuery를 이용하기 때문에 js 파일을 넣는다.위치는 html 문서 처음을 보면 head 라는 곳이 있다 이곳에 넣으면 된다. 2. css 에 대한 설정을 넣는다. 새로운 파일을 만들어서 넣거나 기존의 CSS에 추가합니다. /* root element for accordion. decorated with rounded borders and gradient background image */ #accordion { background:#333 url(h3.png) 0 0; width: 300px; border:1px solid #333; -background:#666; ..

Programming 2013.07.24

jQuery는 무엇인가?

jQuery는 자바스크립트 라이브러리로 복잡한 상호작용을 하는 자바스크립트를 쉽게 추가할수 있도록 해주면서 다양한 웹 브라우저에서 동작하도록 만들어 준다. IE6-9, FireFox, Safari, Chrome, Opera등등을 지원하고 있다. jQuery는 많은 개발자들이 사용하고 있고 마이크로소트프(MS)는 ASP.NET AJAX, ASP.NET MVC등 프레임워크에도 적용을 하였다. 노키아(Nokia)는 자사의 런타입 웹 위젯 개발 플랫폼에 통합하였다. jQuery로 무엇을 할 수 있는가? jQuery API 페이지에 자세한 내용이 있다. http://api.jquery.com/ 몇가지 추려보면 DOM을 통한 CSS제어 데이터 제어 특수효과 및 애니메이션 AJAX 일관된 이벤트 액션 등등 많은 것을..

Programming 2013.07.23
반응형