모바일 게시판 탭기능 있는 최신글

모바일 게시판 탭기능 있는 최신글

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

모바일 게시판 탭기능 있는 최신글

본문

안녕하세요, 초보제작자 입니다.

 

http://nuli.navercorp.com/sharing/ui/patternMenu/1 

 

모바일 탭기능 최신글을 찾다가, 위 사이트를 알게되서 그냥 다짜고자 latest.skin이랑 style쪽에 붙여넣었더니, 딱 저기서 나와있는 모습으로만 적용이 되더라구요.

 

최신글 목록이 나오게 하려면 어떻게 해야하나요?

게시판과 연동방법이라고 해야할까요..?

 

이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기 이 글을 내 구글플러스 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 2

채택됨

GroupByEYE님의 답변

직접 짜셔도 될거같긴한데요..

 

제가 쓰는소스를 올려 드리자면

 

 

#container .main_banner_tab { width:100%; margin:auto; }

#container .main_banner_tab > span { margin-top:12px; margin-right:10px; font-size:12px; font-weight:700; }

#container .main_banner_tab > ul {

margin:auto; background:#f7f7f7;border:1px solid #e7e7e7; border-bottom:none;

width: -moz-calc(100% - 2px); width: -webkit-calc(100% - 2px); width: -o-calc(100% 2px); width: calc(100% - 2px); width: expression(100% - 2px);

}

#container .main_banner_tab > ul > li { float:left; padding:10px 15px 10px 15px; border-top:3px solid #e7e7e7; border-right:1px solid #e7e7e7; cursor:pointer; font-size:13px; }

 

#container .main_banner_tab > ul > li.active { background:#fff; border-top:3px solid #333333; font-size:13px; }



#container .g_t_gallery {
border:1px solid #e7e7e7; padding:10px 10px 0px 0px; border-top:none;
width: -moz-calc(100% - 12px); width: -webkit-calc(100% - 12px); width: -o-calc(100% 12px); width: calc(100% - 12px); width: expression(100% - 12px);
}



<!-- 갤러리 추출 시작 -->

<script type="text/javascript">

<!--

$(document).ready(function(){

$(".g_t_gallery").hide();

$(".g_t_more").hide();

$("#g_t_1").show();

$("#g_t_more_1").show();

 

$(".g_t").click(function(){

var g_t_data = $(this).attr('g_t_data');

 

$('.g_t').removeClass('active');

$(this).addClass('active');

 

$(".g_t_gallery").hide();

$(".g_t_more").hide();

 

$("#g_t_"+g_t_data).show();

$("#g_t_more_"+g_t_data).show();

});

});

//-->

</script>

<div class="main_banner_tab">

<span class="fr g_t_more" id="g_t_more_1"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=gallery">+ 더보기</a></span>

<span class="fr g_t_more" id="g_t_more_2"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=normal">+ 더보기</a></span>

<span class="fr g_t_more" id="g_t_more_3"><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=gallery">+ 더보기</a></span>

<ul>

<li class="g_t active" g_t_data='1'>갤러리탭A</li>

<li class="g_t" g_t_data='2'>갤러리탭B</li>

<li class="g_t" g_t_data='3'>갤러리탭C</li>

</ul>

</div>

<div class="g_t_gallery" id="g_t_1">

<?php

// 이 함수가 바로 최신글을 추출하는 역할을 합니다.

// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);

// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정

echo latest('gallery', 'gallery', 12);

?>

</div>

<div class="g_t_gallery" id="g_t_2">

<?php

// 이 함수가 바로 최신글을 추출하는 역할을 합니다.

// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);

// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정

echo latest('gallery', 'normal', 12);

?>

</div>

<div class="g_t_gallery" id="g_t_3">

<?php

// 이 함수가 바로 최신글을 추출하는 역할을 합니다.

// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);

// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정

echo latest('gallery', 'gallery', 12);

?>

</div>

<!-- 갤러리 추출 끝 -->

 

이렇게 쓰고 있습니다.

주소복사
채택됨
답변의 댓글
초보제작자님의 댓글
감사합니다. 게시판 코드까지 짜놓으셔서 저도 쉽게 잘 적용을 해보았는데요!!
한가지 질문 좀 드리고 싶습니다 ㅠ_ㅠ

제가 민트테마를 사용하는 사이트라 latest.skin.php쪽이 아니라, index.php파일에 삽입했습니다.
style부분은 latest쪽에 삽입해두었구요!!

적용하면 스마트폰 크기 정도에서는 아래 처럼 출력이되거든요?



========================

갤러리탭A | 갤러리탭B | 갤러리탭C

* 첫 게시글 17.05.09
* 두번째 게시글 17.05.09
* 세번째 게시글 17.05.09
* 네번째 게시글 17.05.09
* 다섯번째 게시글 17.05.09

========================



여기 까진 좋은데, 태블릿이나 랩탑 해상도로 넘어가면



========================

갤러리탭A | 갤러리탭B | 갤러리탭C * 첫 게시글 17.05.09

* 두번째 게시글 17.05.09
* 세번째 게시글 17.05.09
* 네번째 게시글 17.05.09
* 다섯번째 게시글 17.05.09

========================



이런식으로, 첫번째 게시글이 올라오면서 탭옆으로 붙더라구요...

그래서 이것저것 많이 수정해보는데도 저게 아래로 이동이 안되네요...

방법이 있을까요???

GroupByEYE님의 답변

main_banner_tab 

 

클래스 명이 이렇게 돼어잇는부분을 수정해보세요


그럼 될거같네요

주소복사
답변의 댓글
초보제작자님의 댓글
으... 못하겠네요...

단순히 </br>을 가운데 껴넣으면, 알아서 아랫줄로 갈거라 생각했는데 그것도 아니네요...

탭3개가 다 따로 지정이 되어있던데, 이걸 3개를 묶어서 화면가로크기를 꽉채워야 할 것 같은데 어떻게 수정을 해줘야 할까요?
초보제작자님의 댓글
제가 대충 무식한 방법으로 끼워맞추기해서 목록은 이제 위로 안올라오는데, 혹시 탭을 두덩어리로 늘리려면 어떻게 해줘야 하나요?

========================

갤러리탭A | 갤러리탭B | 갤러리탭C

* 첫 게시글 17.05.09
* 두번째 게시글 17.05.09
* 세번째 게시글 17.05.09
* 네번째 게시글 17.05.09
* 다섯번째 게시글 17.05.09

========================

========================

갤러리탭C | 갤러리탭D | 갤러리탭E

* 첫 게시글 17.05.09
* 두번째 게시글 17.05.09
* 세번째 게시글 17.05.09
* 네번째 게시글 17.05.09
* 다섯번째 게시글 17.05.09

========================

제가 위에 알려주신 코드를 그대로 한번 더 붙였더니, 윗탭 오른쪽에 탭이 붙는것도 문제지만, 숫자를 1,2,3으로 되어있는걸 4,5,6으로 바꿔주면 되는줄 알았는데, 두 탭덩어리가 동시 동작하네요...
답변을 작성하시기 전에 로그인 해주세요.
전체 50,489 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울 강남구 강남대로 310, 1312호 (역삼동, 유니온센터) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT