일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- #image
- 게시판
- 웹솔루션
- 홈페이지제작
- #이미지
- #쇼핑몰
- #CSS
- 해피CGI
- happycgi
- 쇼핑몰
- #동영상
- 솔루션
- 홈페이지
- #홈페이지제작
- 해피씨지아이
- php
- #해피CGI
- #업종별
- 사이트제작
- #cgimall
- #솔루션
- CGIMALL
- #happycgi
- javascript
- #웹솔루션
- CSS
- #홈페이지
- #뉴스
- jquery
- #jQuery
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Auto Tab 본문
안녕하세요 HappyCGI 입니다. ^^
얼마전 소스포지에서 누군가 만들어 놓은 탭 기능 괜찮은게 있어서 알려 드립니다. ^^
해당 소스의 라이센스는 GNU General Public License version 2.0 (GPLv2), MIT License 를 따르고 있습니다.
예제 링크를 참고해 보시면 쉽게 설명이 되어 있습니다.
그래도 혹시 모르시는 분들을 위해서 참고 소스 코드 입니다.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.autotab.js"></script>
<script>
$(function () {
$.autotab({ tabOnSelect: true });
$('.number').autotab('filter', 'number');
$('.text').autotab('filter', 'text');
}
</script>
<div>
<label for="number1">Number</label>
<input type="text" id="number1" class="number" maxlength="3" size="3">-
<input type="text" id="number2" class="number" maxlength="3" size="3">-
<input type="text" id="number3" class="number" maxlength="4" size="5">
</div>
<div>
<label for="number1">Text</label>
<input type="text" id="text1" class="text" maxlength="3" size="3">-
<input type="text" id="text2" class="text" maxlength="3" size="3">-
<input type="text" id="text3" class="text" maxlength="4" size="5">
</div>
위와 같이 코드를 이용해 보시면 쉽게 감이 오실꺼에요. ^^
'웹프로그램밍 자료실 > 기타 자료' 카테고리의 다른 글
[해피CGI][cgimall] FireFTP v2.0.28 (0) | 2018.01.16 |
---|---|
[해피CGI][cgimall] HTML 무료강좌 홈짱닷컴! (0) | 2018.01.16 |
[해피CGI][cgimall] 무료 파비콘 제작 (0) | 2018.01.11 |
[해피CGI][cgimall] whoisology.com - 특정 이메일로 등록된 도메인 검색 서비스 (0) | 2018.01.10 |
[해피CGI][cgimall] 모던한 느낌의 삼각형 패턴 효과 만들기 (스*벅스 패턴) (0) | 2018.01.10 |