홈페이지를 만드는 사람들을 위한 안내서
탭형 최신글 위젯 만드는 방법
조회 수 18 추천 수 0 2022.10.07 02:06:15소스
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'); }); }