1 jQuery UI
2가 나에게 적합
2.1 탭
2.2 아코디언
2.2.1 기본 아코디언 사용하기
2.2.2 여러 탭 열기
2.2.3 아코디언 임베딩 세트
3 플러그인에 테마 적용——테마 롤러
3.1 색 구성표 변경
3.2 아이콘 변경
4 관련 링크
jQuery UI
탭 1의 콘텐츠
탭 2의 내용
탭 3의 내용
사진 2
사진 3
탭 1의 콘텐츠
탭 2의 콘텐츠
content 세 번째 탭
이제 페이지를 다시 새로고침하면 효과가 나타납니다.
사진 4
스타일 시트에 의해 제어되므로 마음대로 사용자 정의하고 색상을 변경하는 등의 작업이 가능하다는 의미입니다. 이는 나중에 애플리케이션 스타일에서 소개하겠습니다.
아코디언 컨트롤에 관해 할 말이 있습니다. 왜냐하면 유연성이 부족하고 확장이 어렵다면 사용자에게 큰 불편을 끼치게 되기 때문입니다.
사진 5
먼저 Accordion 플러그인을 적용하는 방법을 살펴보겠습니다. Tabs1 페이지에 올려보겠습니다. Tabs와 마찬가지로 적용이 매우 간단합니다. 해당 Div를 정의하기만 하면 됩니다. 그 후 스크립트에서 수행해야 하는 모든 작업은 코드 한 문장뿐입니다. jQuery UI가 가져다주는 편리함을 경험해 보셨나요?
이전 tabs-1 Div의
태그와 내용을 삭제하고 다음 코드로 대체합니다.
섹션 3의 내용> 🎜>< ;/div>
두 가지 주의할 점이 있습니다. 첫 번째는 스타일입니다. 모든 jQuery UI는 실제로 위에서 언급한 스타일 시트를 사용합니다. 이전에 페이지에서 참조되지 않은 경우 여기에서는 아코디언 효과가 나타나지 않습니다. 둘째, 여기서 형식은 태그 다음에 코드를 섹션 1.1의 내용 1.2 섹션 2의 내용 사진 7 좀 속임수 아닌가요? 따라서 섹션에 레이아웃을 작성하려면 Div를 2개 이상 넣어야 합니다. 그런 다음 이러한 내용을 div에 설치한 다음 section1에 넣어야 실수가 발생하지 않습니다. 실제로 두 개의 Div가 있음을 표시하려면 각 Div에 테두리를 추가하세요. 섹션 1.1의 내용 섹션 1.2의 내용 섹션 2의 내용> 섹션 3의 내용
2.2.2 여러 탭 열기 구현 jQuery UI Accordion의 가장 큰 결점이자 가장 짜증나는 특징은 동시에 하나의 탭만 열 수 있다는 것입니다. 예를 들어 섹션1을 클릭하면 다른 섹션을 닫아야 합니다. 동시에 여러 탭을 열고 싶은데 다른 탭을 클릭해도 열려 있는 탭이 닫히는 것을 원하지 않으면 어떻게 해야 합니까? 아쉽게도 이 플러그인은 해당 옵션을 제공하지 않습니다. 더 멋진 점은 동시에 여러 탭을 열어두어야 한다면 우리 아코디언을 사용하지 말아야 한다는 것이 공식 데모에 분명히 명시되어 있다는 것입니다. 어쨌든 우리는 그것을 만들고 싶습니다. 하나의 탭만 열리는 것을 지원합니다.
아래의 이전 코드를 수정하고 아코디언1, 아코디언2, 아코디언3이라는 ID로 3개의 div를 정의하고 해당 콘텐츠를 넣으세요. 사진 10 또 다른 문제는 아코디언 중첩입니다. 저도 처음에 이 기능을 구현하려고 할 때 몇 가지 문제에 직면했습니다.
조금 불완전한 점은 섹션 1에 나타나는 스크롤바입니다. 다음으로 높이 속성을 설정하고 그 안의 하위 아코디언을 처음에는 접힌 상태로 만듭니다. 스크립트 코드를 다음과 같이 수정하세요.
포스트스크립트: jQuery는 이미 인기가 많기 때문에 jQuery UI와 결합하면 프로그래머의 부담이 훨씬 줄어들 것입니다. 이러한 편리함을 즐기면서 우리는 jQuery와 UI에 기여한 동료들에게 묵묵히 감사를 표해야 합니다. 동시에 우리는 jQuery의 플러그인과 UI 라이브러리를 풍부하게 하고 확장하는 데에도 기여할 수 있습니다.
http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar 
섹션 2
< div>
섹션 3 ;
원래는 이 두 div가 첫 번째 섹션에 포함될 것이라고 생각했지만 실제로 실제 효과는 약간 터무니없습니다.
섹션 1
>섹션 2
섹션 3
;/div> ;
사진 8
글쎄, 나는 이 아코디언 플러그인을 다시 작성할 만큼 강력하지 않기 때문에 "확장기" "멀티 오픈 아코디언" 등을 Google에 검색합니다. 실제로 그러한 요구 사항을 가진 친구들이 아직도 많고, 훌륭한 사람들도 있습니다. 몇 가지 해결책이 있지만 모두 약간 복잡합니다. 마침내 각 섹션을 아코디언으로 정의하면 충분하다는 것을 갑자기 깨달았습니다. 작업은 동시에 하나의 섹션만 열 수 있습니다. 다른 섹션에 영향을 주지 않고 각 섹션을 마음대로 열고 닫으려면 각 섹션을 아코디언으로 바꾸고 아코디언에서 섹션 하나만 정의하면 됩니다.
코드 복사
코드는 다음과 같습니다.
프로그램을 실행해 보면 세 개의 섹션이 동시에 열리고 닫힐 수 없는 것을 발견합니다! 이는 분명히 우리가 원하는 결과가 아닙니다. 그 이유는 매우 간단합니다. 위에서 언급한 아코디언 플러그인에 하나의 섹션만 열려 있고 각 아코디언에 하나의 섹션만 정의한 경우 이 섹션은 의심할 여지 없이 열려 있어야 합니다. 닫으면 다른 섹션을 열 수 없으므로 닫고 싶어도 닫을 수 없습니다.
하지만 다행스럽게도 아코디언의 collapsible을 true로 설정하면 이 섹션만 접고 열 수 있게 만들 수 있습니다. 다음과 같이 스크립트를 수정하세요.
< ;script type=" text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1") .accordion({ 축소 가능 : true });
$("#accordion2").accordion({ 축소 가능: true })
$("#accordion3").accordion({ 축소 가능: true });
})
프로그램을 다시 실행해 보세요. 모든 것이 생각대로 되었습니다.
섹션 1
그림 11
코드를 복사하세요
관련 링크
jQuery UI 공식 홈페이지
http://jqueryui.com/ 테마 롤러
http://jqueryui.com/themeroller/ jQuery 학습: Zhang Ziqiu의 "처음부터 jQuery 배우기 " 시리즈 :
http://www.jb51.net/article/24908.htm
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
