CSS, jQuery 로 만든 TAB (TAB menu), 탭메뉴, 최신글 출력 탭
본 문서는 2021년 12월 04일 23시 56분 34초에 최종 수정되었습니다.
다수 탭 구성, 외부문서로드, 탭링크바로가기, 자동반복, 자동뒤로반복, 랜덤반복, 반복시간설정
옵션 |
값 |
초기값 |
설명 |
seletorCl |
selector |
ul.rumitab li |
탭메뉴를 구성하는 선택자입니다. |
interValtime |
milliseconds |
3000 |
탭메뉴 자동이동시 탭의 지연시간입니다. (1000 = 1초) |
auTo |
true |
false |
탭메뉴 자동 이동 켬 |
false |
탭메뉴 자동이동 끔 |
starttabNo |
0 ~ N |
0 |
초기 선택된 탭의 번호 |
autoDirection |
next |
next |
왼쪽에서 오른쪽으로 순차적 탭 이동 |
prev |
오른쪽에서 왼쪽으로 역순으로 탭 이동 |
ramdom |
랜덤으로 탭 선택 |
mEvent |
mouseenter |
click |
마우스 오버시 탭 선택 |
click |
마우스 클릭시 탭 선택 |
tabAlign |
left |
left |
탭메뉴를 오른쪽으로 정렬 |
right |
탭메뉴를 왼쪽으로 정렬 |
containerH |
px |
250 |
탭메뉴 본문 내용의 높이 |
JS
$("#TAB_ID").rumiTab({
selectorCl : "ul.rumitab li",
interValtime: 3000, // 3초마다
auTo : true, // 자동으로 다음 탭 이동
starttabNo : 0, // 첫번째 탭부터 시작
autoDirection: "random", // 탭이동은 랜덤
tabAlign : "left", // 탭정렬은 오른쪽
mEvent : "mouseenter", // 탭위에 마우스오버시 해당 탭이 선택되며, 자동이동은 일시 중지됩니다.
containerH : 300 // 탭 박스의 높이 px
});
HTML
- 공지사항
- 최근본글
- A-세번째
- A-네번째
- A-다섯번째
- A-여섯번째
- A-일곱번째
A그룹 두번째 탭
A그룹 세번째 탭
A그룹 네번째 탭
A그룹 다섯번째 탭
A그룹 여섯번째 탭
A그룹 일곱번째 탭
RESULT
JS
$("#TAB_ID").rumiTab({
selectorCl : "ul.rumitab li",
interValtime: 3000, // 3초마다
auTo : true, // 자동으로 다음 탭 이동
starttabNo : 3, // 4번째 탭부터 시작
tabAlign : "right", // 탭 정렬은 오른쪽
containerH : 250 // 탭 박스의 높이 px
});
HTML
- B-첫번째
- B-두번째킹
- B-세번째
- B-네번째
- B-다섯번째
- B-여섯번째
- B-일곱번째
B그룹 첫번째 탭
B그룹 두번째 탭
B그룹 세번째 탭
B그룹 네번째 탭
B그룹 다섯번째 탭
B그룹 여섯번째 탭
B그룹 일곱번째 탭
RESULT
- B-첫번째
- B-두번째킹
- B-세번째
- B-네번째
- B-다섯번째
- B-여섯번째
- B-일곱번째
B그룹 첫번째 탭
B그룹 두번째 탭
B그룹 세번째 탭
B그룹 네번째 탭
B그룹 다섯번째 탭
B그룹 여섯번째 탭
B그룹 일곱번째 탭
JS
$("#TAB_ID").rumiTab({
selectorCl : "ul.rumitab li",
interValtime : 3000,
auTo : true,
starttabNo : 5,
autoDirection : "prev",
containerH : 250
});
HTML
- C-첫번째
- C-두번째킹
- C-세번째
- C-네번째
- C-다섯번째
- C-여섯번째
- C-일곱번째
C그룹 첫번째 탭
C그룹 두번째 탭
C그룹 세번째 탭
C그룹 네번째 탭
C그룹 다섯번째 탭
C그룹 여섯번째 탭
C그룹 일곱번째 탭
RESULT
- C-첫번째
- C-두번째킹
- C-세번째
- C-네번째
- C-다섯번째
- C-여섯번째
- C-일곱번째
C그룹 첫번째 탭
C그룹 두번째 탭
C그룹 세번째 탭
C그룹 네번째 탭
C그룹 다섯번째 탭
C그룹 여섯번째 탭
C그룹 일곱번째 탭
JS
$("#TAB_ID").rumiTab({
selectorCl : "ul.rumitab li",
interValtime: 4000,
auTo : true,
starttabNo : 0,
autoDirection: "next",
tabAlign : "left",
containerH : 300
});
HTML
D그룹 첫번째 탭
D그룹 두번째 탭
D그룹 세번째 탭
D그룹 네번째 탭
RESULT
D그룹 첫번째 탭
D그룹 두번째 탭
D그룹 세번째 탭
D그룹 네번째 탭
JS
$("#TAB_ID").rumiTab({
selectorCl : "ul.rumitab li",
interValtime: 2000,
auTo : true,
starttabNo : 3,
autoDirection: "prev",
tabAlign : "right",
containerH : 300
});
HTML
E그룹 첫번째 탭
E그룹 두번째 탭
E그룹 세번째 탭
E그룹 네번째 탭
RESULT
E그룹 첫번째 탭
E그룹 두번째 탭
E그룹 세번째 탭
E그룹 네번째 탭