[jQuery] ajaxForm 플러그인과 validation 플러그인 동시에 사용하기

Posted on 2012/02/21 by 녹풍

요약 : ajaxForm 플러그인 beforeSubmit 옵션에 function(){ return $('.myForm').valid(); } 를 넣어 주면 된다. 나는 폼 관련 처리를 할 때 가장 많이 사용하게 되는 게 jQuery ajaxForm 플러그인과 validation 플러그인인 것 같다. 그런데 이 둘을 동시에 사용하게 되면 validate 플러그인이 작동을 하지 않는다. 이 때 해결책은 간단하다. ajaxForm 문서를 살펴 보면 beforeSubmit이라는 옵션이 있는 것을 볼 수 … ▶전문 보기

jQuery.log(msg) 플러그인을 만들어 봤다

Posted on 2012/01/20 by 녹풍

자바스크립트 디버깅을 할 때 가장 많이 사용하는 것은 alert() 이다. 그러나 alert() 은 확인을 눌러야 하는 번거로움이 있다. 확인을 누르고 나면 내용이 사라져서 여러 개의 alert이 뜰 때는 비효율적인 경우도 있다. 그냥 로그를 뿌려 주는 함수가 있으면 좋을 것 같다는 생각을 하고 검색을 해 봤다. 역시나 나왔다. jQuery.log(), Logging plugin for jQuery 라는 글에는 어떻게 log 함수를 … ▶전문 보기

[jQuery] 맨 위로 스크롤시키기(번쩍 하고 가는 거 말고)

Posted on 2011/08/05 by 녹풍

<a onclick="jQuery('html, body').animate( { 'scrollTop': 0 }, 'slow' );" href="javascript:void(0);"> Go to top </a> 기본적으로는 이 간단한 코드가 맨 위로 올려 주는 코드다. 발견한 곳은 SNIPPLR 다. 그러나 실전에 적용하기 위해서는 난관이 좀 있는 것 같다. 이 블로그에 문제가 있는지 IE7에서는 아래쪽에 있는 데모가 안 돌아간다. 근데 그냥 HTML만 빼서 하면 잘 작동한다. 또한 @third_j님 제보에 … ▶전문 보기

[번역] CSS와 jQuery를 이용한 메가 드롭 다운 메뉴 튜토리얼

Posted on 2011/07/18 by 녹풍

이 메가 드롭다운 메뉴는 내가 애용하는 것이다. 튜토리얼이라 커스터마이징하기는 좀 까다롭지만 말이다. 오늘도 고칠 일이 좀 생겼는데 골치가 좀 아파서 그냥 튜토리얼을 번역하기로 결심했다. 그동안은 그냥 갔다 쓰기만 했는데 이번엔 한 번 제대로 공부해 볼 셈으로 말이다. 그럼 이제부터 번역 시작이다. 이 글을 보면 이 사람의 메가 드롭 다운 메뉴도 커스터마이징하기 … ▶전문 보기

[링크] jQuery 이미지 슬라이드 갤러리/뷰어 모음

Posted on 2011/06/27 by 녹풍

[플러그인] 이미지 갤러리/슬라이드쇼 플러그인 25개 : 2011-08-02 추가 분류를 잘 보고 사용해야 한다 막 갖다 모으는 중이었는데 어느 날 이런 생각이 들었다. "ie6에서는 돌아갈까?" 역시나 몇 개는 돌아가지 않았다. 그리고 살펴 보니, tutorial(연습용 예제)과 plugin은 분명한 차이가 있다. tutorial은 보고 따라하는 거다. 재사용성이 좋을 수도 있지만 안 좋을 수도 있다. 즉, tutorial … ▶전문 보기

[jQuery plugin] 오른쪽 위에 반투명 메세지 박스 띄우는 플러그인 jgrowl

Posted on 2011/06/24 by 녹풍

시간이 없어서 사용법을 자세히 소개하진 못하지만, 굉장히 간단하다. 일단 동영상을 보실까. 코드는 아래와 같다. 샘플 1부터 5까지 쉽게 알 수 있다. // Sample 1 - 그냥 사용하기 $.jGrowl("Hello world!"); // Sample 2 - 안 사라지게 하기 $.jGrowl("Stick this!", { sticky: true }); // Sample 3 - 메세지에 제목 띄우기 $.jGrowl("A message with a header", { header: 'Important' }); // Sample 4 - 시간 정하기(아래는 10초) $.jGrowl("A … ▶전문 보기

toggle:selector 형태로 토글 이벤트 할당하는 함수

Posted on 2011/05/28 by 녹풍

접었다 폈다 하는 기능을 만드는 건 귀찮은 일을 수반한다. 하나쯤 만드는 건 간편하다. jQuery에는 slideToggle 이라는 강력한 메서드가 있다. 그런데 여러 개를 만들다 보면 좀 귀찮다. 코드가 반복된다. 그래서 간단하게, 버튼을 만들고, 거기다 타겟 이름을 적어 주면, 타겟을 접었다 폈다 하게 만드는 그런 이벤트 핸들러를 만들었다. 이렇게 하는 데 기본 아이디어는 코드 … ▶전문 보기

Modernizr 라이브러리로 브라우저의 HTML5 지원 여부 알아 내기 + 플레이스 홀더

Posted on 2011/05/07 by 녹풍

요약: Modernizr를 다운로드한 뒤 헤더에 삽입하고, js 쪽에서 if(Modernizr.input.placeholder == false){ /*브라우저가 HTML5 플레이스 홀더 기능을 지원하지 않을 때 사용할 코드를 넣는다*/} 형식으로 사용한다. 어쩌다 Modernizr를 사용하게 됐는가? 새로 제작하는 웹사이트에 야심차게 플레이스 홀더 기능을 사용해 보려고 했다. 그런데 HTML5부터는 placeholder 기능을 기본으로 지원한다. 지금 … ▶전문 보기

[jQuery] 레이어 팝업으로 이미지를 띄울 때 이미지가 다 불러진 다음 이미지 사이즈를 계산해서 화면 정 중앙에 오게 하기

Posted on 2011/04/29 by 녹풍

요약: $('.certainImage').bind('load', functionName); 형식의 코드를 사용하면 된다. fancybox 라이브러리는 강력한 이미지 갤러리 기능을 갖추고 있다. 그런데 ie6~8에서 화면이 로드되고 약 1~2초 정도 얼어 버리는 (프리징) 현상이 관찰됐다. 어차피 이미지를 확대해 보여 주는 기능밖에 없었기 때문에 fancybox를 제거하고 날코딩을 하기로 결정했다. 소요될 거라 생각한 시간은 대략 1시간이었다. … ▶전문 보기

[번역]jQuery는 플래시를 어떻게 없애고 있나 + jQuery 튜토리얼 & 플래시 애니메이션을 대체할 플러그인

Posted on 2011/02/06 by 녹풍

How jQuery is Killing Flash + jQuery Tutorials & Plugins to Beat Up Flash Animations 위는 원문이고 아래는 제가 번역한 것입니다. 의역이 많이 있으니 정확하게 보고 싶다면 원문을 보세요. -------- 번역 시작 ---------- 1996년에 매크로미디어가 플래시라고 불리는 제품을 내놨다. 이건 벡터 기반 애니메이션 플랫폼이었다. 플래시로 웹디자이너들은 시간순으로 흐르는(using a timeline) 애니메이션과 비디오로서의 … ▶전문 보기

웹으로 말하기

웹개발, PHP, CSS, jQuery, javascript, 아이폰 등등

Tag Archives: jQuery