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그룹 일곱번째 탭
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-네번째
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그룹 네번째 탭