웹솔루션개발 22년 노하우! 해피CGI의 모든것

css 와 jquery 를 이용하여 아래와 같이 탭 메뉴를 생성할 수 있습니다. 소스는 아래와 같습니다. 스타일과 jquery 를 같이 사용하였습니다. 소스는 첨부파일에 html 파일을 zip 파일로 압축하여 첨부해두었으니 다운받아 사용하시기 바랍니다.

안녕하세요 HappyCGI 입니다. ^^ 얼마전 소스포지에서 누군가 만들어 놓은 탭 기능 괜찮은게 있어서 알려 드립니다. ^^ 해당 소스의 라이센스는 GNU General Public License version 2.0 (GPLv2), MIT License 를 따르고 있습니다. 예제 링크를 참고해 보시면 쉽게 설명이 되어 있습니다. 그래도 혹시 모르시는 분들을 위해서 참고 소스 코드 입니다. Number - - Text - - 위와 같이 코드를 이용해 보시면 쉽게 감이 오실꺼에요. ^^

* License - MIT License * jQuery Responsive Tabs 설명 - javascript/jQuery 사용 - 데스크톱 / 태블릿 /모바일 에 css사용 - 탭이벤트에 대한 콜백이벤트 제공 - URL 해시로 탭을 열 수 있음 - 탭접기 기능 - 탭사용 중지 기능 - 크로스 브라우저 호환성(IE7+, Chrome, Firefox, Safari 및 Opera) * 사용방법 - jQuery 최소 1.7.0 버전 이상필요 - 첨부된 압축파일을 압축을 해제하여 js,css 폴더안에 jquery.responsiveTabs.js , jquery-2.1.0.min.js , responsive-tabs.css 파일을 호출 - HTML 마크업 사용 jquery 함수를 사용하여 선택한 요소에 대한..

스크린샷과 같이 Add Tab 버튼을 클릭하면 tab data 화면으로 텝소스를 추가하고, content 내용에 생성된 텝을 클릭시 출력되는 내용을 입력할 수 있습니다. 위 jquery 소스를 베이스로 하여 위 jquery 버전의 js 를 선언한후 텝관련 js 소스를 선언하여 간단하게 사용이 가능합니다.