https://hongpage.kr/16 [jQuery] 기본 탭 소스 유용하게 많이 사용하는 기본 jquery 탭 html부분 탭1 탭2 탭3 탭1내용 탭1내용 탭3 탭을 추가하는 경우 1) 사이에 를 추가하고 탭4 탭5 2) 클릭시 나올 컨텐츠 부분도 추가하면된다. 탭4 내용 hongpage.kr 지난번 올린 기본 탭 소스 포스팅은 탭 메뉴를 클릭 했을 때 내용이 바뀌는 방식이었다. 이 코드는 기본 탭 코드와 동일하게 탭 메뉴를 클릭했을 때 내용이 바뀌는 방식 뿐만아니라 auto switch 를 활용해서 탭 메뉴를 클릭하지 않아도 일정시간이 지나면 다음 탭으로 넘어가는 코드이다. 다른 것은 동일하고 스크립트만 변경하면 된다. 탭 넘어가는 속도는 3000 숫자를 조정하면 된다.

홈페이지가 반응형인 경우, 디바이스 크기별 jQuery 스크립트를 다르게 불러와야하는 경우가 종종있다. 같은 슬라이더를 쓰더라도 PC버전과 Mobile 버전의 속성을 다르게 할 수도 있는데 아래와 같이 윈도우 가로 사이즈에 따라서 스크립트를 다르게 불러 올 수 있다. 예시코드 $(window).resize(function(){ if (window.innerWidth > 480) { // 다바이스 크기가 480이상일때 /* 스크립트내용*/ } else { /* 스크립트내용*/ } }).resize(); 화면이 리사이즈 될 때마다 조건에 맞는 스크립트를 불러 오게 된다.

유용하게 많이 사용하는 기본 jquery 탭 html부분 탭1 탭2 탭3 탭1내용 탭1내용 탭3 탭을 추가하는 경우 1) 사이에 를 추가하고 탭4 탭5 2) 클릭시 나올 컨텐츠 부분도 추가하면된다. 탭4 내용 탭5 내용 rel값고, id만 동일하게 넣어주면 된다. 스크립트 $(function () { $(".tab_content").hide(); $(".tab_content:first").show(); $("ul.tabs li").click(function () { $("ul.tabs li").removeClass("active").css("color", "#555"); $(this).addClass("active").css("color", "#fff"); $(".tab_content").hide() v..

매번 jQuery 최신 버전에 맞추어서 다운받고 관리하기가 어렵다면 아래 한줄이면 끝! 이 한줄만 추가하면 jquery를 항상 최신 버전으로 이용할 수 있다.

Datepicker 기본 코드 결과 이 영문으로 표기된 datepicker를 한글로 바꿔보자! 한글로 변경 (모든 input에 적용) 스크립트 부분을 아래와 같이 적용하면 웹사이트 내에 사용되는 모든 datepicker에 한글이 적용된다. 특정 인풋 클릭시에만 datepicker를 한글로 변경하고 싶다면 아래와 같이 인풋 아이디( #datepicker )를 지정하는 방식으로 하면 되지만, 굳이 그럴 이유가 있을까 싶다. 선택 날짜 범위 지정하기 option value 설명 minDate -1D : 하루전 -1M : 한달전 -1Y : 일년전 0 : 오늘부터 최소로 가능한 선택 일자를 지정 max Date 0 : 오늘까지 +1D : 하루후 -1M : 한달후 -1Y : 일년후 최대로 가능한 선택 일자를 지정 ..

Superslide.js 코드가 나온지 꽤 오랜시간이 지난것 같은데 Bxslider와 함께 많이 활용하는 코드이다. Superslide은 풀스크린으로 반응형이 지원되서 꽤 활용도가 높은데, 모바일에서 터치가 되지 않아 불편한 점이 있다. 그래서 touchSwipe 코드를 응용해 스와이프하면 슬라이드가 넘어가도록 만들어보았다. Superslide 기본코드 예시 : www.jqueryscript.net/demo/Full-Screen-Slider-Plugin-Superslides/demo/ Superslide + touchSwipe 기존 Superslide에서 클릭시 넘어가도록 하는 애니메이션이 기본적으로 적용되어있는데 이 부분을 활용하였다. superslides('animate', 'next'); super..