탭 위젯 스킨 만드는 방법

탭 위젯 스킨을 제작하는 방법입니다.

먼저 컨텐츠위젯을 준비해주시고, 탭 위젯 파일을 만들어보도록 합니다.

./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" />