안녕하세요. 인벤팀 입니다.





인벤 스크립트에 많은 관심을 가져주셔서 감사합니다.

이번 업데이트를 통해 탭 기능에 무작위 기본 탭 선택이 가능해졌습니다.

사용방법은 정말 간단합니다.

data-inven-tabs을 선언해 주시고, data-inven-tab-random만 뒤에 붙여주시면 됩니다.
※ 디폴트 탭을 선택하는 data-inven-tab-selected과는 동시에 사용할 수 없으니 주의해 주세요.



■ 샘플 소스

<div data-inven-tabs data-inven-tab-random>
<!-- 탭 버튼 부분 -->
<span data-inven-tab-for="tab_1" style="border: 1px solid black;margin: 3px;padding: 3px;">1번 탭버튼</span>
<span data-inven-tab-for="tab_2" style="border: 1px solid black;margin: 3px;padding: 3px;">2번 탭버튼</span>
<span data-inven-tab-for="tab_3" style="border: 1px solid black;margin: 3px;padding: 3px;">3번 탭버튼</span>
<span data-inven-tab-for="tab_4" style="border: 1px solid black;margin: 3px;padding: 3px;">4번 탭버튼</span>
<!-- 탭 내용 부분 -->
<div data-inven-tab-id="tab_1" style="display:none;border: 1px solid black;margin: 3px;padding: 3px;">1번 탭내용</div>
<div data-inven-tab-id="tab_2" style="display:none;border: 1px solid black;margin: 3px;padding: 3px;">2번 탭내용</div>
<div data-inven-tab-id="tab_3" style="display:none;border: 1px solid black;margin: 3px;padding: 3px;">3번 탭내용</div>
<div data-inven-tab-id="tab_4" style="display:none;border: 1px solid black;margin: 3px;padding: 3px;">4번 탭내용</div>
</div>




■ 결과

1번 탭버튼2번 탭버튼3번 탭버튼4번 탭버튼
1번 탭내용
2번 탭내용
3번 탭내용
4번 탭내용




이 기능의 진가는 data-inven-selected-css와 동시에 사용하실 때 확인하실 수 있습니다.
그동안 인벤 스크립트의 무작위 출력 기능만으로 어려웠던, 무작위 CSS를 사용하실 수 있게 됩니다.

대표적으로는 무작위 배경 이미지를 구현할 수 있게 되겠네요.


■ 샘플

<div data-inven-tabs data-inven-tab-random>
<span data-inven-tab-for="tab_1" data-inven-selected-css="{'target':{'color':'#ff0000'}}"></span>
<span data-inven-tab-for="tab_2" data-inven-selected-css="{'target':{'color':'#00ff00'}}"></span>
<span data-inven-tab-for="tab_3" data-inven-selected-css="{'target':{'color':'#0000ff'}}"></span>
<span data-inven-tab-for="tab_4" data-inven-selected-css="{'target':{'color':'#ff00ff'}}"></span>
</div>

<span data-inven-id="target">새로고침할 때 마다 무작위의 색상을 가지게 됩니다.</span>


■ 결과
새로고침할 때 마다 무작위의 색상을 가지게 됩니다.


인벤 스크립트를 이용해 주시는 모든 분께 감사드리며,
불편한 점이나 필요한 기능이 있으시다면 언제든 '인벤 스크립트 게시판'에 글을 남겨주세요


감사합니다.