이온디
3년 전
탭 위젯 스킨을 제작하는 방법입니다.
먼저 컨텐츠위젯을 준비해주시고, 탭 위젯 파일을 만들어보도록 합니다.
./widgets/content_extended/skins/ewce_imin/template/list.html
./widgets/content_extended/skins/ewce_imin/template/tab_left.html
./widgets/content_extended/skins/ewce_imin/template/tab_top.html
기존에 content.html 파일 한개만…
탭 위젯 스킨을 제작하는 방법입니다.
먼저 컨텐츠위젯을 준비해주시고, 탭 위젯 파일을 만들어보도록 합니다.
./widgets/content_extended/skins/ewce_imin/template/list.html
./widgets/content_extended/skins/ewce_imin/template/tab_left.html
./widgets/content_extended/skins/ewce_imin/template/tab_top.html
기존에 content.html 파일 한개만 있었는데 탭을 만들면서 위 파일을 만들어줬습니다.
./widgets/content_extended/skins/ewce_imin/content.html
<!--@if($widget_info->tab_type == "tab_left")-->
<include target="template/tab_left.html" />
<!--@elseif($widget_info->tab_type == "tab_top")-->
<include target="template/tab_top.html" />
<!--@else-->
<include target="template/list.html" />
<!--@end-->기존 리스트 부분을 이렇게 구분해줬습니다.
(참고로, include target={$widget_info->tab_type} 이렇게는 안되더군요.)
list.html은 기존과 동일합니다.
tab_left.html 파일은 아래 코드입니다.
<div class="tab-wrap left">
<div class="tab-header">
{@$i=0}
<!--@foreach($widget_info->tab as $module_srl => $tab)-->
<div class="tab-title <!--@if($i==0)-->on<!--@end-->">{$tab->title}</div>
{@$i++}
<!--@end-->
</div>
<div class="tab-content">
{@$i=0}
<!--@foreach($widget_info->tab as $module_srl => $tab)-->
{@$widget_info->content_items = $tab->content_items}
<include target="list.html" />
{@$i++}
<!--@end-->
</div>
</div>
2. js 코드입니다.
var tab = $('.tab-wrap .tab-header').find('.tab-title'),
tabbox = $('.tab-wrap .tab-content').find('.content-box');
tab.on('click', function(){
$(this).addClass('on').siblings().removeClass('on');
tabbox.eq($(this).index()).addClass('on').siblings().removeClass('on');
});
3. css 코드입니다.
.tab-wrap{
border: 1px solid #eee;
&.left{
display: flex;
.tab-header{
min-width: 6rem;
background: #f0f0f0;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.tab-title{
display: flex;
flex: 1;
align-items: center;
justify-content: center;
font-size: 1.1rem;
width: 100%;
color: #999;
cursor: pointer;
&.on{
background:#fff;
color: #F3551E;
}
}
a{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border-right: 1px solid #ebebeb;
box-sizing: border-box;
color: #adadad;
background: #f8f8f8;
&.on{
background: #fff;
border-bottom: 1px solid #eee;
border-right: 0;
color: #f25214;
}
}
}
.tab-content{
//padding: 3px 1rem;
//width: -webkit-fill-available;
width: calc(100% - 6rem);
box-sizing: border-box;
padding: 5px 0px 5px 10px;
.cat{
display: none;
}
.title{
font-size: 1.3rem;
}
.content-box{
display: none;
&.on{
display: block;
}
}
}
}
}
자 이제 XE 관리자 페이지에서 위젯 생성을 누르신 후 아래 코드를 만들어보세요.
그리고 원하는 곳에 해당 코드를 붙여넣기 하시면 됩니다.
<!-- 공지사항 위젯 -->
<img class="zbxe_widget_output" widget="content_extended" skin="ewce_imin" colorset="white" widget_cache="0m" module_srls="217355,340535" list_count="2" content_type="document" use_limit="N" order_target="update_order" order_type="desc" list_type="normal" option_view="title" markup_type="table" title_target="title" nickname_target="nickname" show_browser_title="N" show_content_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N" show_icon="N" show_point_level="N" show_always_new="N" show_nocomment_document="N" tab_type="tab_left" tab_order="module_order" tab_showtype="module" tab_move_type="mouseover" category_range="all" hyperlink="Y" hyperlink_src="article" view_permission="list" view_secret_document="all_user" comment_document_secret="Y" thumbnail_type="crop" />
