Category jQuery
jQuery로 만든 Tab Menu 플로그인.
웹에서 자주 사용하는 Tab Menu를 플로그인으로 만들어봤습니다. 소스는 초보자들을 위해서 만들었으니 참고 부탁드립니다.
동적인 애니메이션을 만들기 위해서는 CSS3를 이용을 해야한다. CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다. 간단히 애니메이션에 대해서 알아보도록 하자. 애니메이션 속성 animation-delay: 엘리먼트가 로드되고 나서 언제 애니메이션 시작될지 지정한다. animation-direction: 애니메이션 종료되고 다시 처음부터 시작할지 역방향으로… Continue Reading →
$(document).keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.which); if(keycode == ’13’){ return false; } });
클릭을 했을 경우 href="#아이디값"으로 끊겨서 이동하는 것이 아니라 jQuery의 .animate()를 이용해서 화면이 부드럽게 이동되게 할 수 있다. 또 아이디 값이 없고 #만 있을 경우는 맨 위로 이동 시키게 할 수 있는데 참고 소스는 아래와 같다. 부드럽게 스크롤링의 접근성 원활한 스크롤링을… Continue Reading →
$ .holdReady () 메소드는 jQuery의 ready 이벤트를 지연 호출 할 수 있다. 이 고급 기능은 일반적으로 DOM을 준비 할 수 있다하더라도, 준비 이벤트가 발생하도록 허용하기 전에 이러한 jQuery를 플러그인으로 추가 자바 스크립트를로드 할 동적 스크립트 로더에 의해 사용된다. 이 방법은… Continue Reading →
jQuery로 애니메이션을 구현할 때 흔히 만나게 되는 문제가 하나 있다. 바로 애니메이션 큐(queue) 이다. 예를들어, 네비게이션 메뉴에 마우스가 오면 애니메이션이 동작하게 코딩이 된 경우, 마우스를 여러번 움직였을 때, 이전 애니메이션이 멈추기 전까지 마지막 애니메이션이 동작하지 않는 현상이 바로 애니메이션 큐로… Continue Reading →
마우스가 접근했을 때 다른 이미지로 교체하는 방법 Class를 이용하는 방법 img태그에 class를 기입한다. <img src=”img_off.png” class=”rollover” /> jQuery로 변경을 한다. $(“.rollover”).on(‘mouseenter’, function() { $(this).attr(“src”, $(this).attr(“src”).replace(“_off”,”_on”)); }).on(‘mouseleave’, function() { $(this).attr(“src”, $(this).attr(“src”).replace(“_on”, “_off”)); }); .index()를 이용하는 방법 리스트내에서 순서를 부여해 해다하는 객체만… Continue Reading →
JavsScript 프레임 워크들이 많아서 공부 할 것들이 너무 많다. 그래서 많이 쓰이면서 공부해야할 것들을 정리를 해보았다. 다른 곳에서 정리 한것을 재정리를 한 것이다. Angular.js http://angularjs.org Underscore.js http://underscorejs.org D3.js http://d3js.org Node.js http://nodejs.org two.js http://jonobr1.github.io/two.js Zebra https://github.com/barmalei/zebra Formula.js Chart.js http://www.chartjs.org Parallel.js http://adambom.github.io/parallel.js… Continue Reading →
checked 여부 확인 $(“input:checkbox[id=’ID’]”).is(“:checked”) == true : false /* by ID */ $(“input:checkbox[name=’NAME’]”).is(“:checked”) == true : false /* by NAME */ checked/unchecked 처리 $(“input:checkbox[id=’ID’]”).attr(“checked”, true); /* by ID */ $(“input:checkbox[name=’NAME’]”).attr(“checked”, false); /* by NAME */ 특정 라디오버튼 선택… Continue Reading →
스크롤 내릴때와 올릴때 다른 이벤트를 적용하고 싶은데…헷갈려서 구글링 한결과 다음 같이 나왔다. <script type=’text/javascript’> $(function(){ //Keep track of last scroll var lastScroll = 0; $(window).scroll(function(event){ //Sets the current scroll position var st = $(this).scrollTop(); //Determines up-or-down scrolling if (st >… Continue Reading →
noUiSlider는 IE7++ 크롬, 파이어폭스, IE,오페라, 사파리 주요사용하는 모든 브라우저에 사용이 가능합니다. 사용방법: <!– jQuery or Zepto –> <script src=”jquery / zepto.js”></script> <!– The noUiSlider script and stylesheet –> <link href=”jquery.nouislider.css” rel=”stylesheet”> <script src=”jquery.nouislider.js”></script> 다운받기: http://refreshless.com/nouislider/download 출처: http://refreshless.com/nouislider/
parents() http://api.jquery.com/parents/ 선택된 엘리먼트의 모든 부모 엘리먼트 요소를 가지오게 된다. 예) <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>parents demo</title> <style> p, div, span { margin: 2px; padding: 1px; } div { border: 2px white solid; } span { cursor:… Continue Reading →
10 Free jQuery Parallax Scrolling Plugins 소개 출처 : http://www.desiznworld.com/2013/07/free-jquery-parallax-scrolling-plugins.html Parallax.js Source | Demo Parallaxjs Source | Demo Scrollorama Source | Demo Superscrollorama Source | Demo Parallax-Scrolling Source | Demo Skrollr Source | Demo jQuery Scroll Parallax Plugin Source |… Continue Reading →
if($(“#id”) != null) { } if($(“.class”) != null) { } 이렇게 쓰는 것보다는 if($(“#id”).length > 0) { } if($(“.class”).length > 0) { } 이런식으로 쓰는 것이 좀 더 정확하고 맞을 것이다.
Tab 1 Tab 2 tab-1 내용 tab-2 내용
/** Jquery를 이용한 ← (백스페이스) 사용 막기 **/
var inputFocus = function() { var inputTxt = $(“input[class*=’_input’]”); inputTxt.each(function(){ var $this = $(this), default_value = $this.val(); $this.on(‘focus’, function() { if ($this.val() == default_value) { $this.val(“”); } $this.removeClass(‘filled’); $this.addClass(‘on’); }); $this.on(‘blur’, function() { if($this.val().length == 0) { $this.val(default_value).addClass(‘filled’); $this.removeClass(‘on’); }… Continue Reading →