CSS, jQuery 로 만든 TAB (TAB menu), 탭메뉴, 최신글 출력 탭

본 문서는 2021년 12월 04일 23시 56분 34초에 최종 수정되었습니다.

다수 탭 구성, 외부문서로드, 탭링크바로가기, 자동반복, 자동뒤로반복, 랜덤반복, 반복시간설정

옵션	값	초기값	설명
seletorCl	selector	ul.rumitab li	탭메뉴를 구성하는 선택자입니다.
interValtime	milliseconds	3000	탭메뉴 자동이동시 탭의 지연시간입니다. (1000 = 1초)
auTo	true	false	탭메뉴 자동 이동 켬
auTo	false	false	탭메뉴 자동이동 끔
starttabNo	0 ~ N	0	초기 선택된 탭의 번호
autoDirection	next	next	왼쪽에서 오른쪽으로 순차적 탭 이동
	prev		오른쪽에서 왼쪽으로 역순으로 탭 이동
	ramdom		랜덤으로 탭 선택
mEvent	mouseenter	click	마우스 오버시 탭 선택
mEvent	click	click	마우스 클릭시 탭 선택
tabAlign	left	left	탭메뉴를 오른쪽으로 정렬
tabAlign	right	left	탭메뉴를 왼쪽으로 정렬
containerH	px	250	탭메뉴 본문 내용의 높이

        $("#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

자유게시판

Ckeditor5 + Plupload + Fancybox(1 ) 2021-10-24
TABLE 테스트(1 ) 2021-10-24
유투브 동영상 공유 방법. 2021-10-24

        $("#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그룹 일곱번째 탭

        $("#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그룹 일곱번째 탭

                $("#TAB_ID").rumiTab({
                    selectorCl  : "ul.rumitab li",
                    interValtime: 4000,
                    auTo        : true,
                    starttabNo  : 0,
                    autoDirection: "next",
                    tabAlign  : "left",
                    containerH  : 300
                });

HTML

RESULT

D-첫번째
D-두번째킹
D-세번째
D-네번째

D그룹 첫번째 탭

D그룹 두번째 탭

D그룹 세번째 탭

D그룹 네번째 탭

                $("#TAB_ID").rumiTab({
                    selectorCl  : "ul.rumitab li",
                    interValtime: 2000,
                    auTo        : true,
                    starttabNo  : 3,
                    autoDirection: "prev",
                    tabAlign  : "right",
                    containerH  : 300
                });

HTML

RESULT

C-첫번째
C-두번째킹
C-세번째
C-네번째

E그룹 첫번째 탭

E그룹 두번째 탭

E그룹 세번째 탭

E그룹 네번째 탭