Nacx
2017-05-30 14:06
조회: 436
추천: 0
'크베닌'님이 문의하신 소스 입니다.인벤 스크립트에 관심을 가져주셔서 감사합니다.
탭 스크립트는 현재 인벤 스크립트 게시판 상단과 같이 "접히는 것을 상정하지 않은" 태그입니다. 그러므로 탭 스크립트를 이용하면서 접고 펼치는 기능을 동시에 이용하려 한다면 소스가 상당히 복잡해질 수 있습니다. 오히려 기본적인 toggle, hide 스크립트 쪽이 적당할 것으로 보입니다. 요청하신 내용을 바탕으로 수정(탭 스크립트 이용) 및 새로 작성한 스크립트(탭 스크립트 이용 안함)는 아래를 참고해 주세요. 원하시던 형태와 다르거나, 이외에도 궁금하신 내용은 언제든지 글 남겨주세요. 감사합니다. ■ 탭 소스를 이용하여 구성 <div data-inven-tabs="" data-inven-tab-selected="none"> <!-- 탭 버튼 부분 --> <div data-inven-tab-for="tab_1" data-inven-selected-css="{'_SELF_':{'display':'none'},'tab_1_sudo':{'display':'block'}}" data-inven-unselected-css="{'_SELF_':{'display':'block'},'tab_1_sudo':{'display':'none'}}" style="border:1px solid; width:60px; padding: .4em; float:left;"> 탭 버튼 1 </div> <div data-inven-id="tab_1_sudo" data-inven-tab-for="tab_1_sudo" data-inven-selected-css="{'_SELF_':{'display':'none'}}" style="border:1px solid; width:60px; padding: .4em; float:left;font-weight:bold;display:none;"> 탭 버튼 1 </div> <div data-inven-tab-for="tab_2" data-inven-selected-css="{'_SELF_':{'display':'none'},'tab_2_sudo':{'display':'block'}}" data-inven-unselected-css="{'_SELF_':{'display':'block'},'tab_2_sudo':{'display':'none'}}" style="border:1px solid; width:60px; padding: .4em; float:left;"> 탭 버튼 2 </div> <div data-inven-id="tab_2_sudo" data-inven-tab-for="tab_2_sudo" data-inven-selected-css="{'_SELF_':{'display':'none'}}" style="border:1px solid; width:60px; padding: .4em; float:left;font-weight:bold;display:none;"> 탭 버튼 2 </div> <div style="clear: left;"><br></div> <!-- 탭 내용 부분 --> <div data-inven-tab-id="tab_1" style="border: 1px solid red; padding: .4em;">탭 1번 내용입니다.</div> <div data-inven-tab-id="tab_2" style="border: 1px solid blue; padding: .4em;">탭 2번 내용입니다.</div> </div> ■ 탭 소스를 이용하지 않고 구성 <!-- 탭 버튼 부분 --> <div style="border:1px solid; width:60px; padding: .4em; float:left;" data-inven-toggle="tab_1" data-inven-hide="tab_2"> 탭 버튼 1 </div> <div style="border:1px solid; width:60px; padding: .4em; float:left;" data-inven-toggle="tab_2" data-inven-hide="tab_1"> 탭 버튼 2 </div> <div style="clear: left;"><br></div> <!-- 탭 내용 부분 --> <div data-inven-id="tab_1" style="border: 1px solid red; padding: .4em;display:none;">탭 1번 내용입니다.</div> <div data-inven-id="tab_2" style="border: 1px solid blue; padding: .4em;display:none;">탭 2번 내용입니다.</div> |