아코디언 기능(컨텐츠 펼침/접힘 토글) - 자바스크립트/jQuery
Q&A나 FAQ(자주 묻는 지문) 처럼 제목을 누르면 내용이 펼쳐지고 다시 누르면 내용이 접히는 jQuery입니다. 단순하지만 유용하게 사용할 수 있는 코드입니다. 워드프레스를 사용하는 경우 아바다 테마나 엔폴드 테마 등에서 제공하는 아코디언/토글 기능을 사용할 수 있습니다. 엘리멘터 ...
jQuery 예제
'Load More'(더 보기) 버튼 추가하기(jQuery)
다음 jQuery를 사용하여 "Load More"(더 보기) 버튼을 추가할 수 있습니다. 예를 들어, 전체 항목이 100개이고 초기에 10개(혹은 20개)가 표시되어 있고 "더 보기"를 클릭하면 10개씩 표시되도록 하고자 할 경우 등에 사용할 수 있습니다. $(function(){ $("div").slice(0, 10).show(); ...
입력 필드에서 미리 입력한 글자 삭제하지 못하도록 하기(javascript)
예를 들어 입력 필드에 "이메일:", "전화번호:" 등 미리 입력되어 있는 텍스트가 삭제되지 않고 유지되도록 하는 자바스크립트입니다. $('#eMail').keyup(function(){ $(this).css('color','#000'); }); $('#eMail').blur(function(){ var value = $('#labletext').text()+$(this).val(); alert(value); }); // Source: http://stackoverflow.com/ 데모
클릭 시 특정 목록 항목을 맨 위로 이동시키기(jQuery)
예를 들어 다음과 같은 목록이 있을 때 클릭 시 특정 항목(가령 복숭아와 수박)을 맨 위로 정렬하고, 다시 클릭하면 원래대로 복귀시키고자 하는 경우에 사용할 수 있는 jQuery 코드입니다: 사과 배 복숭아* 수박* 바나나 jQuery: $('.featuredon').show(); $('.featuredoff').hide(); ...
클릭 시 동일한 class(일련번호)를 가진 div 표시하기 jQuery
예를 들어, ID가 wrapper1인 요소를 클릭하면 Class가 wrapper1인 DIV가 표시되고, ID가 wrapper2인 요소를 클릭하면 Class가 wrapper2인 DIV가 표시되도록 하려는 경우 다음 jQuery 코드를 사용할 수 있습니다. $('[id^="wrapper"]').on('click', function(e) { e.preventDefault(); $('.wrap > div').hide(); $('.'+ this.id).show(); ...
드롭다운 목록 계산 jQuery
위의 그림과 같이 드롭다운 목록에서 항목을 선택하면 각 항목에 대한 합계가 표시되도록 하는 jQuery 코드입니다. $(function () { var fields = $('#form1 :input').change(calculate); function calculate() { var price = 0; fields.each(function () { price += ...
폼 필드 미리 채우기 jQuery
다음 jQuery 스크립트를 사용하여 폼 필드를 미리 채워넣기를 쉽게 구현할 수 있습니다. rel="기본값" 형태로 기본 텍스트를 미리 채워넣을 수 있고, 클릭하면 채워진 텍스트가 사라지고 필드에 아무런 내용이 입력되지 않으면 기본값이 다시 복원됩니다. //rel 속성을 사용하여 ...
jQuery 날짜 선택기(datepicker)에서 오늘 날짜 이후부터 선택 가능하도록 설정하기
jQuery 날짜 선택기에서 과거 날짜를 선택하지 못하도록 비활성화하고 오늘 이후부터 선택할 수 있도록 하려면 minDate: 0을 추가하면 됩니다. $(function() { $( "#datepicker" ).datepicker({ minDate: 0}); }); 예:
클릭 시 요소 표시하기/숨기기 jQuery - II
링크를 클릭하면 요소가 표시되고 다시 클릭하면 숨기는 jQuery 코드입니다. $(document).ready(function() { $('#showmenu').click(function() { $('.menu').slideToggle("fast"); }); }); 데모 여기에서 실제 작동을 확인할 수 있습니다. KBoard 견적서 양식에서 "약관 보기"를 클릭하면 숨겨져 있던 약관 박스가 표시되고, 다시 ...
클릭 시 텍스트 표시/숨기기 jQuery
링크를 클릭하면 해당 텍스트가 지정된 위치에 표시되고 다시 링크를 클릭하면 사라지는 jQuery 코드 샘플입니다. 참고로 워드프레스 엘리멘터 페이지 빌더나 아바다 테마 등을 사용하면 토글/아코디언 요소가 제공됩니다. 클릭 시 텍스트 표시/숨기기 jQuery 코드: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> ...
