jQuery UI 사용 경험 및 Skills_jquery 정보
- WBOY원래의
- 2016-05-16 17:49:311129검색
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
jQuery UI는 jQuery를 기반으로 개발된 인터페이스 도구 세트로 웹 페이지에서 생각하고 사용할 수 있는 거의 모든 플러그인과 애니메이션 특수 효과가 포함되어 있어 개념이 없는 코더도 쉽게 사용할 수 있습니다. 예술을 전공하고 코딩 방법만 알고 있으면 멋진 인터페이스를 만드는 데 거의 노력이 필요하지 않습니다. 인터페이스를 만들 때 '받아' 사용할 수 있다는 또 다른 장점은 무료이며 오픈 소스이며 사용자가 필요에 따라 사용자 정의하거나 다시 디자인할 수도 있다는 것입니다.
2개 나에게 딱 맞는다
Tabs와 Accordion 플러그인을 사용하여 프로젝트에서 jQuery UI를 사용하는 방법을 살펴보자. 자세한 사용법 문서와 다른 플러그인의 데모는 여기에서 배울 수 있지만 영어로만 제공됩니다.
2.1탭
탭 형태의 플러그인은 웹페이지와 데스크톱 애플리케이션에서 널리 사용되며 메뉴나 콘텐츠의 일부에 대한 탭으로 사용할 수 있습니다.
순서 플러그인 페이지에서 탭을 렌더링하려면 Div를 정의하고 <script> 스크립트 코드에서 이를 선택한 다음 탭 메소드를 적용해야 합니다. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="3334" class="copybut" id="copybut3334" onclick="doCopy('code3334')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code3334"> <br><div id="tabs"> ; <BR></div> <br><script type="text/javascript"> <br>$(document).ready(function () { <br>$("#tabs").tabs (); <br>}) <br></script>
메인 탭에 표시할 탭을 정의하지 않았기 때문에 지금 프로그램을 실행하면 아무것도 표시되지 않습니다. Div, 탭을 넣을 장소를 정의했습니다. 이제 탭 Div에서 순서가 지정되지 않은 목록을 정의합니다. 목록 항목은 표시할 탭 수와 표시할 탭 이름을 결정합니다.
탭 1의 콘텐츠
탭 2의 내용
탭 3의 내용
여기에는 Tabs1, Tabs2 및 Tabs3이라는 세 가지 목록 항목이 정의되어 있습니다. 목록 아래의 세 Div는 위에서 정의한 세 가지 레이블에 해당하며 각 레이블에 표시할 텍스트를 표시하는 데 사용됩니다. 페이지 부분은 기본적으로 완료되었습니다. 프로그램을 실행하세요:
사진 2
사진 3
< ;ul>
탭 1의 콘텐츠
탭 2의 콘텐츠
content 세 번째 탭
MVC 템플릿을 이용하여 프로젝트를 생성하기 때문에 jQuery UI CSS 스타일시트는 Content/themes/base 폴더에 넣어두었습니다. 그렇지 않은 경우 별도로 다운로드하여 프로젝트에 넣어서 추가해야 합니다. 페이지에 정확하게 인용하십시오.
이제 페이지를 다시 새로고침하면 효과가 나타납니다.
사진 4
스타일 시트에 의해 제어되므로 마음대로 사용자 정의하고 색상을 변경하는 등의 작업이 가능하다는 의미입니다. 이는 나중에 애플리케이션 스타일에서 소개하겠습니다.
아코디언 컨트롤에 관해 할 말이 있습니다. 왜냐하면 유연성이 부족하고 확장이 어렵다면 사용자에게 큰 불편을 끼치게 되기 때문입니다.
사진 5
먼저 Accordion 플러그인을 적용하는 방법을 살펴보겠습니다. Tabs1 페이지에 올려보겠습니다. Tabs와 마찬가지로 적용이 매우 간단합니다. 해당 Div를 정의하기만 하면 됩니다. 그 후 스크립트에서 수행해야 하는 모든 작업은 코드 한 문장뿐입니다. jQuery UI가 가져다주는 편리함을 경험해 보셨나요?
이전 tabs-1 Div의
태그와 내용을 삭제하고 다음 코드로 대체합니다.
a href= "#">섹션 3
섹션 3의 내용> 🎜>< ;/div>
아코디언이라는 ID를 가진 Div가 컨테이너입니다.
코드 복사
사진 6
두 가지 주의할 점이 있습니다. 첫 번째는 스타일입니다. 모든 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