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

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

QA

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

답변 2

본문

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

 

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

 

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

 

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

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

 

이 질문에 댓글 쓰기 :

답변 2

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

 

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

 

 

#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

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



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

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

방법이 있을까요???

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으로 바꿔주면 되는줄 알았는데, 두 탭덩어리가 동시 동작하네요...

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 123,127
© SIRSOFT
현재 페이지 제일 처음으로