jQuery를 UI 예 - 탭 (탭)
멀티 패널의 단일 컨텐츠 영역 목록 제목에서 각 패널.
탭 구성 요소에 대한 자세한 내용은 API 문서를 참조하십시오 탭 부재 (위젯 탭을) .
기본 기능
전환 탭을 클릭하면 콘텐츠의 다른 논리 부분으로 나누어 져 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 탭 (탭) - 기본 기능 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#tabs") .tabs ();
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "탭">
<UL>
<리> <a href="#tabs-1"> 눈크 tincidunt </A> </ 리>
<리> <a href="#tabs-2"> Proin 슬픔 </A> </ 리>
<리> <a href="#tabs-3"> Aenean 된 Lacinia </A> </ 리>
</ UL>
<사업부 아이디 = "탭-1">
<P> Proin ELIT arcu, rutrum의 commodo는 vehicula 템퍼,하는을 commodo risus. Curabitur의 NEC의 arcu합니다. Donec을 마일 AMET 앉아 sollicitudin mauris. 남 elementum quam ullamcorper 분담금. Etiam aliquet 마사 등가 lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper 레오. Vivamus 나오지 마그나 quis ligula의 eleifend의 adipiscing. 음주 운전 orci. aliquam의 sodales의 tortor 이력서 ipsum의. aliquam의 nulla. 음주 운전의 aliquam의 molestie의 erat. 유타 등 mauris VEL PEDE varius sollicitudin. 나오지 유타 슬픔 NEC의 orci의 tincidunt interdum. Phasellus의 ipsum의. 눈크 tristique의 템퍼의 lectus . </ p>
</ DIV>
<사업부 아이디 = "탭-2">
<P> Morbi의 tincidunt, 음주 운전은 facilisis의 feugiat, ODIO metus gravida 분담금, 유타 pharetra의 마사 metus 아이디 NUNC. 음주 운전 scelerisque molestie turpis. Sed의의 fringilla, 마사 eget luctus의 malesuada, metus 에로스 molestie lectus, 유타 템퍼 스 에로스 마사 유타 슬픔. Aenean을 AMET 앉아 aliquet의 fringilla SEM. Suspendisse는 에로스 도박 마일의 adipiscing의 adipiscing에. 저희에게 연락하십시오. Morbi의 facilisis ligula의 suscipit의 aliquam에 ligula을 나오지. Curabitur ornare consequat NUNC. Aenean의 VEL의 metus. UT posuere viverra nulla. aliquam의 erat의 volutpat. Pellentesque convallis. 마에 케 나스의 feugiat, TELLUS pellentesque pretium posuere, 고양이 속가 lorem euismod 고양이 속, 유럽 연합 (EU) ornare 레오에 NiSi의 VEL의 고양이 속. Mauris consectetur tortor 등 푸 루스. </ P>
</ DIV>
<사업부 아이디 = "탭-3">
<P> Mauris eleifend 추정 등 turpis. 음주 운전 아이디 erat. Suspendisse의 potenti. Aliquam의 vulputate, PEDE의 VEL의 vehicula의 accumsan, 미 neque rutrum erat, 유럽 연합 (EU) congue orci가 lorem eget가 lorem. 도박 비 앤티. 클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라 , inceptos의 himenaeos 당. Fusce sodales. Quisque 유럽 연합 (EU) urna의 VEL enim의 commodo의 pellentesque. 저희에게 연락 유럽 연합 (EU) risus hendrerit의 ligula의 템퍼의 pretium. Curabitur가 lorem enim이 pretium NEC, feugiat의 NEC가하는을 luctus, lacus. </ P>
<P> 음주 운전의 cursus. 마에 케 나스의 ligula의 에로스, blandit NEC, pharetra,시에서 언제나, 마그나. Nullam 교류 lacus. Nulla의 facilisi. 저희에게 연락 viverra 그래서 우린 이력서의 neque. 저희에게 연락 blandit의 adipiscing의 velit. Suspendisse의 potenti. Donec의 mattis, PEDE의 VEL의 pharetra의 blandit, 에로스 faucibus 마그나의 ligula, 아이디 euismod lacus의 슬픔의 eget ODIO. 남 scelerisque. Donec 비 리베로 나오지 nulla mattis commodo. UT sagittis. Donec에 NiSi lectus, feugiat의 porttitor, tempor 교류, tempor 이력서, PEDE. Aenean vehicula velit 유럽 연합 (EU) TELLUS interdum rutrum. 마에 케 나스 commodo. Pellentesque의 NEC의 ELIT. Fusce lacus있다. Vivamus 리베로 이력서의 lectus의 hendrerit의 hendrerit. </ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
접는 내용
콘텐츠가 개방 / 폐쇄 전환 선택한 탭을 클릭합니다. 이 기능을 사용하려면 설정해야 collapsible true로 옵션을 선택합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 탭 (탭) - 콘텐츠를 접는 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#tabs") .tabs ({
축소 : 사실
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "탭">
<UL>
<리> <a href="#tabs-1"> 눈크 tincidunt </A> </ 리>
<리> <a href="#tabs-2"> Proin 슬픔 </A> </ 리>
<리> <a href="#tabs-3"> Aenean 된 Lacinia </A> </ 리>
</ UL>
<사업부 아이디 = "탭-1">
<P> <strong>을 내용 패널을 닫고 다시 탭을 클릭합니다. </ STRONG> </ P>
<P> Proin ELIT arcu, rutrum의 commodo는 vehicula 템퍼,하는을 commodo risus. Curabitur의 NEC의 arcu합니다. Donec을 마일 AMET 앉아 sollicitudin mauris. 남 elementum quam ullamcorper 분담금. Etiam aliquet 마사 등가 lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper 레오. Vivamus 나오지 마그나 quis ligula의 eleifend의 adipiscing. 음주 운전 orci. aliquam의 sodales의 tortor 이력서 ipsum의. aliquam의 nulla. 음주 운전의 aliquam의 molestie의 erat. 유타 등 mauris VEL PEDE varius sollicitudin. 나오지 유타 슬픔 NEC의 orci의 tincidunt interdum. Phasellus의 ipsum의. 눈크 tristique의 템퍼의 lectus . </ p>
</ DIV>
<사업부 아이디 = "탭-2">
<P> <strong>을 내용 패널을 닫고 다시 탭을 클릭합니다. </ STRONG> </ P>
<P> Morbi의 tincidunt, 음주 운전은 facilisis의 feugiat, ODIO metus gravida 분담금, 유타 pharetra의 마사 metus 아이디 NUNC. 음주 운전 scelerisque molestie turpis. Sed의의 fringilla, 마사 eget luctus의 malesuada, metus 에로스 molestie lectus, 유타 템퍼 스 에로스 마사 유타 슬픔. Aenean을 AMET 앉아 aliquet의 fringilla SEM. Suspendisse는 에로스 도박 마일의 adipiscing의 adipiscing에. 저희에게 연락하십시오. Morbi의 facilisis ligula의 suscipit의 aliquam에 ligula을 나오지. Curabitur ornare consequat NUNC. Aenean의 VEL의 metus. UT posuere viverra nulla. aliquam의 erat의 volutpat. Pellentesque convallis. 마에 케 나스의 feugiat, TELLUS pellentesque pretium posuere, 고양이 속가 lorem euismod 고양이 속, 유럽 연합 (EU) ornare 레오에 NiSi의 VEL의 고양이 속. Mauris consectetur tortor 등 푸 루스. </ P>
</ DIV>
<사업부 아이디 = "탭-3">
<P> <strong>을 내용 패널을 닫고 다시 탭을 클릭합니다. </ STRONG> </ P>
<P> 음주 운전의 cursus. 마에 케 나스의 ligula의 에로스, blandit NEC, pharetra,시에서 언제나, 마그나. Nullam 교류 lacus. Nulla의 facilisi. 저희에게 연락 viverra 그래서 우린 이력서의 neque. 저희에게 연락 blandit의 adipiscing의 velit. Suspendisse의 potenti. Donec의 mattis, PEDE의 VEL의 pharetra의 blandit, 에로스 faucibus 마그나의 ligula, 아이디 euismod lacus의 슬픔의 eget ODIO. 남 scelerisque. Donec 비 리베로 나오지 nulla mattis commodo. UT sagittis. Donec에 NiSi lectus, feugiat의 porttitor, tempor 교류, tempor 이력서, PEDE. Aenean vehicula velit 유럽 연합 (EU) TELLUS interdum rutrum. 마에 케 나스 commodo. Pellentesque의 NEC의 ELIT. Fusce lacus있다. Vivamus 리베로 이력서의 lectus의 hendrerit의 hendrerit. </ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
아약스를 통해 콘텐츠를
Ajax를 통해 외부 콘텐츠에 액세스 탭 탭의 HREF 링크의 값을 설정합니다. 부하가 일반 탭에 완전한 복귀 때 Ajax 요청이 응답하는에 탭 "로드 중 ..."대기합니다.
태그 (3) 및 (4) 이러한 경우에 서버 측 오류를 처리하는 방법 AJAX 태그에 느린 로딩 손상을 설명합니다. 모두 웹 서버가 PHP를 설명 할 필요가 있습니다. 이들 파일 시스템 외부에서 작동하지 않는다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 탭 (탭) - 아약스를 통해 콘텐츠를 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#tabs") .tabs ({
beforeLoad : 함수 (이벤트, UI) {
ui.jqXHR.error (함수 () {
ui.panel.html (
"탭을로드 할 수 없습니다.이 데모가 아닌 경우."+
"우리는 가능한 한 빨리 문제가 해결됩니다.");
});
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "탭">
<UL>
<리> <a href="#tabs-1"> 사전로드 된 </A> </ 리>
<리> <a의 href="ajax/content1.html"> 태그 (1) </A> </ 리>
<리> <a의 href="ajax/content2.html"> 태그 (2) </A> </ 리>
<리> <a href="ajax/content3-slow.php"> 태그 (3) (느린) </A> </ 리>
<리> <a의 href="ajax/content4-broken.php"> 라벨 4 (손상) </A> </ 리>
</ UL>
<사업부 아이디 = "탭-1">
<P> Proin ELIT arcu, rutrum의 commodo는 vehicula 템퍼,하는을 commodo risus. Curabitur의 NEC의 arcu합니다. Donec을 마일 AMET 앉아 sollicitudin mauris. 남 elementum quam ullamcorper 분담금. Etiam aliquet 마사 등가 lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper 레오. Vivamus 나오지 마그나 quis ligula의 eleifend의 adipiscing. 음주 운전 orci. aliquam의 sodales의 tortor 이력서 ipsum의. aliquam의 nulla. 음주 운전의 aliquam의 molestie의 erat. 유타 등 mauris VEL PEDE varius sollicitudin. 나오지 유타 슬픔 NEC의 orci의 tincidunt interdum. Phasellus의 ipsum의. 눈크 tristique의 템퍼의 lectus . </ p>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
때 마우스 마우스 오버를 엽니 다
으로 event 마우스가 온 / 오프 상태에 놓을 때 옵션 부품을 전환합니다. 기본값은 이벤트 "를 클릭"입니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 탭 (탭) - 마우스가 열린 </ 제목> 가리킬 때
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#tabs") .tabs ({
이벤트 : "마우스 오버"
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "탭">
<UL>
<리> <a href="#tabs-1"> 눈크 tincidunt </A> </ 리>
<리> <a href="#tabs-2"> Proin 슬픔 </A> </ 리>
<리> <a href="#tabs-3"> Aenean 된 Lacinia </A> </ 리>
</ UL>
<사업부 아이디 = "탭-1">
<P> Proin ELIT arcu, rutrum의 commodo는 vehicula 템퍼,하는을 commodo risus. Curabitur의 NEC의 arcu합니다. Donec을 마일 AMET 앉아 sollicitudin mauris. 남 elementum quam ullamcorper 분담금. Etiam aliquet 마사 등가 lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper 레오. Vivamus 나오지 마그나 quis ligula의 eleifend의 adipiscing. 음주 운전 orci. aliquam의 sodales의 tortor 이력서 ipsum의. aliquam의 nulla. 음주 운전의 aliquam의 molestie의 erat. 유타 등 mauris VEL PEDE varius sollicitudin. 나오지 유타 슬픔 NEC의 orci의 tincidunt interdum. Phasellus의 ipsum의. 눈크 tristique의 템퍼의 lectus . </ p>
</ DIV>
<사업부 아이디 = "탭-2">
<P> Morbi의 tincidunt, 음주 운전은 facilisis의 feugiat, ODIO metus gravida 분담금, 유타 pharetra의 마사 metus 아이디 NUNC. 음주 운전 scelerisque molestie turpis. Sed의의 fringilla, 마사 eget luctus의 malesuada, metus 에로스 molestie lectus, 유타 템퍼 스 에로스 마사 유타 슬픔. Aenean을 AMET 앉아 aliquet의 fringilla SEM. Suspendisse는 에로스 도박 마일의 adipiscing의 adipiscing에. 저희에게 연락하십시오. Morbi의 facilisis ligula의 suscipit의 aliquam에 ligula을 나오지. Curabitur ornare consequat NUNC. Aenean의 VEL의 metus. UT posuere viverra nulla. aliquam의 erat의 volutpat. pellentesque convallis. 마에 케 나스의 feugiat, TELLUS pellentesque pretium posuere, 고양이 속가 lorem euismod 고양이 속, 유럽 연합 (EU) ornare 레오에 NiSi의 VEL의 고양이 속. Mauris consectetur tortor 등 푸 루스. </ P>
</ DIV>
<사업부 아이디 = "탭-3">
<P> Mauris eleifend 추정 등 turpis. 음주 운전 아이디 erat. Suspendisse의 potenti. Aliquam의 vulputate, PEDE의 VEL의 vehicula의 accumsan, 미 neque rutrum erat, 유럽 연합 (EU) congue orci가 lorem eget가 lorem. 도박 비 앤티. 클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라 , inceptos의 himenaeos 당. Fusce sodales. Quisque 유럽 연합 (EU) urna의 VEL enim의 commodo의 pellentesque. 저희에게 연락 유럽 연합 (EU) risus hendrerit의 ligula의 템퍼의 pretium. Curabitur가 lorem enim이 pretium NEC, feugiat의 NEC가하는을 luctus, lacus. </ P>
<P> 음주 운전의 cursus. 마에 케 나스의 ligula의 에로스, blandit NEC, pharetra,시에서 언제나, 마그나. Nullam 교류 lacus. Nulla의 facilisi. 저희에게 연락 viverra 그래서 우린 이력서의 neque. 저희에게 연락 blandit의 adipiscing의 velit. Suspendisse의 potenti. Donec의 mattis, PEDE의 VEL의 pharetra의 blandit, 에로스 faucibus 마그나의 ligula, 아이디 euismod lacus의 슬픔의 eget ODIO. 남 scelerisque. Donec 비 리베로 나오지 nulla mattis commodo. UT sagittis. Donec에 NiSi lectus, feugiat의 porttitor, tempor 교류, tempor 이력서, PEDE. Aenean vehicula velit 유럽 연합 (EU) TELLUS interdum rutrum. 마에 케 나스 commodo. Pellentesque의 NEC의 ELIT. Fusce lacus있다. Vivamus 리베로 이력서의 lectus의 hendrerit의 hendrerit. </ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
간단한 조작
간단하게 추가하고 탭을 제거합니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 탭 (탭) - 간단한 조작 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스타일>
#dialog 라벨, #dialog 입력 {디스플레이 : 블록;}
#dialog 레이블 {마진 - 맨 : 0.5em;}
#dialog 입력, #dialog 텍스트 영역 {폭 : 95 %;}
#tabs {마진 - 맨 : 1em;}
#tabs의 리 .ui-아이콘 닫기 {플로트 : 왼쪽, 여백 : 0.4em 0.2em 0 0; 커서 : 포인터;}
#add_tab {커서 : 포인터;}
</ 스타일>
<스크립트>
$ (함수 () {
VAR tabTitle = $ ( "#tab_title")
tabContent = $ ( "#tab_content")
tabTemplate = "<리> <a href='#{href}'> # {라벨} </A> <스팬 클래스 = 'UI-아이콘의 UI 아이콘 닫기'역할 = '프리젠 테이션'> 탭을 제거 </ 스팬 > </ 리> "
tabCounter = 2;
VAR 탭 =의 $ ( "#tabs") .tabs ();
// 모달 대화 상자를 초기화 : {(버튼과 내부 리셋 형태 "가까이"콜백 var에 대화 = $ ( "#dialog") .dialog 사용자 지정
에 AutoOpen : 거짓,
모달 : 사실,
버튼 : {
추가 기능을 () {
addTab ();
$ (이) .dialog ( "가까운");
},
취소 기능 () {
$ (이) .dialog ( "가까운");
}
},
가까이 : 함수 () {
() [0] .reset를 형성하고;
}
});
// AddTab 양식 : addTab 기능을 제출하고 대화 VAR 양식 = dialog.find ( "양식") .submit (함수 (이벤트를 닫을 때 호출) {
addTab ();
dialog.dialog ( "가까운");
에서는 event.preventDefault ();
});
// 실제 addTab 기능 : () {새 탭 입력 기능 addTab를 추가하려면 위의 양식을 사용하여
VAR 라벨 = tabTitle.val () || "탭"+ tabCounter,
ID = "탭 -"+ tabCounter,
리는 $ = (tabTemplate.replace (/ # \ {HREF의 \} / g, "#"+ ID) .replace (/ # \ {라벨 \} / g, 라벨)),
tabContentHtml = tabContent.val () || "탭"+ tabCounter + "내용.";
tabs.find ( ".ui-탭 - 탐색")으로 .Append (리)
tabs.append ( "<DIV ID = '"+ 아이디 + "'> <P>"+ tabContentHtml + "</ P> </ DIV>");
tabs.tabs는 ( "새로 고침");
tabCounter ++;
}
// AddTab 버튼 : 열기 대화 상자 $ ( "#add_tab")의 값
.button ()
.click (함수 () {
dialog.dialog ( "열");
});
// 닫기 아이콘 : (클릭하면, "클릭" "span.ui-아이콘 닫기"(탭 tabs.delegate 제거 기능) {
VAR panelId = $ (이) .closest ( "리") .remove () ATTR ( "아리아 - 컨트롤");
$ ( "#"+ PanelId) .remove ();
tabs.tabs는 ( "새로 고침");
});
tabs.bind ( "의 keyup", 기능 (이벤트) {
경우 (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
. 바르 panelId = tabs.find ( ".ui-탭 활동") .remove () ATTR ( "아리아 - 컨트롤");
$ ( "#"+ PanelId) .remove ();
tabs.tabs는 ( "새로 고침");
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "대화"제목 = "탭 데이터">
<양식>
<FIELDSET 클래스 = "UI 헬퍼 리셋">
< "TAB_TITLE"= 대한 라벨> 제목 </ 라벨>
<입력 유형 = "텍스트"이름 = "TAB_TITLE"ID = "TAB_TITLE"값 = ""클래스 = "UI 위젯 콘텐츠 UI 코너 - 모든">
< "tab_content"= 대한 라벨> 내용 </ 라벨>
<텍스트 영역의 이름 = "tab_content"ID = "tab_content"클래스 = "UI 위젯 콘텐츠 UI 코너 - 모든"> </ 텍스트 영역>
</ FIELDSET>
</ FORM>
</ DIV>
<버튼 ID = "add_tab"> 탭을 추가 </ 버튼>
<사업부 아이디 = "탭">
<UL>
<리> <a href="#tabs-1"> 눈크 tincidunt </A> <스팬 클래스 = "UI-아이콘의 UI 아이콘 닫기"역할 = "프리젠 테이션"> </ SPAN> </ 탭을 제거 리>
</ UL>
<사업부 아이디 = "탭-1">
<P> Proin ELIT arcu, rutrum의 commodo는 vehicula 템퍼,하는을 commodo risus. Curabitur의 NEC의 arcu합니다. Donec을 마일 AMET 앉아 sollicitudin mauris. 남 elementum quam ullamcorper 분담금. Etiam aliquet 마사 등가 lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper 레오. Vivamus 나오지 마그나 quis ligula의 eleifend의 adipiscing. 음주 운전 orci. aliquam의 sodales의 tortor 이력서 ipsum의. aliquam의 nulla. 음주 운전의 aliquam의 molestie의 erat. 유타 등 mauris VEL PEDE varius sollicitudin. 나오지 유타 슬픔 NEC의 orci의 tincidunt interdum. Phasellus의 ipsum의. 눈크 tristique의 템퍼의 lectus . </ p>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
정렬 (정렬 가능한)
드래그 탭 위를 재정렬합니다.
단순히 전화 .ui-tabs-nav 에 요소 .sortable() , 당신은 정렬 탭을하도록 할 수 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 탭 (탭) - 정렬 (정렬 가능한) </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
VAR 탭 =의 $ ( "#tabs") .tabs ();
tabs.find ( ".ui-탭 - 탐색") .sortable ({
축 : "X",
중지 기능 () {
tabs.tabs는 ( "새로 고침");
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "탭">
<UL>
<리> <a href="#tabs-1"> 눈크 tincidunt </A> </ 리>
<리> <a href="#tabs-2"> Proin 슬픔 </A> </ 리>
<리> <a href="#tabs-3"> Aenean 된 Lacinia </A> </ 리>
</ UL>
<사업부 아이디 = "탭-1">
<P> Proin ELIT arcu, rutrum의 commodo는 vehicula 템퍼,하는을 commodo risus. Curabitur의 NEC의 arcu합니다. Donec을 마일 AMET 앉아 sollicitudin mauris. 남 elementum quam ullamcorper 분담금. Etiam aliquet 마사 등가 lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper 레오. Vivamus 나오지 마그나 quis ligula의 eleifend의 adipiscing. 음주 운전 orci. aliquam의 sodales의 tortor 이력서 ipsum의. aliquam의 nulla. 음주 운전의 aliquam의 molestie의 erat. 유타 등 mauris VEL PEDE varius sollicitudin. 나오지 유타 슬픔 NEC의 orci의 tincidunt interdum. Phasellus의 ipsum의. 눈크 tristique의 템퍼의 lectus . </ p>
</ DIV>
<사업부 아이디 = "탭-2">
<P> Morbi의 tincidunt, 음주 운전은 facilisis의 feugiat, ODIO metus gravida 분담금, 유타 pharetra의 마사 metus 아이디 NUNC. 음주 운전 scelerisque molestie turpis. Sed의의 fringilla, 마사 eget luctus의 malesuada, metus 에로스 molestie lectus, 유타 템퍼 스 에로스 마사 유타 슬픔. Aenean을 AMET 앉아 aliquet의 fringilla SEM. Suspendisse는 에로스 도박 마일의 adipiscing의 adipiscing에. 저희에게 연락하십시오. Morbi의 facilisis ligula의 suscipit의 aliquam에 ligula을 나오지. Curabitur ornare consequat NUNC. Aenean의 VEL의 metus. UT posuere viverra nulla. aliquam의 erat의 volutpat. Pellentesque convallis. 마에 케 나스의 feugiat, TELLUS pellentesque pretium posuere, 고양이 속가 lorem euismod 고양이 속, 유럽 연합 (EU) ornare 레오에 NiSi의 VEL의 고양이 속. Mauris consectetur tortor 등 푸 루스. </ P>
</ DIV>
<사업부 아이디 = "탭-3">
<P> Mauris eleifend 추정 등 turpis. 음주 운전 아이디 erat. Suspendisse의 potenti. Aliquam의 vulputate, PEDE의 VEL의 vehicula의 accumsan, 미 neque rutrum erat, 유럽 연합 (EU) congue orci가 lorem eget가 lorem. 도박 비 앤티. 클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라 , inceptos의 himenaeos 당. Fusce sodales. Quisque 유럽 연합 (EU) urna의 VEL enim의 commodo의 pellentesque. 저희에게 연락 유럽 연합 (EU) risus hendrerit의 ligula의 템퍼의 pretium. Curabitur가 lorem enim이 pretium NEC, feugiat의 NEC가하는을 luctus, lacus. </ P>
<P> 음주 운전의 cursus. 마에 케 나스의 ligula의 에로스, blandit NEC, pharetra,시에서 언제나, 마그나. Nullam 교류 lacus. Nulla의 facilisi. 저희에게 연락 viverra 그래서 우린 이력서의 neque. 저희에게 연락 blandit의 adipiscing의 velit. Suspendisse의 potenti. Donec의 mattis, PEDE의 VEL의 pharetra의 blandit, 에로스 faucibus 마그나의 ligula, 아이디 euismod lacus의 슬픔의 eget ODIO. 남 scelerisque. Donec 비 리베로 나오지 nulla mattis commodo. UT sagittis. Donec에 NiSi lectus, feugiat의 porttitor, tempor 교류, tempor 이력서, PEDE. Aenean vehicula velit 유럽 연합 (EU) TELLUS interdum rutrum. 마에 케 나스 commodo. Pellentesque의 NEC의 ELIT. Fusce lacus있다. Vivamus 리베로 이력서의 lectus의 hendrerit의 hendrerit. </ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
탭의 바닥
콘텐츠의 맨 아래에 몇 가지 추가 (위치 결정) CSS와 JS (올바른 클래스 요소에 배치), Jieke 탭.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 탭 (탭) - 탭 페이지 하단 </ 제목>에서
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#tabs") .tabs ();
클래스를 수정 //
$ ( ".tabs - 아래는 .ui-탭 - 탐색, .tabs 바닥 .ui-탭 - 탐색> *")
.removeClass ( "UI 코너 - 모든 UI 코너 탑")
.addClass ( "UI 코너 바닥");
단부 // $에있는 이동할 수있는 네비게이션 ( ".tabs 바닥 .ui-탭 - 탐색") .appendTo ( ".tabs 바닥");
});
</ 스크립트>
<스타일>
탭이 변경 내용의 높이가 변경되지 않도록 / * * 높이 강제 /
#tabs .tabs 스페이서 {플로트 : 왼쪽; 높이 : 200 픽셀을}
.tabs 바닥 .ui-탭 - 탐색 {명확 : 왼쪽; 패딩 : 0 .2em .2em .2em;}
.tabs 바닥 .ui-탭 - 탐색 리 {가기 : 자동; 바닥 : 0; 마진 : 0 .2em 1 픽셀 0; 국경 바닥 : 자동; 국경 정상 : 0;}
.tabs 바닥 .ui-탭 - 탐색의 li.ui 탭이 활성 {마진 - 맨 : -1px; 패딩 - 가기 : 1 픽셀;}
</ 스타일>
</ 헤드>
<바디>
<사업부 아이디 = "탭"클래스 = "탭 하단">
<UL>
<리> <a href="#tabs-1"> 눈크 tincidunt </A> </ 리>
<리> <a href="#tabs-2"> Proin 슬픔 </A> </ 리>
<리> <a href="#tabs-3"> Aenean 된 Lacinia </A> </ 리>
</ UL>
<사업부 클래스 = "탭 스페이서"> </ DIV>
<사업부 아이디 = "탭-1">
<P> Proin ELIT arcu, rutrum의 commodo는 vehicula 템퍼,하는을 commodo risus. Curabitur의 NEC의 arcu합니다. Donec을 마일 AMET 앉아 sollicitudin mauris. 남 elementum quam ullamcorper 분담금. Etiam aliquet 마사 등가 lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper 레오. Vivamus 나오지 마그나 quis ligula의 eleifend의 adipiscing. 음주 운전 orci. aliquam의 sodales의 tortor 이력서 ipsum의. aliquam의 nulla. 음주 운전의 aliquam의 molestie의 erat. 유타 등 mauris VEL PEDE varius sollicitudin. 나오지 유타 슬픔 NEC의 orci의 tincidunt interdum. Phasellus의 ipsum의. 눈크 tristique의 템퍼의 lectus . </ p>
</ DIV>
<사업부 아이디 = "탭-2">
<P> Morbi의 tincidunt, 음주 운전은 facilisis의 feugiat, ODIO metus gravida 분담금, 유타 pharetra의 마사 metus 아이디 NUNC. 음주 운전 scelerisque molestie turpis. Sed의의 fringilla, 마사 eget luctus의 malesuada, metus 에로스 molestie lectus, 유타 템퍼 스 에로스 마사 유타 슬픔. Aenean을 AMET 앉아 aliquet의 fringilla SEM. Suspendisse는 에로스 도박 마일의 adipiscing의 adipiscing에. 저희에게 연락하십시오. Morbi의 facilisis ligula의 suscipit의 aliquam에 ligula을 나오지. Curabitur ornare consequat NUNC. Aenean의 VEL의 metus. UT posuere viverra nulla. aliquam의 erat의 volutpat. pellentesque convallis. 마에 케 나스의 feugiat, TELLUS pellentesque pretium posuere, 고양이 속가 lorem euismod 고양이 속, 유럽 연합 (EU) ornare 레오에 NiSi의 VEL의 고양이 속. Mauris consectetur tortor 등 푸 루스. </ P>
</ DIV>
<사업부 아이디 = "탭-3">
<P> Mauris eleifend 추정 등 turpis. 음주 운전 아이디 erat. Suspendisse의 potenti. Aliquam의 vulputate, PEDE의 VEL의 vehicula의 accumsan, 미 neque rutrum erat, 유럽 연합 (EU) congue orci가 lorem eget가 lorem. 도박 비 앤티. 클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라 , inceptos의 himenaeos 당. Fusce sodales. Quisque 유럽 연합 (EU) urna의 VEL enim의 commodo의 pellentesque. 저희에게 연락 유럽 연합 (EU) risus hendrerit의 ligula의 템퍼의 pretium. Curabitur가 lorem enim이 pretium NEC, feugiat의 NEC가하는을 luctus, lacus. </ P>
<P> 음주 운전의 cursus. 마에 케 나스의 ligula의 에로스, blandit NEC, pharetra,시에서 언제나, 마그나. Nullam 교류 lacus. Nulla의 facilisi. 저희에게 연락 viverra 그래서 우린 이력서의 neque. 저희에게 연락 blandit의 adipiscing의 velit. Suspendisse의 potenti. Donec의 mattis, PEDE의 VEL의 pharetra의 blandit, 에로스 faucibus 마그나의 ligula, 아이디 euismod lacus의 슬픔의 eget ODIO. 남 scelerisque. Donec 비 리베로 나오지 nulla mattis commodo. UT sagittis. Donec에 NiSi lectus, feugiat의 porttitor, tempor 교류, tempor 이력서, PEDE. Aenean vehicula velit 유럽 연합 (EU) TELLUS interdum rutrum. 마에 케 나스 commodo. Pellentesque의 NEC의 ELIT. Fusce lacus있다. Vivamus 리베로 이력서의 lectus의 hendrerit의 hendrerit. </ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
수직 탭
전환 탭을 클릭하면 콘텐츠의 다른 논리 부분으로 나누어 져 있습니다.
<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
<메타 문자 집합 = "UTF-8">
<제목> jQuery를 UI 탭 (탭) - 수직 탭 </ 제목>
<링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
<스크립트>
$ (함수 () {
$ ( "#tabs") .tabs () AddClass ( "UI 탭이 수직 UI 헬퍼 - clearfix");
$는 .removeClass ( "UI 코너 탑") .addClass ( "UI 코너에서 왼쪽") ( "리튬을 #tabs");
});
</ 스크립트>
<스타일>
.ui-탭 수직 {폭 : 55em;}
.ui-탭 수직 .ui-탭 - 탐색 {패딩 : .2em .1em .2em .2em; 플로트 : 왼쪽; 폭 : 12em;}
.ui-탭 수직 .ui-탭 - 탐색 리는 {맑은는 : 왼쪽, 폭 : 100 %; 국경 바닥 폭 : 1 픽셀 중요한, 국경 오른쪽 폭 :! 0 중요; 마진 :! 0 -1px .2em 0;
.ui-탭 수직 .ui-탭 - 탐색 리 a를 {디스플레이 : 블록;}
.ui-탭 수직 .ui-탭 - 탐색의 li.ui 탭이 활성 {패딩 바닥 : 0; 패딩 오른쪽 : .1em, 국경 오른쪽 폭 : 1 픽셀; 경계에서 오른쪽 폭 : 1 픽셀;}
.ui-탭 수직 .ui-탭 패널 {패딩 : 1em; 플로트 : 오른쪽; 폭 : 40em;}
</ 스타일>
</ 헤드>
<바디>
<사업부 아이디 = "탭">
<UL>
<리> <a href="#tabs-1"> 눈크 tincidunt </A> </ 리>
<리> <a href="#tabs-2"> Proin 슬픔 </A> </ 리>
<리> <a href="#tabs-3"> Aenean 된 Lacinia </A> </ 리>
</ UL>
<사업부 아이디 = "탭-1">
<H2> 콘텐츠 제목 1 </ H2>
<P> Proin ELIT arcu, rutrum의 commodo는 vehicula 템퍼,하는을 commodo risus. Curabitur의 NEC의 arcu합니다. Donec을 마일 AMET 앉아 sollicitudin mauris. 남 elementum quam ullamcorper 분담금. Etiam aliquet 마사 등가 lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper 레오. Vivamus 나오지 마그나 quis ligula의 eleifend의 adipiscing. 음주 운전 orci. aliquam의 sodales의 tortor 이력서 ipsum의. aliquam의 nulla. 음주 운전의 aliquam의 molestie의 erat. 유타 등 mauris VEL PEDE varius sollicitudin. 나오지 유타 슬픔 NEC의 orci의 tincidunt interdum. Phasellus의 ipsum의. 눈크 tristique의 템퍼의 lectus . </ p>
</ DIV>
<사업부 아이디 = "탭-2">
<H2> 콘텐츠 제목이 </ H2>
<P> Morbi의 tincidunt, 음주 운전은 facilisis의 feugiat, ODIO metus gravida 분담금, 유타 pharetra의 마사 metus 아이디 NUNC. 음주 운전 scelerisque molestie turpis. Sed의의 fringilla, 마사 eget luctus의 malesuada, metus 에로스 molestie lectus, 유타 템퍼 스 에로스 마사 유타 슬픔. Aenean을 AMET 앉아 aliquet의 fringilla SEM. Suspendisse는 에로스 도박 마일의 adipiscing의 adipiscing에. 저희에게 연락하십시오. Morbi의 facilisis ligula의 suscipit의 aliquam에 ligula을 나오지. Curabitur ornare consequat NUNC. Aenean의 VEL의 metus. UT posuere viverra nulla. aliquam의 erat의 volutpat. pellentesque convallis. 마에 케 나스의 feugiat, TELLUS pellentesque pretium posuere, 고양이 속가 lorem euismod 고양이 속, 유럽 연합 (EU) ornare 레오에 NiSi의 VEL의 고양이 속. Mauris consectetur tortor 등 푸 루스. </ P>
</ DIV>
<사업부 아이디 = "탭-3">
<H2> 콘텐츠 제목 3 </ H2>
<P> Mauris eleifend 추정 등 turpis. 음주 운전 아이디 erat. Suspendisse의 potenti. Aliquam의 vulputate, PEDE의 VEL의 vehicula의 accumsan, 미 neque rutrum erat, 유럽 연합 (EU) congue orci가 lorem eget가 lorem. 도박 비 앤티. 클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라 , inceptos의 himenaeos 당. Fusce sodales. Quisque 유럽 연합 (EU) urna의 VEL enim의 commodo의 pellentesque. 저희에게 연락 유럽 연합 (EU) risus hendrerit의 ligula의 템퍼의 pretium. Curabitur가 lorem enim이 pretium NEC, feugiat의 NEC가하는을 luctus, lacus. </ P>
<P> 음주 운전의 cursus. 마에 케 나스의 ligula의 에로스, blandit NEC, pharetra,시에서 언제나, 마그나. Nullam 교류 lacus. Nulla의 facilisi. 저희에게 연락 viverra 그래서 우린 이력서의 neque. 저희에게 연락 blandit의 adipiscing의 velit. Suspendisse의 potenti. Donec의 mattis, PEDE의 VEL의 pharetra의 blandit, 에로스 faucibus 마그나의 ligula, 아이디 euismod lacus의 슬픔의 eget ODIO. 남 scelerisque. Donec 비 리베로 나오지 nulla mattis commodo. UT sagittis. Donec에 NiSi lectus, feugiat의 porttitor, tempor 교류, tempor 이력서, PEDE. Aenean vehicula velit 유럽 연합 (EU) TELLUS interdum rutrum. 마에 케 나스 commodo. Pellentesque의 NEC의 ELIT. Fusce lacus있다. Vivamus 리베로 이력서의 lectus의 hendrerit의 hendrerit. </ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>