스크롤 시 고정 메뉴를 투명하게 만드는 jQuery 예제
많은 워드프레스 테마에서 화면을 스크롤하면 상단 메뉴가 고정되고 투명하게 표시되도록 합니다. 이러한 효과를 jQuery를 통해 구현할 수 있습니다. 여러 가지 jQuery 코드를 테스트했는데 그 중 아래의 두 코드가 워드프레스 제대로 작동하는 것을 확인했습니다. 주의: 테마에 ...
jQuery 예제
jQuery 다중 요소 셀렉터(Multiple Elements Selector)
요소 셀렉터(Element Selector)는 여러 요소를 선택할 때에도 사용할 수 있습니다. 다음과 같은 형식을 사용합니다. $("element1,element2,element3,...") 예를 들어 <h2>, <div>, <span> 요소를 모두 선택하려면 다음과 같이 사용합니다. $("h2, div, span") 문서 내의 모든 요소를 선택하려면 * ...
특정 요소를 항상 위에 정렬시키는 jQuery 스크립트
리스트 글에서 특정 클래스의 항목을 항상 상단에 위치시키고자 할 때 사용할 수 있는 간단한 jQuery 코드입니다. $('.featured').prependTo('.order-me'); //Source: http://stackoverflow.com/ 데모
숫자를 그래픽(이미지)으로 변환하는 jQuery
숫자를 이미지화하는 jQuery입니다. $('.visitor').html(function(i, v){ return v.replace(/(\d)/g, '<img src=http://www.allkidsnetwork.com/coloring-pages/Images/Numbers/Small/numbers-$1.jpg />'); }); 예를 들어 숫자로 된 방문자 수를 그림으로 바꿀 수 있습니다. 이외에도 다양하게 활용이 가능합니다. 데모 * Source: http://stackoverflow.com
숫자를 별 등급(평점)으로 변환하는 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의 높이를 동일하게 조정하기 II
DIV의 높이를 동일하게 조정하는 방법은 여러 가지로 생각해볼 수 있습니다. 다음은 동일한 요소(예: EqHeightDiv)를 가진 클래스의 높이를 동일하게 설정하는 jQuery 스크립트입니다. $(document).ready(function(){ $('.container').each(function(){ var highestBox = 0; $('.EqHeightDiv', this).each(function(){ if($(this).height() > highestBox) highestBox = $(this).height(); ...
클릭 시 요소에 따라 동일 영역에 다른 내용 보여주기 jQuery
예를 들어 워드프레스 무료 테마 중 하나인 Hexa는 오른쪽의 아이콘을 누르면 "메뉴", "위젯", "검색 상자"가 각각 상단에서 아래로 내려옵니다. 다음과 같은 jQuery 스크립트로 이와 같은 효과를 얻을 수 있습니다. $("div#head > div").hide(); $("li a").click(function () ...
$('.test').hide() - 특정 클래스 요소 숨김
$(".test").hide() 기본적인 jQuery 선택자의 사용 예입니다. 클래스가 "test"인 요소를 숨깁니다. $("#test").hide()와 차이가 있다면 ID는 한 페이지에 하나밖에 사용할 수 없지만 Class는 중복 사용이 가능합니다. 동일한 요소를 가진 DIV를 여러 개 숨겨야 할 경우에는 클래스를 사용하도록 ...
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(); }); }); 데모 (* 참고: ...
