묻고답하기
탭 형식 위젯에 더보기 링크 추가하기
2019.02.01 13:30
안녕하세요.
현재 content 위젯을 탭형식으로 사용중입니다.
이때, 탭을 클릭하면 해당 게시물로 이동하게 되어 있는 부분을..
오른쪽에 더보기 버튼을 만들어서 현재의 탭의 링크로 연동되도록 하고 싶은데요.
방법이 있을까요..?
댓글 2
-
자체 해결하여 팁을 공유합니다.
1. _tap_top.html 파일에 탭을 클릭하면 해당 게시판 화면으로 이동하는 것을 막았습니다.
<a href="{$tab->url}" onmouseover="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.widgetTabA').next('dl.widgetDivider'),{$i})">{$tab->title}</a>
->
<a href="javascript:void(0);" onclick="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.widgetTabA').next('dl.widgetDivider'),{$i})">{$tab->title}</a>
2. 더보기 버튼 태그를 추가해줍니다.
<li<!--@if($i==0)--> class="active"<!--@end-->>
<a href="javascript:void(0);" onclick="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.widgetTabA').next('dl.widgetDivider'),{$i})">{$tab->title}</a>
</li>
<span<!--@if($i==0)--> class="open"<!--@end-->> <a href="{$tab->url}"><img src="/img/btn_listMore.png" /></a></span>
3. 더보기 버튼에 해당하는 css를 넣어줍니다.
.widgetTabA span.open{display: block;}
4. content_widget.js 파일에 더보기 버튼이 탭을 클릭할 때마다 유동적으로 변경되도록 해줍니다.
function content_widget_tab_show(tab,list,i){
//탭 이동
tab.parents('ul.widgetTab').children('li.active').removeClass('active');
tab.parent('li').addClass('active');
//더보기 버튼 연동하여 보이기
tab.parents('ul.widgetTab').children('span.open').removeClass('open');
tab.parent('li.active').next('span').addClass('open');
jQuery('>dd',list).each(function(j){
if(j==i){
$(this).addClass('open');
$(this).show();
}else{
$(this).removeClass('open');
$(this).hide();
}
});
}
이렇게 해주면 됩니다~! :)
| 글쓴이 | 제목 | 최종 글 |
|---|---|---|
| XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
| 야야야료 | 크론탭 스케줄짜기 | |
| 야야야료 | 크로탭 스케줄 맞는지 확인좀 부탁드려요 | |
| kim5**** | 게시판 분류 탭의 "전체" 클릭시 문제점 [3] | 2017.04.05 by kim5**** |
| 달리다굼 | 탭메뉴를 클릭하면 글자가 사라집니다. [2] | 2017.06.29 by 달리다굼 |
| 김호띠 | 유챗 탭 [1] | 2017.08.04 by 이온디 |
| 지나 |
회원 설정에서 회원가입 탭 클릭시 빈화면...
 | |
| 이원호 | content 위젯 탭 링크 주소를 바꾸고 싶습니다 [1] | 2017.12.19 by 재미나게 |
| lis**** |
회원정보 보기에서 특정탭 기능 제거
[2]
| 2018.02.23 by 메이퀸 |
| 방랑자유 | 탭형 최근글 스킨 xe_official 이미지 롤오버? 문의드립니다. | |
| 이영건 |
탭 컨텐츠 위젯 구조변경 방법이 필요합니다.
[2]
| 2018.11.07 by 이영건 |
| 이와이 | content 위젯 탭 형식 관련 | |
| 이와이 | 탭 형식 위젯에 더보기 링크 추가하기 [2] | 2019.02.21 by 이와이 |
| 아데나 | 게시판의 분류탭마다 사용자정의를 다르게 할수있나요? [2] | 2019.05.31 by 아데나 |
| 엑스이다국어 |
XE에서 기본적으로 제공하는 다국어탭의 리스트명을 변경할 수 있나요?
[2]
| 2020.07.15 by XEANT.com |
| 내놔내놔 | 고수님들 풀페이지 적용시 탭키가 안먹힙니다..도와주세요 [2] | 2022.10.06 by 내놔내놔 |
가능은 한데 그냥 포기하시는게...
<ul class="widgetTabA widgetTab">
{@$i=0}
<!--@foreach($widget_info->tab as $module_srl => $tab)-->
<li<!--@if($i==0)--> class="active"<!--@end-->><a href="{$tab->url}" onmouseover="content_widget_tab_show(jQuery(this),jQuery(this).parents('ul.widgetTabA').next('dl.widgetDivider'),{$i})">{$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>