최고의 jQuery를 UI 예 - 패널을 접는 (아코디언) 튜토리얼 2024년, 이 튜토리얼에서는 기본 기능,접는 내용,사용자 정의 아이콘,충전 공간,비 자동 높이,열 때 가져가,정렬 (정렬 가능한),를 배울 수 있습니다.
정보 내용 접을 수있는 패널을 표시하기위한 제한된 공간 디스플레이 내에서.
아코디언 부분에 대한 자세한 내용은 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; ko 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; ko 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; ko 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 * 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; ko 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>