애니빌드.LAB
토론방
디자인팜 반응형레이아웃 탭레이아웃 소스적용 질문드립니다
- a**daecig
- 2015-04-10 18:51:42
- hit5637
- http://wdev.anybuild.co.kr/bbs/qna/4315
(필수) 확인 가능한 전체 URL : http://aidaecig.web-pd.com/page/gear900
예제 : http://www.aidakorea.co.kr/page/product01
디자인팜으로 반응형레이아웃으로 탭레이아웃을 적용하는데
탭메뉴는 간단히바뀌는데 이 탭을 눌렀을때 각각의 이미지가 나오게 하려면 어떻게 해야하나요?
탭을 눌렀을때 이미지가 나오게 하려고 합니다
<style>
< !--@if($farm_layout[min_width])-->
.layout_1673_ {min-width:{$farm_layout[min_width]}px;}
< !--@end-->
< !--@if($farm_layout[max_width])-->
.layout_1673_ {max-width:{$farm_layout[max_width]}px; margin:0 auto;}
@media \0screen{
.layout_1673_ {min-width:{$farm_layout[max_width]}px;}
}
< !--@end-->
.layout_1673_ > ul {margin:0; padding:0; list-style:none;}
.layout_1673_ > #tab_ul_1673_ {border-left:1px solid #e2e2e2;}
.layout_1673_ > #tab_ul_1673_:after {content:''; display:block; clear:both;}
.layout_1673_ > #tab_ul_1673_ > li {float:left; border-right:1px solid #e2e2e2; box-sizing:border-box;}
.layout_1673_ > #tab_ul_1673_ > li > a {
display:block; height:40px; line-height:40px; padding:2px 5px 0;
border-top:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; background:#f8f8f8;
font-size:14px; font-weight:bold; color:#888; text-align:center;
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.layout_1673_ > #tab_ul_1673_ > li.on > a {padding:0 5px 1px; border-top:3px solid #0c4da1; border-bottom:none; background:#fff; color:#0c4da1;}
.layout_1673_ > #box_ul_1673_ > li.hide {display:none;}
.layout_1673_ > #box_ul_1673_ > li.on {display:block;}
.layout_1673_ > #box_ul_1673_ > li > a {
display:none; height:30px; line-height:30px; padding:0 5px;
border:1px solid #e2e2e2; background:#f8f8f8;
font-size:13px; font-weight:bold; color:#888; text-align:center;
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.layout_1673_ > #box_ul_1673_ > li.on > a {border-color:#0c4da1; background:#fff; color:#0c4da1;}
.layout_1673_ > #box_ul_1673_ > li > div {background:#fff;}
<!--@if($farm_layout[layout_type] == 'RES')-->
@media (max-width:102*px){
.layout_1673_ > #tab_ul_1673_ {display:none;}
.layout_1673_ > #box_ul_1673_ > li.hide {display:block;}
.layout_1673_ > #box_ul_1673_ > li > a {display:block;}
}
< !--@end-->
[id^=div_user_list] .layout_1673_ > #box_ul_1673_ > li {display:block !important;}
[id^=div_user_list] .layout_1673_ > #box_ul_1673_ > li > div {display:block !important;}
< /style>
<div class="layout_1673_">
<ul id="tab_ul_1673_">
<li cond="$farm_layout[subject1]"><a href="#">{$farm_layout[subject1]}</a></li>
<li cond="$farm_layout[subject2]"><a href="#">{$farm_layout[subject2]}</a></li>
<li cond="$farm_layout[subject3]"><a href="#">{$farm_layout[subject3]}</a></li>
<li cond="$farm_layout[subject4]"><a href="#">{$farm_layout[subject4]}</a></li>
<li cond="$farm_layout[subject5]"><a href="#">{$farm_layout[subject5]}</a></li>
<li cond="$farm_layout[subject6]"><a href="#">{$farm_layout[subject6]}</a></li>
<li cond="$farm_layout[subject7]"><a href="#">{$farm_layout[subject7]}</a></li>
<li cond="$farm_layout[subject8]"><a href="#">{$farm_layout[subject8]}</a></li>
</ul>
<ul id="box_ul_1673_">
<li cond="$farm_layout[subject1]">
<a href="#">{$farm_layout[subject1]}</a>
<div>{FARM_CONTAINER}</div>
</li>
<li cond="$farm_layout[subject2]">
<a href="#">{$farm_layout[subject2]}</a>
<div>{FARM_CONTAINER}</div>
</li>
<li cond="$farm_layout[subject3]">
<a href="#">{$farm_layout[subject3]}</a>
<div>{FARM_CONTAINER}</div>
</li>
<li cond="$farm_layout[subject4]">
<a href="#">{$farm_layout[subject4]}</a>
<div>{FARM_CONTAINER}</div>
</li>
<li cond="$farm_layout[subject5]">
<a href="#">{$farm_layout[subject5]}</a>
<div>{FARM_CONTAINER}</div>
</li>
<li cond="$farm_layout[subject6]">
<a href="#">{$farm_layout[subject6]}</a>
<div>{FARM_CONTAINER}</div>
</li>
<li cond="$farm_layout[subject7]">
<a href="#">{$farm_layout[subject7]}</a>
<div>123</div>
</li>
<li cond="$farm_layout[subject8]">
<a href="#">{$farm_layout[subject8]}</a>
<div>sss</div>
</li>
</ul>
< /div>
<script>
jQuery(function($){
var
$tab = $('#tab_ul_1673_ > li')
,$box = $('#box_ul_1673_ > li')
;
$tab.eq(0).addClass('on');
$box.addClass('hide');
$box.eq(0).addClass('on').removeClass('hide');
$box.children('div').css('display','none');
$box.eq(0).children('div').css('display','block');
$tab.css('width',100/$tab.length +'%');
$tab.children('a').on('click',function(){
var
$li = $(this).parent()
,$sib = $(this).parent().siblings()
,$index = $(this).parent().index()
;
$li.addClass('on');
$sib.removeClass('on');
$box.removeClass('on');
$box.children('div').css('display','none');
$box.eq($index).addClass('on');
$box.eq($index).children('div').css('display','block');
return false;
});
$box.children('a').on('click',function(){
var
$li = $(this).parent()
,$sib = $(this).parent().siblings()
,$index = $(this).parent().index()
;
$li.addClass('on');
$(this).next().slideDown(200);
$sib.removeClass('on');
$sib.children('div').slideUp(200);
$tab.removeClass('on');
$tab.eq($index).addClass('on');
return false;
});
});
< /script>
열기 닫기
열기 닫기
디자인 팝을 실행을 했을때 현재 위의 화면이 탭나타나는 부분인데요..각 탭마바 보면 FARM_CONTAINER이라는게 있습니다.
여기다가 이미지를 드래그를 해주시면 되요...즉, 좌측에 이미지를 클릭을 하면 이미지를 등록하는 공간이 나타나는데요..
원하시는 이미지 출력형태를 좌측에서 선택을 하면 노란색 아래 부분에 이미지가 출력이 될건데 그 부분을 드래그 해서 팜컨테이네어 넣어주시면 됩니다.
감사합니다.