ITvillage

: 프로그래밍에 의해서 구현할 수 있는 메서드의 종류는 아래와 같다. enable: 메서드에 특정 인덱스 번호를 전달해서 해당 탭 버튼을 활성화 시키거나, 어떤 번호도 전달하지 않음으로써 탭 버튼 전체를 활성화 시킨다.   disable: 메서드에 특정 인덱스 번호를 전달해서 해당 탭 버튼을 비활성화 시키거나, 어떤 번호도 전달하지 않음으로써 탭 버튼 전체를 비활성화 시킨다.   --> 활성화, 비활성화 메서드의 경우, tabs() 메서드의 첫번째 매개변수로 해당 메서드의 문자열을 전달하고, 두번째 매개변수에 탭의 인덱스 번호를 전달했다. jQuery UI의 모드 메서드는 이런 방식으로 호출된다. 호출하려는 메서드의 이름을 위젯 메서드의 첫번째 인수로 설정을 한다는것을 기억하길 바란다.         ● 탭의 활성화/비활성화 설정 : 특정탭의 작동 가능이나 불가능은 enable이나 disable 메서드를 사용해 구현할 수 있다. 로그인을 했을때에만 탭을 활성화 시키는등의 로직에 이용하면 유용할 것이라 생각한다.   ==== tabsMethod1.jsp ====<div class="txc-textbox" style="border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-color: rgb(102, 153, 255); border-right-color: rgb(102, 153, 255); border-bottom-color: rgb(102, 153, 255); border-left-color: rgb(102, 153, 255); background-color: rgb(0, 0, 0); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>탭의 활성화/비활성화 메서드</title>  <link rel="stylesheet" href="/jquery/themes/base/jquery.ui.all.css"/>  <link rel="stylesheet" href="/css/tabSelect.css"/> </head> <body>  <div id="myTabs">   <ul>    <li><a href="#a">Tab1</a></li>    <li><a href="#b">Tab2</a></li>    <li><a href="#c">Tab3</a></li>   </ul>   <div id="a">첫번째 탭과 연결된 디폴트로 보여지는 컨텐트 패널.</div>   <div id="b">두번째 탭을 클릭했을때 보여지는 컨텐트 패널.</div>   <div id="c">세번째 탭을 클릭했을때 보여지는 컨텐트 패널.</div>  </div>  <div>   <input type="button" id="enable" value="활성화"/>    <input type="button" id="disable" value="비활성화"/>  </div>    <script type="text/xxxxxxjavascript" src="/jquery/jquery-1.7.1.js"></script>  <script type="text/xxxxxxjavascript" src="/jquery/ui/jquery.ui.core.js"></script>  <script type="text/xxxxxxjavascript" src="/jquery/ui/jquery.ui.widget.js"></script>  <script type="text/xxxxxxjavascript" src="/jquery/ui/jquery.ui.tabs.js"></script>  <script type="text/xxxxxxjavascript">   (function($){    $("#myTabs").tabs({     disabled: [1,2]    });        // 파라미터로 지정한 탭의 활성화.    $("#enable").click(function(){     $("#myTabs").tabs("enable", 1);    });        // 파라미터로 지정한 탭의 비활성화.    $("#disable").click(function(){     $("#myTabs").tabs("disable", 1);    });   })(jQuery);  </script> </body> </html></div>   <img src="https://t1.daumcdn.net/cfile/cafe/115C464B4F53504E20" class="txc-image" actualwidth="787" style="FLOAT: none; CLEAR: none" border="0" hspace="1" vspace="1" width="787" id="A_115C464B4F53504E2071F4"/> ● 탭의 추가/삭제: 기존 탭 위젯에 새로운 탭 버튼을 추가하거나 제거할 수 있다. - 탭의 삭제[형식]$("탭 컨테이너 셀렉터").tabs("메서드 문자열", 삭제할 탭의 index 번호); - 탭의 추가[형식]$("탭 컨테이너 셀렉터").tabs("메서드 문자열", "추가할 컨텐트 패널의 resource 경로", "탭 타이틀" [, 삽입할 위치 index 번호]); ==== tab_add_remove.jsp ====<div class="txc-textbox" style="border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-color: rgb(102, 153, 255); border-right-color: rgb(102, 153, 255); border-bottom-color: rgb(102, 153, 255); border-left-color: rgb(102, 153, 255); background-color: rgb(0, 0, 0); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>탭의 활성화/비활성화 메서드</title> <link rel="stylesheet" href="/jquery/themes/base/jquery.ui.all.css"/> <link rel="stylesheet" href="/css/tabSelect.css"/></head><body> <div id="myTabs"> <ul> <li><a href="#a">Tab1</a></li> <li><a href="#b">Tab2</a></li> <li><a href="#c">Tab3</a></li> </ul> <div id="a">첫번째 탭과 연결된 디폴트로 보여지는 컨텐트 패널.</div> <div id="b">두번째 탭을 클릭했을때 보여지는 컨텐트 패널.</div> <div id="c">세번째 탭을 클릭했을때 보여지는 컨텐트 패널.</div> </div> <div> <label>탭 추가 및 제거</label> <input type="text" id="indexNum"/> <input type="button" id="add" value="추가"/> <input type="button" id="remove" value="제거"/>  </div> <script type="text/xxxxjavascript" src="/jquery/jquery-1.7.1.js"></script> <script type="text/xxxxjavascript" src="/jquery/ui/jquery.ui.core.js"></script> <script type="text/xxxxjavascript" src="/jquery/ui/jquery.ui.widget.js"></script> <script type="text/xxxxjavascript" src="/jquery/ui/jquery.ui.tabs.js"></script> <script type="text/xxxxjavascript"> (function($){ $("#myTabs").tabs(); $("#remove").click(function(){                                // input 엘리먼트에서 넘어온 값은 스트링이므로, parseInt() 를 사용하여 숫자로 변환한다. $("#myTabs").tabs("remove", parseInt($("#indexNum").val(), 10)); }); $("#add").click(function(){        // 외부 파일의 포함된 내용이 추가할 탭의 컨텐트 패널이 된다. $("#myTabs").tabs("add", "/tabs/sample_data/sample.txt", "신규 탭", 1); }); })(jQuery); </script></body></html></div> - 탭이 추가됨과 동시에 추가된 탭이 선택되게 하려면 탭을 추가하는 메서드에 아래와 같이 해당 탭을 선택하는 체인을 형성한다.<div class="txc-textbox" style="border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-color: rgb(102, 153, 255); border-right-color: rgb(102, 153, 255); border-bottom-color: rgb(102, 153, 255); border-left-color: rgb(102, 153, 255); background-color: rgb(0, 0, 0); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>탭의 활성화/비활성화 메서드</title> <link rel="stylesheet" href="/jquery/themes/base/jquery.ui.all.css"/> <link rel="stylesheet" href="/css/tabSelect.css"/></head><body> <div id="myTabs"> <ul> <li><a href="#a">Tab1</a></li> <li><a href="#b">Tab2</a></li> <li><a href="#c">Tab3</a></li> </ul> <div id="a">첫번째 탭과 연결된 디폴트로 보여지는 컨텐트 패널.</div> <div id="b">두번째 탭을 클릭했을때 보여지는 컨텐트 패널.</div> <div id="c">세번째 탭을 클릭했을때 보여지는 컨텐트 패널.</div> </div> <div> <label>탭 추가 및 제거</label> <input type="text" id="indexNum"/> <input type="button" id="add" value="추가"/> <input type="button" id="remove" value="제거"/>  </div> <script type="text/xxjavascript" src="/jquery/jquery-1.7.1.js"></script> <script type="text/xxjavascript" src="/jquery/ui/jquery.ui.core.js"></script> <script type="text/xxjavascript" src="/jquery/ui/jquery.ui.widget.js"></script> <script type="text/xxjavascript" src="/jquery/ui/jquery.ui.tabs.js"></script> <script type="text/xxjavascript"> (function($){ $("#myTabs").tabs(); $("#remove").click(function(){ $("#myTabs").tabs("remove", parseInt($("#indexNum").val(), 10)); }); $("#add").click(function(){ $("#myTabs").tabs("add", "/tabs/sample_data/sample.txt", "신규 탭") .tabs("select", $("#myTabs").tabs("length") - 1); }); })(jQuery); </script></body></html></div>--> 탭의 갯수에서 1을 뺀값이 마지막 탭의 index 번호이므로, 새로 추가된 탭이 선택되어 해당 컨텐츠가 보이게 한다.