안녕하세요.
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)
좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
코리아웹글로벌님의 다음지도 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 실시간이미지가져오기 새로고침을 하면 사진이 바로 바뀜 방송을 안하면 사진이 안나옴
안녕하세요. 다푸에 이요한 실장입니다. 서비스 초기라 상세 설명이 부족한 부분 죄송합니다. 서비스관련 홈페이지 정리 중에 있습니다. 빠른 시일에 정비하도록 하겠습니다. 그누...
2019.12.03 수정내용 autoptimize_bbs.css 파일의 .footer .nav body html 등 중복될 수 있는 불필요한 클래스 제거 2019.10.15 수정...
댓글 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개를 정렬 시킬 수 있을까요?
안녕하세요, 너무나 유용한 스킨 감사합니다!
왜 저는 게시글이 안보일까요 ㅠㅠ