jQuery를 UI 예 - 패널을 접는 (아코디언)
정보 내용 접을 수있는 패널을 표시하기위한 제한된 공간 디스플레이 내에서.
아코디언 부분에 대한 자세한 내용은 API 문서를 참조 접이식 패널 부재 (아코디언 위젯을) .
기본 기능
확장 머리에 클릭 / 축소 함량은 동일한 탭 (탭)과 같은 논리의 여러 부분으로 나누어 져 있습니다. 마우스가 켜짐 / 꺼짐 상태의 여러 부분을 열 전환할지 여부를 놓을 때 선택적으로 설정할 수 있습니다.
기본 HTML 태그는 제목 (H3 태그) 및 콘텐츠 DIV 일련이므로 컨텐트는 자바 스크립트를 거치지 않고 사용될 수있다.
<! 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">
<스크립트>
$ (함수 () {
$ ( "#accordion") .accordion ();
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "아코디언">
<H3> 1 부 </ H3>
<DIV>
<P>
Mauris mauris 분담금, blandit 등, A, suscipit eget, quam을 ultrices. 정수
유타 neque. Vivamus에 NiSi metus, molestie의 VEL은,에서, 앉아 condimentum gravida
에로스 suscipit AMET, NUNC. 남 nibh. Donec. 남 마일. Proin viverra 레오 유타
ODIO. Curabitur malesuada. 도박 velit 유럽 연합 분담금 scelerisque vulputate.
</ P>
</ DIV>
<H3> 제 2 부 </ H3>
<DIV>
<P>
나오지도 않은 urna. Donec 등 분담금. Phasellus 유럽 연합 (EU) ligula. 도박은 AMET 앉아
푸 루스. Vivamus hendrerit, aliquet의 laoreet에서 슬픔, mauris의 turpis의 porttitor
velit, faucibus interdum TELLUS 리베로 교류 그래서 우린. Vivamus 비 quam.에
faucibus urna suscipit.
</ P>
</ DIV>
<H3> 섹션 3 </ H3>
<DIV>
<P>
남 enim의 risus, molestie 등, 간이 교류, aliquam 교류, risus. Quisque의 lobortis.
Phasellus pellentesque 푸 루스의 PEDE에서 마사. Aenean. Phasellus 교류 리베로
교류 TELLUS의 pellentesque의 언제나. Sed의 교류 고양이 속. Sed의의 commodo, 마그나 quis
된 Lacinia의 ornare는, quam 분담금의 aliquam의에 NiSi는 유럽 연합 (EU) iaculis 레오 푸 루스는 음주 운전을 venenatis.
</ P>
<UL>
<리> 목록 항목 하나 </ 리>
<리> 목록 항목이 </ 리>
<리> 목록 항목 세 </ 리>
</ UL>
</ DIV>
<H3> 제 4 부 </ H3>
<DIV>
<P>
CRAS 의견. Pellentesque 주민 morbi tristique senectus 등 netus
등 malesuada의 FAMES 교류 turpis의 egestas. 도박 판돈 ipsum의 primis에서
faucibus orci luctus 등 ultrices posuere cubilia Curae, Aenean의 된 Lacinia
mauris VEL 추정.
</ P>
<P>
Suspendisse 유럽 연합 (EU)의 nisl. Nullam의 유타 리베로. 정수 dignissim consequat lectus.
클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라, 당
inceptos의 himenaeos.
</ 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">
<스크립트>
$ (함수 () {
$ ( "#accordion") .accordion ({
축소 : 사실
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "아코디언">
<H3> 1 부 </ H3>
<DIV>
<P> Mauris mauris 분담금, blandit 등, ultrices A, suscipit eget, quam. 정수 유타 neque. Vivamus에 NiSi metus, molestie의 VEL이,에, 에로스 suscipit AMET, NUNC. 남 nibh. Donec 앉아 condimentum gravida. 남 마일. Proin viverra 레오 유타 ODIO. Curabitur의 malesuada. 도박 velit 유럽 연합 분담금 scelerisque vulputate. </ P>
</ DIV>
<H3> 제 2 부 </ H3>
<DIV>
<P> Sed의 비 urna. Donec 등 분담금. Phasellus 유럽 연합 (EU) ligula. 도박 AMET 앉아 푸 루스. Vivamus hendrerit, aliquet의 laoreet, mauris의 turpis의 porttitor의 velit, faucibus interdum TELLUS 리베로 교류 그래서 우린에서 슬픔. Vivamus 비 quam. urna faucibus suscipit합니다. < / P>
</ DIV>
<H3> 섹션 3 </ H3>
<DIV>
<P> 남 enim의 risus, molestie 등, 간이 교류, aliquam 교류, risus. Quisque의 lobortis. Phasellus pellentesque 푸 루스에서 마사. Aenean PEDE. Phasellus 교류 리베로 교류 TELLUS의 pellentesque의 언제나. Sed의 교류 고양이 속. Sed의의 commodo에서, 마그나 quis 된 Lacinia ornare , quam 앤티 aliquam에 NiSi, 유럽 연합 (EU) iaculis 레오 푸 루스가 venenatis 음주 운전. </ P>
<UL>
<리> 목록 항목 하나 </ 리>
<리> 목록 항목이 </ 리>
<리> 목록 항목 세 </ 리>
</ UL>
</ DIV>
<H3> 제 4 부 </ H3>
<DIV>
<P> CRAS 의견 Pellentesque 주민 morbi tristique senectus 등 netus 등 malesuada FAMES 교류 turpis의 egestas 도박 판돈 ipsum의 primis에 faucibus orci luctus 등 ultrices posuere cubilia Curae; .. Aenean 된 Lacinia mauris VEL 추정 </ p> <p>이 Suspendisse 유럽 연합 (EU)의 nisl. . Nullam의 유타 리베로. 정수 dignissim consequat lectus. 클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라, inceptos의 himenaeos 당. </ P>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
사용자 정의 아이콘
을 통해 icons 옵션 제목 아이콘을 사용자 정의, icons 옵션은 기본 제목을 수락하고 (개방) 상태 클래스를 활성화합니다. 모든 클래스의 UI의 CSS 프레임 워크를 사용하거나 배경 이미지를 사용하는 사용자 정의 클래스를 만들 수 있습니다.
<! 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 아이콘 = {
헤더 : "UI-아이콘 - 원 - 화살표 - 전자를"
activeHeader "UI-아이콘 - 원 - 화살표의"
};
$ ( "#accordion") .accordion ({
아이콘 : 아이콘
});
$ ( "#toggle") .button (). 클릭 (함수 () {
{() $ ( "#accordion") .accordion ( "옵션", "아이콘")하는 경우
$ ( "#accordion") .accordion ( "옵션", "아이콘", NULL);
} 그밖에 {
$ ( "#accordion") .accordion ( "옵션", "아이콘"아이콘)
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "아코디언">
<H3> 1 부 </ H3>
<DIV>
<P> Mauris mauris 분담금, blandit 등, ultrices A, suscipit eget, quam. 정수 유타 neque. Vivamus에 NiSi metus, molestie의 VEL이,에, 에로스 suscipit AMET, NUNC. 남 nibh. Donec 앉아 condimentum gravida. 남 마일. Proin viverra 레오 유타 ODIO. Curabitur의 malesuada. 도박 velit 유럽 연합 분담금 scelerisque vulputate. </ P>
</ DIV>
<H3> 제 2 부 </ H3>
<DIV>
<P> Sed의 비 urna. Donec 등 분담금. Phasellus 유럽 연합 (EU) ligula. 도박 AMET 앉아 푸 루스. Vivamus hendrerit, aliquet의 laoreet, mauris의 turpis의 porttitor의 velit, faucibus interdum TELLUS 리베로 교류 그래서 우린에서 슬픔. Vivamus 비 quam. urna faucibus suscipit합니다. < / P>
</ DIV>
<H3> 섹션 3 </ H3>
<DIV>
<P> 남 enim의 risus, molestie 등, 간이 교류, aliquam 교류, risus. Quisque의 lobortis. Phasellus pellentesque 푸 루스에서 마사. Aenean PEDE. Phasellus 교류 리베로 교류 TELLUS의 pellentesque의 언제나. Sed의 교류 고양이 속. Sed의의 commodo에서, 마그나 quis 된 Lacinia ornare , quam 앤티 aliquam에 NiSi, 유럽 연합 (EU) iaculis 레오 푸 루스가 venenatis 음주 운전. </ P>
<UL>
<리> 목록 항목 하나 </ 리>
<리> 목록 항목이 </ 리>
<리> 목록 항목 세 </ 리>
</ UL>
</ DIV>
<H3> 제 4 부 </ H3>
<DIV>
<P> CRAS 의견 Pellentesque 주민 morbi tristique senectus 등 netus 등 malesuada FAMES 교류 turpis의 egestas 도박 판돈 ipsum의 primis에 faucibus orci luctus 등 ultrices posuere cubilia Curae; .. Aenean 된 Lacinia mauris VEL 추정 </ p> <p>이 Suspendisse 유럽 연합 (EU)의 nisl. . Nullam의 유타 리베로. 정수 dignissim consequat lectus. 클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라, inceptos의 himenaeos 당. </ P>
</ DIV>
</ DIV>
<버튼 ID = "토글"> 토글 아이콘 </ 버튼>
</ BODY>
</ HTML>
충전 공간
접힘 패널 블록 레벨 요소로 구성하고, 기본적으로 그 폭은 가능한 수평 공간을 채우기 때문이다. 컨테이너가 할당되는 수직 공간을 채우도록 설정 heightStyle 옵션은 "fill" , 스크립트가 자동적으로 부모 컨테이너의 접힘 패널 크기의 높이를 설정한다.
<! 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">
<스타일>
# 아코디언 - 크기 변경 {
패딩 : 10px;
폭 : 350px;
높이 : 220px;
}
</ 스타일>
<스크립트>
$ (함수 () {
$ ( "#accordion") .accordion ({
heightStyle : "작성"
});
});
$ (함수 () {
$ ( "# 아코디언 - 크기 변경") .resizable ({
의 minHeight : (140)
의 minWidth : 200,
크기 조정 : 함수 () {
$ ( "#accordion") .accordion ( "새로 고침");
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<H3 클래스 = "문서"> 외부 컨테이너를 다시 조정 : </ H3>
<사업부 아이디 = "아코디언 크기 변경"클래스 = "UI 위젯 콘텐츠">
<사업부 아이디 = "아코디언">
<H3> 1 부 </ H3>
<DIV>
<P> Mauris mauris 분담금, blandit 등, ultrices A, suscipit eget, quam. 정수 유타 neque. Vivamus에 NiSi metus, molestie의 VEL이,에, 에로스 suscipit AMET, NUNC. 남 nibh. Donec 앉아 condimentum gravida. 남 마일. Proin viverra 레오 유타 ODIO. Curabitur의 malesuada. 도박 velit 유럽 연합 분담금 scelerisque vulputate. </ P>
</ DIV>
<H3> 제 2 부 </ H3>
<DIV>
<P> Sed의 비 urna. Donec 등 분담금. Phasellus 유럽 연합 (EU) ligula. 도박 AMET 앉아 푸 루스. Vivamus hendrerit, aliquet의 laoreet, mauris의 turpis의 porttitor의 velit, faucibus interdum TELLUS 리베로 교류 그래서 우린에서 슬픔. Vivamus 비 quam. urna faucibus suscipit합니다. < / P>
</ DIV>
<H3> 섹션 3 </ H3>
<DIV>
<P> 남 enim의 risus, molestie 등, 간이 교류, aliquam 교류, risus. Quisque의 lobortis. Phasellus pellentesque 푸 루스에서 마사. Aenean PEDE. Phasellus 교류 리베로 교류 TELLUS의 pellentesque의 언제나. Sed의 교류 고양이 속. Sed의의 commodo에서, 마그나 quis 된 Lacinia ornare , quam 앤티 aliquam에 NiSi, 유럽 연합 (EU) iaculis 레오 푸 루스가 venenatis 음주 운전. </ P>
<UL>
<리> 목록 항목 하나 </ 리>
<리> 목록 항목이 </ 리>
<리> 목록 항목 세 </ 리>
</ UL>
</ DIV>
<H3> 제 4 부 </ H3>
<DIV>
<P> CRAS 의견 Pellentesque 주민 morbi tristique senectus 등 netus 등 malesuada FAMES 교류 turpis의 egestas 도박 판돈 ipsum의 primis에 faucibus orci luctus 등 ultrices posuere cubilia Curae; .. Aenean 된 Lacinia mauris VEL 추정 </ p> <p>이 Suspendisse 유럽 연합 (EU)의 nisl. . Nullam의 유타 리베로. 정수 dignissim consequat lectus. 클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라, inceptos의 himenaeos 당. </ P>
</ DIV>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
비 자동 높이
설정 heightStyle: "content" 접힌 패널은 원래 높이를 유지하도록.
<! 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">
<스크립트>
$ (함수 () {
$ ( "#accordion") .accordion ({
heightStyle : "콘텐츠"
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "아코디언">
<H3> 1 부 </ H3>
<DIV>
<P> Mauris은 blandit 등은, susceros을 분담금을 ultrices mauris. 남 마일. Proin viverra 레오 유타 ODIO. Curabitur malesuada. 도박 velit 유럽 연합 분담금 scelerisque vulputate합니다. </ P>
</ DIV>
<H3> 제 2 부 </ H3>
<DIV>
<P> Sed의 비 urna. Donec 등 분담금. Phasellus 유럽 연합 (EU) ligula. 도박 AMET 앉아 푸 루스. Vivamus hendrerit, aliquet의 laoreet, mauris의 turpis의 porttitor의 velit, faucibus interdum TELLUS 리베로 교류 그래서 우린에서 슬픔. Vivamus 비 quam. urna faucibus suscipit합니다. < / P>
</ DIV>
<H3> 섹션 3 </ H3>
<DIV>
<P> 남 enim의 risus, molestie 등, 간이 교류, aliquam 교류, risus. Quisque의 lobortis. Phasellus pellentesque 푸 루스에서 마사. Aenean PEDE. Phasellus 교류 리베로 교류 TELLUS의 pellentesque의 언제나. Sed의 교류 고양이 속. Sed의의 commodo에서, 마그나 quis 된 Lacinia ornare , quam 앤티 aliquam에 NiSi, 유럽 연합 (EU) iaculis 레오 푸 루스가 venenatis 음주 운전. </ P>
<UL>
<리> 목록 항목 </ 리>
<리> 목록 항목 </ 리>
<리> 목록 항목 </ 리>
<리> 목록 항목 </ 리>
<리> 목록 항목 </ 리>
<리> 목록 항목 </ 리>
<리> 목록 항목 </ 리>
</ UL>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
열 때 가져가
확장 머리에 클릭 / 축소 함량은 동일한 탭 (탭)과 같은 논리의 여러 부분으로 나누어 져 있습니다. 마우스가 켜짐 / 꺼짐 상태의 여러 부분을 열 전환할지 여부를 놓을 때 선택적으로 설정할 수 있습니다.
기본 HTML 태그는 제목 (H3 태그) 및 콘텐츠 DIV 일련이므로 컨텐트는 자바 스크립트를 거치지 않고 사용될 수있다.
<! 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">
<스크립트>
$ (함수 () {
$ ( "#accordion") .accordion ({
이벤트 "를 클릭 hoverintent"
});
});
/ *
* HoverIntent | 저작권 2011 브라이언 Cherne
* Http://cherne.net/brian/resources/jquery.hoverIntent.html
* JQuery와 UI 팀 수정
* /
$ .event.special.hoverintent = {
설정 : 함수 () {
$ (이) .bind ( "마우스 오버", jQuery.event.special.hoverintent.handler);
},
분해 : 함수 () {
$ (이) .unbind ( "마우스 오버", jQuery.event.special.hoverintent.handler);
},
핸들러 : 함수 (이벤트) {
VAR currentX, currentY, 시간 제한,
인수의 = 인수,
대상 = $ (event.target)
previousX = event.pageX,
previousY = event.pageY;
기능 트랙 (이벤트) {
currentX = event.pageX;
currentY = event.pageY;
};
클리어 기능 () {
목표
.unbind ( "MouseMove 이벤트", 트랙)
.unbind ( "로 마우스", 삭제);
사항 clearTimeout (시간 초과)
}
기능 핸들러 () {
var에 소품,
오리지널 = 이벤트;
경우 ((Math.abs (previousX - currentX) +
Math.abs (previousY - currentY)) <7) {
분명 ();
이벤트 = $ .Event ( "hoverintent");
에 대한 {(오리지널에 소품)
경우 {(! () 이벤트에 소품)
이벤트 [소품] = 오리지널 [소품]
}
}
원래 이벤트에 // 방지 액세스, 새로운 이벤트가 비동기 적으로 발생되기 때문에이 이전 이벤트가 더 이상 사용할 수 없습니다 (# 6028)
event.originalEvent을 삭제;
target.trigger (이벤트);
} 그밖에 {
previousX = currentX;
previousY = currentY;
시간 제한 =에서는 setTimeout (핸들러, 100);
}
}
시간 제한 =에서는 setTimeout (핸들러, 100);
target.bind ({
MouseMove 이벤트 : 트랙,
마우스 아웃 : 투명
});
}
};
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "아코디언">
<H3> 1 부 </ H3>
<DIV>
<P>
Mauris mauris 분담금, blandit 등, A, suscipit eget, quam을 ultrices. 정수
유타 neque. Vivamus에 NiSi metus, molestie의 VEL은,에서, 앉아 condimentum gravida
에로스 suscipit AMET, NUNC. 남 nibh. Donec. 남 마일. Proin viverra 레오 유타
ODIO. Curabitur malesuada. 도박 velit 유럽 연합 분담금 scelerisque vulputate.
</ P>
</ DIV>
<H3> 제 2 부 </ H3>
<DIV>
<P>
나오지도 않은 urna. Donec 등 분담금. Phasellus 유럽 연합 (EU) ligula. 도박은 AMET 앉아
푸 루스. Vivamus hendrerit, aliquet의 laoreet에서 슬픔, mauris의 turpis의 porttitor
velit, faucibus interdum TELLUS 리베로 교류 그래서 우린. Vivamus 비 quam.에
faucibus urna suscipit.
</ P>
</ DIV>
<H3> 섹션 3 </ H3>
<DIV>
<P>
남 enim의 risus, molestie 등, 간이 교류, aliquam 교류, risus. Quisque의 lobortis.
Phasellus pellentesque 푸 루스의 PEDE에서 마사. Aenean. Phasellus 교류 리베로
교류 TELLUS의 pellentesque의 언제나. Sed의 교류 고양이 속. Sed의의 commodo, 마그나 quis
된 Lacinia의 ornare는, quam 분담금의 aliquam의에 NiSi는 유럽 연합 (EU) iaculis 레오 푸 루스는 음주 운전을 venenatis.
</ P>
<UL>
<리> 목록 항목 하나 </ 리>
<리> 목록 항목이 </ 리>
<리> 목록 항목 세 </ 리>
</ UL>
</ DIV>
<H3> 제 4 부 </ H3>
<DIV>
<P>
CRAS 의견. Pellentesque 주민 morbi tristique senectus 등 netus
등 malesuada의 FAMES 교류 turpis의 egestas. 도박 판돈 ipsum의 primis에서
faucibus orci luctus 등 ultrices posuere cubilia Curae, Aenean의 된 Lacinia
mauris VEL 추정.
</ P>
<P>
Suspendisse 유럽 연합 (EU)의 nisl. Nullam의 유타 리베로. 정수 dignissim consequat lectus.
클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라, 당
inceptos의 himenaeos.
</ 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">
<스타일>
/ * 주문 * / IE 레이아웃 문제 (# 5413 참조)이
.group {줌 : 1}
</ 스타일>
<스크립트>
$ (함수 () {
$ ( "#accordion")
.accordion ({
헤더 : "> DIV> H3"
})
.sortable ({
축 "Y"
처리 "H3"을
중지 기능 (이벤트, UI)를 {
// 핸들러 대한 focusOut 트리거가 .ui 상태 초점을 제거 할 있도록 정렬, IE는 흐림을 등록 할 수없는 경우
ui.item.children ( "H3") .triggerHandler ( "대한 focusOut");
}
});
});
</ 스크립트>
</ 헤드>
<바디>
<사업부 아이디 = "아코디언">
<사업부 클래스 = "그룹">
<H3> 1 부 </ H3>
<DIV>
<P> Mauris mauris 분담금, blandit 등, ultrices A, suscipit eget, quam. 정수 유타 neque. Vivamus에 NiSi metus, molestie의 VEL이,에, 에로스 suscipit AMET, NUNC. 남 nibh. Donec 앉아 condimentum gravida. 남 마일. Proin viverra 레오 유타 ODIO. Curabitur의 malesuada. 도박 velit 유럽 연합 분담금 scelerisque vulputate. </ P>
</ DIV>
</ DIV>
<사업부 클래스 = "그룹">
<H3> 제 2 부 </ H3>
<DIV>
<P> Sed의 비 urna. Donec 등 분담금. Phasellus 유럽 연합 (EU) ligula. 도박 AMET 앉아 푸 루스. Vivamus hendrerit, aliquet의 laoreet, mauris의 turpis의 porttitor의 velit, faucibus interdum TELLUS 리베로 교류 그래서 우린에서 슬픔. Vivamus 비 quam. urna faucibus suscipit합니다. < / P>
</ DIV>
</ DIV>
<사업부 클래스 = "그룹">
<H3> 섹션 3 </ H3>
<DIV>
<P> 남 enim의 risus, molestie 등, 간이 교류, aliquam 교류, risus. Quisque의 lobortis. Phasellus pellentesque 푸 루스에서 마사. Aenean PEDE. Phasellus 교류 리베로 교류 TELLUS의 pellentesque의 언제나. Sed의 교류 고양이 속. Sed의의 commodo에서, 마그나 quis 된 Lacinia ornare , quam 앤티 aliquam에 NiSi, 유럽 연합 (EU) iaculis 레오 푸 루스가 venenatis 음주 운전. </ P>
<UL>
<리> 목록 항목 하나 </ 리>
<리> 목록 항목이 </ 리>
<리> 목록 항목 세 </ 리>
</ UL>
</ DIV>
</ DIV>
<사업부 클래스 = "그룹">
<H3> 제 4 부 </ H3>
<DIV>
<P> CRAS 의견 Pellentesque 주민 morbi tristique senectus 등 netus 등 malesuada FAMES 교류 turpis의 egestas 도박 판돈 ipsum의 primis에 faucibus orci luctus 등 ultrices posuere cubilia Curae; .. Aenean 된 Lacinia mauris VEL 추정 </ p> <p>이 Suspendisse 유럽 연합 (EU)의 nisl. . Nullam의 유타 리베로. 정수 dignissim consequat lectus. 클래스 aptent taciti sociosqu 광고 litora torquent 당 conubia 노스트라, inceptos의 himenaeos 당. </ P>
</ DIV>
</ DIV>
</ DIV>
</ BODY>
</ HTML>