탭 최신글, 탭 메뉴
안녕하세요.
css와 Jquery로 탭메뉴 최신글 플러그인을 만들어봤습니다.
다른 여러가지를 사용하면서 항상 무언가 부족하다는걸 느끼다가 내 입맛에 맞는 탭을 제작하게 되었습니다.
제작한지는 꽤 오래 되었지만 혼자서 사용하기에는 너무 아까운듯 하여 공개하게 되었습니다.
긴 설명글보다 데모페이지를 보시면 좋습니다.
데모 : https://www.suu.kr/page/rumiTab/rumiTab.php
- 한페이지에 무한대로 탭그룹 생성
- 다수의 탭을 추가
- 자동으로 탭 이동 (이동시간, 순차반복, 역순반복 랜덤반복, 탭이동시간설정)
- 탭에 링크 걸기
- 외부문서 불러오기
- 각 탭 그룹별로 높이 지정
- 마우스오버 또는 마우스클릭으로 탭 선택
- 탭을 오른쪽 또는 왼쪽 정렬
1. 첨부파일을 다운받아 압축을 푼후 "rumitab"폴더를 그누보드의 pligin 폴더에 복사해 주시면 됩니다.
ex) ./plugin/rumitab
2. 적용할 페이지의 상단에 아래코드를 추가합니다.
[code]
<link rel="stylesheet" href="<?php echo G5_PLUGIN_URL; ?>/rumitab/rumiTab.css"> <!-- 루미탭 CSS (필수) -->
<script src="<?php echo G5_PLUGIN_URL; ?>/rumitab/jquery.rumiTab.js"></script> <!-- 루미탭 Js (필수) -->
[/code]
3. 적용할 페이지에 스크립트를 추가해줍니다.
[code]
$(function () {
$("#TAB_A").rumiTab({
selectorCl : "ul.rumitab li",
interValtime: 3000,
auTo : true,
starttabNo : 0,
autoDirection : "random",
mEvent : "mouseenter",
tabAlign : "left",
containerH : 300
});
});
[/code]
4. html 코드를 아래의 예시처럼 작성해줍니다.
[code]
<div id="TAB_A" class="rumitab_box">
<ul class="rumitab">
<li rel="A_tab1"><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=notice">공지사항</a></li>
<li rel="A_tab2" data-url="<?php echo G5_URL; ?>/page/cookie_latest_list_sub.php"><a href="<?php echo G5_URL;?>/page/cookie_latest_list.php">최근본글</a></li>
<li rel="A_tab3">A-세번째</li>
<li rel="A_tab4">A-네번째</li>
<li rel="A_tab5">A-다섯번째</li>
<li rel="A_tab6">A-여섯번째</li>
<li rel="A_tab7">A-일곱번째</li>
</ul>
<div class="rumitab_container">
<div id="A_tab1" class="rumitab_content"><?php echo latest("rumitab", "notice", 8, 35); ?></div>
<div id="A_tab2" class="rumitab_content">A그룹 두번째 탭</div>
<div id="A_tab3" class="rumitab_content">A그룹 세번째 탭</div>
<div id="A_tab4" class="rumitab_content">A그룹 네번째 탭</div>
<div id="A_tab5" class="rumitab_content">A그룹 다섯번째 탭</div>
<div id="A_tab6" class="rumitab_content">A그룹 여섯번째 탭</div>
<div id="A_tab7" class="rumitab_content">A그룹 일곱번째 탭</div>
</div>
</div>
[/code]
위의 코드로 생성된 탭은 아래와 같습니다.
// 2019년 10월 25일 추가 내용.
루미탭에서 사용된 최신글 스킨도 올렸습니다. ( latest_rumitab)
버전 정보
테스트한 버전
5.3.3.3
호환 가능 버전
5.3 이상 또는 5.3 이하
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
그누보드5 스킨
2,753건좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
최신글
아미나빌더에서 사용하는 위젯으로 갤러리 최근게시물처럼 배너를 출력하고 배너이미지 등록은 웨젯에서 등록하도록 했습니다. 사용방법은 아래와 같습니다. [code=php] <?p...
최신글
모바일용 갤러리 최신글 (카테고리 이미지 위로) 카테고리 컬러는 css에서 .ltt .ca_namepink { 중략 ..... background: linear-gradie...
최신글
모바일용 원형 갤러리 최신글 입니다 썸네일 if($thumb['src']) { $img_content = '<img src="'.$thumb['src'].'" al...
게시판
코리아웹글로벌님의 다음지도 AIP연동, 주소입력시 좌표 스킨 참고 https://sir.kr/g5_skin/25403?sfl=wr_subject%7C%7Cwr_content&stx...
갤러리
구찬아 ~ 아프리카 bj 실시간이미지가져오기 새로고침을 하면 사진이 바로 바뀜 방송을 안하면 부분을 수정 뷰페이지 ...
게시판
아래 두 파일 /bbs 폴드에 넣고 ajax_upload.php ajax_upload_for_write_update.php /bbs 안에 write_update.php 부분에 약 ...
회원통합스킨
채팅방 형식으로 된 쪽지스킨입니다. 스킨 폴더에 넣어서 사용하시면 됩니다.
게시판
/* 2019-10-23 PC게시판 수정 */ 1. 리스트, 뷰 페이지만 설정했습니다. 2. 첨부파일, 링크는 사용하지 않습니다. 3. 답변형 게시판에는 리플이 없습니다....
최신글
안녕하세요. css와 Jquery로 탭메뉴 최신글 플러그인을 만들어봤습니다. 다른 여러가지를 사용하면서 항상 무언가 부족하다는걸 느끼다가 내 입맛에 맞는 탭을 제작하게 되었습니다....
게시판
구찬아 ~ 아프리카 bj 실시간이미지가져오기 새로고침을 하면 사진이 바로 바뀜 방송을 안하면 사진이 안나옴
댓글 44개
이것을 이용하면 냑 초기화면에 있는 '자유게시판/유머게시판'처럼 만들 수 있겠네요~
오타 있습니다 ^^
[http://sir.kr/data/editor/1910/c0963a5e74a6d0da559a62f4bb115810_1571828361_2172.PNG]
최신글 rumitab 도 있어야 겠는걸요~^^
그래도 엄청 감사하지요~^^)
latest_rumitab.zip 파일을 받으시면 됩니다.
감사합니다~
멋진 주말 보내세요~~~
감사합니다.
감사합니다
좋은 스킨 잘 쓰겠습니다.
행복한 2020년 되세요!!
Index.php 에 추가하니 에러가 나서요
[code]
<script>
$(function () {
$("#TAB_A").rumiTab({
selectorCl : "ul.rumitab li",
interValtime: 3000,
auTo : true,
starttabNo : 0,
autoDirection : "random",
mEvent : "mouseenter",
tabAlign : "left",
containerH : 300
});
});
</script>
[/code]
에러내용도 함께 올려 주시면 더 정확한 답변을 받으실 수 있습니다.
URL도 알려주면 더욱 좋구요.
index.php 에 <script> 사용안해서 발생한 문제인것 같습니다...
이분야 전공도 아니고 해서 ㅜ.ㅜ
잘 쓰겠습니다
말씀하신대로 했습니다만 왠 일인지 저는 게시판의 내용을 가져오지 못하고 있습니다. 최근본글을 없애고 공지사항 과 똑 같이 해서 4탭을 만들었는데요...
마우스를 올리면 텝에 대한 내용이 바뀌는데 게시물 내용을 왼쪽5개 오른쪽 5개 이런식으로 총 10개를 정렬 시킬 수 있을까요?
안녕하세요, 너무나 유용한 스킨 감사합니다!
왜 저는 게시글이 안보일까요 ㅠㅠ