안녕하세요, 초보제작자 입니다.
http://nuli.navercorp.com/sharing/ui/patternMenu/1
모바일 탭기능 최신글을 찾다가, 위 사이트를 알게되서 그냥 다짜고자 latest.skin이랑 style쪽에 붙여넣었더니, 딱 저기서 나와있는 모습으로만 적용이 되더라구요.
최신글 목록이 나오게 하려면 어떻게 해야하나요?
게시판과 연동방법이라고 해야할까요..?
답변 2개 / 댓글 5개
직접 짜셔도 될거같긴한데요..
제가 쓰는소스를 올려 드리자면
#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; }
<!-- 갤러리 추출 시작 -->
<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>
<!-- 갤러리 추출 끝 -->
이렇게 쓰고 있습니다.
답변에 대한 댓글 1개
main_banner_tab
클래스 명이 이렇게 돼어잇는부분을 수정해보세요
그럼 될거같네요
답변에 대한 댓글 4개
단순히 </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으로 바꿔주면 되는줄 알았는데, 두 탭덩어리가 동시 동작하네요...
답변을 작성하려면 로그인이 필요합니다.
한가지 질문 좀 드리고 싶습니다 ㅠ_ㅠ
제가 민트테마를 사용하는 사이트라 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
========================
이런식으로, 첫번째 게시글이 올라오면서 탭옆으로 붙더라구요...
그래서 이것저것 많이 수정해보는데도 저게 아래로 이동이 안되네요...
방법이 있을까요???