jQuery UI 사용 경험 및 Skills_jquery 정보

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가 등장하기 전까지 개발자들은 지루한 js 코드에서 벗어나 몇 줄의 jQuery 코드로 대체했습니다. 오늘날 jQuery는 의심할 여지 없이 가장 인기 있는 JavaScript 라이브러리 중 하나가 되었습니다.
jQuery UI는 jQuery를 기반으로 개발된 인터페이스 도구 세트로 웹 페이지에서 생각하고 사용할 수 있는 거의 모든 플러그인과 애니메이션 특수 효과가 포함되어 있어 개념이 없는 코더도 쉽게 사용할 수 있습니다. 예술을 전공하고 코딩 방법만 알고 있으면 멋진 인터페이스를 만드는 데 거의 노력이 필요하지 않습니다. 인터페이스를 만들 때 '받아' 사용할 수 있다는 또 다른 장점은 무료이며 오픈 소스이며 사용자가 필요에 따라 사용자 정의하거나 다시 디자인할 수도 있다는 것입니다.

2개 나에게 딱 맞는다
Tabs와 Accordion 플러그인을 사용하여 프로젝트에서 jQuery UI를 사용하는 방법을 살펴보자. 자세한 사용법 문서와 다른 플러그인의 데모는 여기에서 배울 수 있지만 영어로만 제공됩니다.
　2.1탭
탭 형태의 플러그인은 웹페이지와 데스크톱 애플리케이션에서 널리 사용되며 메뉴나 콘텐츠의 일부에 대한 탭으로 사용할 수 있습니다.

먼저 VS2010에서 새 MVC 프로젝트를 생성합니다. jQuery UI를 사용하려면 먼저 프로젝트에 jQuery 및 jQuery UI 스크립트 파일을 포함해야 하며, 해당 페이지는 <script> 꼬리표. MVC 프로젝트를 생성한 후 Scripts 폴더에 시스템이 자동으로 프로젝트에 jQuery 및 jQuery UI 스크립트 파일을 포함했습니다(그림 1). <br> <p style="TEXT-ALIGN: center"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201210/2012101001451912.jpg" class="lazy" alt=""></p>그림 1 <br> 참고: 그림의 jquery-1.5.1-vsdoc.js는 VS에서 코드 작성 시 프롬프트 정보와 설명이 지능적으로 포함된 버전입니다. ; jquery-1.5.1.js는 표준 버전이고 min이 있는 버전은 클라이언트의 다운로드 시간을 줄이기 위해 압축된 버전입니다. 프로젝트 폴더에 jquery-1.5.1-vsdoc.js가 포함되어 있으면 VS는 자동으로 내부 프롬프트 정보를 호출하여 일반 페이지에서 단순화된 버전을 사용합니다. <br> 이제 해야 할 일은 해당 내용을 페이지에 포함시키는 것뿐입니다. 프로젝트가 생성된 후 시스템이 이미 Site.Mater 페이지의 페이지에 jQuery를 참조했기 때문에 이는 마스터 페이지를 사용하는 모든 페이지가 기본적으로 jQuery를 참조하므로 인덱스에 jQuery UI 파일만 추가하면 된다는 의미입니다. 페이지 설명: <br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="11620" class="copybut" id="copybut11620" onclick="doCopy('code11620')"><u> 코드 복사 </u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code11620"><script src= "http:/ /www.cnblogs.com/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript" ></script>

순서 플러그인 페이지에서 탭을 렌더링하려면 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"&gt ; <BR></div> <br><script type="text/javascript"> <br>$(document).ready(function () { <br>$("#tabs").tabs (); <br>}) <br></script>