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
RESULT
- Ckeditor5 + Plupload + Fancybox 2021-10-24
- TABLE 테스트 2021-10-24
- 유투브 동영상 공유 방법. 2021-10-24
- 실 서버에 설치 하니 잘 되는 군요..^^(2 ) 2023-04-17
- 아버지의 손수 지은 목조 집에서 꿈을 찾아나가다 2023-03-23
- rthuj56tjrtj3rther 2023-03-02
- trjrtj345fhrh 2023-02-28
- 테스트 해봅니다.(1 ) 2023-01-22
- [ 배포 ] 그누보드 5.5.X 이상 / ajax 기본 게시판 …(3 ) 2022-12-17
- 저작권침해 이미지.. 2011-11-14
- 저작권은? 2012-04-19
- 도라에몽 1회 마시지 무료 이용권 2021-12-01
- 고양이 간식 - 츄르 60개 1박스 2021-11-29
- CANON 5D MARK4(1 ) 2021-11-29
- 스테인레스 컵 400ML 2021-11-29
- 고양이 간식 템테이션 2021-11-29
- 모니터 2021-11-29
- 테블렛 거치대 대형 2021-11-29
- 고양이 높이조절식기세트 6단조절 2021-11-29
- 글쓰기 테스트 2022-02-13
- 자유게시판 글쓰기... 이미지 업로드 2022-02-13
- 자동문서생성기로 만들어진 문서. 2022-02-13
- 웹접근성 선형화에 최적화된 초신글 탭 2022-01-29
- 멋있네요. 2021-12-14
- 홈페이지가 바뀌었네요 2021-11-29
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-네번째
D그룹 첫번째 탭
D그룹 두번째 탭
D그룹 세번째 탭
D그룹 네번째 탭
RESULT
- D-첫번째
- D-두번째킹
- D-세번째
- D-네번째
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
- C-첫번째
- C-두번째킹
- C-세번째
- C-네번째
E그룹 첫번째 탭
E그룹 두번째 탭
E그룹 세번째 탭
E그룹 네번째 탭
RESULT
- C-첫번째
- C-두번째킹
- C-세번째
- C-네번째
E그룹 첫번째 탭
E그룹 두번째 탭
E그룹 세번째 탭
E그룹 네번째 탭