홈페이지를 만드는 사람들을 위한 안내서

탭형 최신글 위젯 만드는 방법

조회 수 21 추천 수 0 2022.10.07 02:06:15
이온디 *.186.100.73

소스

widgets/content_extended/skins/default


HTML

<ul class="tab_module widgetTab">
    {@$i=0}
    <!--@foreach($widget_info->tab as $module_srl => $tab)-->
    <li cond="$i<10" <!--@if($i==0)--> class="active"<!--@end--> ><!--@if($widget_info->tab_move_type=="click")--><a
        href="javascript:"
        onclick="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.tab_module').next('dl.widgetDivider'),{$i},1,'{$tab->url}')">
    <!--@else--><a href="{$tab->url}"
                   onmouseover="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.tab_module').next('dl.widgetDivider'),{$i},0,0)">
    <!--@end-->{$tab->title}</a></li>
    {@$i++}
    <!--@end-->
</ul>

<dl class="widgetDivider">
    {@$i=0}
    <!--@foreach($widget_info->tab as $module_srl => $tab)-->
    <dt>{$tab->title}</dt>
    <dd<!--@if($i==0)--> class="open"<!--@end--> >
    {@$widget_info->content_items = $tab->content_items}
    <!--#include("_tab_none.html")-->
    </dd>
    {@$i++}
    <!--@end-->
</dl>

JS

function content_widget_tab_show(tab, list, i, ttype, url) {
    tab.parents('ul.widgetTab').children('li.active').removeClass('active');
    tab.parent('li').addClass('active');
    jQuery('>dd', list).each(function (j) {
        if (j == i) {
            if (ttype == 1 && jQuery(this).hasClass('open')) {
                location.href = url;
                return;
            }
            jQuery(this).addClass('open');
        } else jQuery(this).removeClass('open');
    });
}
도구모음