jQuery 책 소개(Kindle 버전)
오늘은 jQuery 책을 하나 소개해드리려 합니다. 워드프레스 테마를 수정하는 과정에서 jQuery나 javascript를 알면 의외로 쉽게 구현한 기능들이 많이 있습니다. 현재는 기본적인 것을 응용할 수 있는 단계에 지나지 않아 체계적으로 jQuery와 javascript를 익히고 싶어 인터넷 서점을 ...
""의 검색 결과
jQuery를 사용하여 이메일 유효성 검사 수행하기
이 글에서 javascript를 사용하여 이메일 유효성 검사를 수행하는 방법을 살펴보았습니다. 이 글에서는 jQuery를 사용한 이메일 유효성 검사 방법을 살펴보겠습니다. 마찬가지로 여러 가지 방법이 있을 수 있습니다. (Source: jquerybyexample) validateEmail()은 이메일 주소를 파라미터로 받아서 정규표현식(Regular Expression)을 ...
클릭 시 div를 다른 div로 대체하여 표시하기(jQuery)
예를 들어, 특정 요소의 div를 클릭했을 때 원래 div를 숨기고 다른 div를 표시해야 하는 경우가 있을 수 있습니다. 이 경우에 사용할 수 있는 jQuery 예제를 소개합니다. 원리는 처음 로드할 때에는 첫 번째 div를 표시하고, 두 ...
전체 Div를 클릭 가능하도록 만들기 - jQuery 예제
예를 들어 다음과 같은 상황에서 Div 전체를 클릭 가능하도록 하여 클릭할 경우 지정된 URL로 이동하도록 만들어야 하는 경우가 있습니다. <div class="clickable" url="http://google.com"> 내용 </div> 이 경우 다음과 같은 jQuery 스크립트를 사용할 수 있습니다. $("div.clickable").click( function() ...
jQuery 다중 요소 셀렉터(Multiple Elements Selector)
요소 셀렉터(Element Selector)는 여러 요소를 선택할 때에도 사용할 수 있습니다. 다음과 같은 형식을 사용합니다. $("element1,element2,element3,...") 예를 들어 <h2>, <div>, <span> 요소를 모두 선택하려면 다음과 같이 사용합니다. $("h2, div, span") 문서 내의 모든 요소를 선택하려면 * ...
숫자를 별 등급(평점)으로 변환하는 jQuery
숫자를 별 평점으로 변환하는 jQuery 스크립트 예제입니다. $.fn.generateStars = function() { return this.each(function(i,e){$(e).html($('<span/>').width($(e).text()*16));}); }; // 숫자 평점을 별로 변환하도록 호출하는 함수 $('.star-prototype').generateStars(); //Source: http://htmlexplorer.com/2014/05/display-star-ratings-using-jquery-and.html 데모 참고로 이 글에서는 워드프레스에서 사용자 정의 필드(Custom Field)로 숫자를 받아서 ...
jQuery로 Div의 높이를 동일하게 조정하기
가령 다음과 같이 칸의 내용의 양이 달라 칸의 높이가 제각각인 경우 칸의 높이를 동일하게 조정하고 싶은 경우가 있을 수 있습니다. <div class="container"> <div class="column">3줄<br />3줄<br />3줄</div> <div class="column">1줄</div> <div class="column">2줄<br />2줄</div> </div> ...
아코디언 기능(컨텐츠 펼침/접힘 토글) jQuery II
앞에서 설명했던 jQuery 코드를 응용하여 항목을 누르면 다른 항목은 모두 숨겨지도록 수정한 버전입니다. 시각적인 효과상으로 보기 좋도록 slideUp()을 이용했습니다. $(document).ready(function() { jQuery(".content").hide(); //content 클래스를 가진 div를 표시/숨김(토글) $(".heading").click(function() { $(".content").not($(this).next(".content").slideToggle(500)).slideUp(); }); }); 데모 (* 참고: ...
아코디언 기능(컨텐츠 펼침/접힘 토글) - 자바스크립트/jQuery
Q&A나 FAQ(자주 묻는 지문) 처럼 제목을 누르면 내용이 펼쳐지고 다시 누르면 내용이 접히는 jQuery입니다. 단순하지만 유용하게 사용할 수 있는 코드입니다. 워드프레스를 사용하는 경우 아바다 테마나 엔폴드 테마 등에서 제공하는 아코디언/토글 기능을 사용할 수 있습니다. 엘리멘터 ...
'Load More'(더 보기) 버튼 추가하기(jQuery)
다음 jQuery를 사용하여 "Load More"(더 보기) 버튼을 추가할 수 있습니다. 예를 들어, 전체 항목이 100개이고 초기에 10개(혹은 20개)가 표시되어 있고 "더 보기"를 클릭하면 10개씩 표시되도록 하고자 할 경우 등에 사용할 수 있습니다. $(function(){ $("div").slice(0, 10).show(); ...