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/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201210/2012101001451912.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="">그림 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="max-width:90%" data="11620" class="copybut" id="copybut11620" onclick="doCopy('code11620')"><U> 코드 복사 코드는 다음과 같습니다. <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>코드 복사 코드는 다음과 같습니다.<div class="codebody" id="code3334"> <BR><div id="tabs"&gt ; <BR> <BR><script type="text/javascript"> <BR>$(document).ready(function () { <BR>$("#tabs").tabs (); <BR>}) <BR></script>

메인 탭에 표시할 탭을 정의하지 않았기 때문에 지금 프로그램을 실행하면 아무것도 표시되지 않습니다. Div, 탭을 넣을 장소를 정의했습니다. 이제 탭 Div에서 순서가 지정되지 않은 목록을 정의합니다. 목록 항목은 표시할 탭 수와 표시할 탭 이름을 결정합니다.

코드 복사 코드는 다음과 같습니다.

• Tabs1
  
• Tabs2


• Tabs3

탭 1의 콘텐츠

> ;

탭 2의 내용

탭 3의 내용

여기에는 Tabs1, Tabs2 및 Tabs3이라는 세 가지 목록 항목이 정의되어 있습니다. 목록 아래의 세 Div는 위에서 정의한 세 가지 레이블에 해당하며 각 레이블에 표시할 텍스트를 표시하는 데 사용됩니다. 페이지 부분은 기본적으로 완료되었습니다. 프로그램을 실행하세요:

사진 2

이 단계에서는 그림 0의 효과가 나타나지 않으며 탭 스타일이 적용되지 않는다는 점에 주목할 필요가 있습니다. 이유는 단 하나, 바로 스타일 시트입니다. 나중에 Google 검색을 통해 해당 스타일 시트가 페이지에 포함되지 않은 것으로 나타났습니다. 이것은 공식 데모에서는 언급되지 않았으며 이에 대한 주의가 주어지지 않았습니다. 여기 데모에서는 jQuery UI를 처음 사용하는 모든 사람이 문제를 빨리 찾을 수 있는 것은 아닙니다. 모든 초보자는 이 단계에 도달하기 전에 Google에서 효과가 나오지 않는 이유를 알아내야 합니다. 문제를 찾으면 해결하기 쉽습니다. 페이지에 jQuery UI 스타일시트에 대한 참조를 추가합니다.

사진 3

최종 완성 코드는 대략 이렇습니다.

코드 복사 코드는 다음과 같습니다.

< ;ul>

Tabs1

Tabs2

Tabs3

> ;

탭 1의 콘텐츠

탭 2의 콘텐츠

content 세 번째 탭

MVC 템플릿을 이용하여 프로젝트를 생성하기 때문에 jQuery UI CSS 스타일시트는 Content/themes/base 폴더에 넣어두었습니다. 그렇지 않은 경우 별도로 다운로드하여 프로젝트에 넣어서 추가해야 합니다. 페이지에 정확하게 인용하십시오.

이제 페이지를 다시 새로고침하면 효과가 나타납니다.

사진 4

스타일 시트에 의해 제어되므로 마음대로 사용자 정의하고 색상을 변경하는 등의 작업이 가능하다는 의미입니다. 이는 나중에 애플리케이션 스타일에서 소개하겠습니다.

　2.2아코디언

아코디언 컨트롤에 관해 할 말이 있습니다. 왜냐하면 유연성이 부족하고 확장이 어렵다면 사용자에게 큰 불편을 끼치게 되기 때문입니다.

사진 5

　2.2.1 기본 아코디언 사용하기

먼저 Accordion 플러그인을 적용하는 방법을 살펴보겠습니다. Tabs1 페이지에 올려보겠습니다. Tabs와 마찬가지로 적용이 매우 간단합니다. 해당 Div를 정의하기만 하면 됩니다. 그 후 스크립트에서 수행해야 하는 모든 작업은 코드 한 문장뿐입니다. jQuery UI가 가져다주는 편리함을 경험해 보셨나요?

이전 tabs-1 Div의

태그와 내용을 삭제하고 다음 코드로 대체합니다.

코드 복사 코드는 다음과 같습니다.

섹션 1

섹션 1

/a>

a href= "#">섹션 3

섹션 3의 내용

🎜>< ;/div>

아코디언이라는 ID를 가진 Div가 컨테이너입니다.

코드 복사

코드는 다음과 같습니다. $(document).ready(function () { $("#tabs").tabs();

$("#accordion").accordion();

})



그 후, 내부의 각 태그는 클릭 가능한 제목으로 분석되고 div> 이 너겟의 콘텐츠를 배치하는 데 사용됩니다. 최종 효과는 아래와 같습니다.

사진 6

두 가지 주의할 점이 있습니다. 첫 번째는 스타일입니다. 모든 jQuery UI는 실제로 위에서 언급한 스타일 시트를 사용합니다. 이전에 페이지에서 참조되지 않은 경우 여기에서는 아코디언 효과가 나타나지 않습니다. 둘째, 여기서 형식은 태그 다음에

태그가 오는 형식을 엄격하게 따라야 합니다. 이러한 교차 형식이 중단되면 결과가 바람직하지 않습니다. 예를 들어, 뒤에 두 개의

가 있는 경우:

코드를

복사하세요. 다음:

섹션 1 h3>

섹션 1.1의 내용

1.2

섹션 2

섹션 2의 내용

섹션 3 ;

원래는 이 두 div가 첫 번째 섹션에 포함될 것이라고 생각했지만 실제로 실제 효과는 약간 터무니없습니다.

사진 7

좀 속임수 아닌가요? 따라서 섹션에 레이아웃을 작성하려면 Div를 2개 이상 넣어야 합니다. 그런 다음 이러한 내용을 div에 설치한 다음 section1에 넣어야 실수가 발생하지 않습니다. 실제로 두 개의 Div가 있음을 표시하려면 각 Div에 테두리를 추가하세요.

코드 복사 코드는 다음과 같습니다.

섹션 1

섹션 1.1의 내용

섹션 1.2의 내용

>섹션 2

섹션 2의 내용

섹션 3

섹션 3의 내용

;/div> ;

사진 8

　2.2.2 여러 탭 열기 구현

jQuery UI Accordion의 가장 큰 결점이자 가장 짜증나는 특징은 동시에 하나의 탭만 열 수 있다는 것입니다. 예를 들어 섹션1을 클릭하면 다른 섹션을 닫아야 합니다. 동시에 여러 탭을 열고 싶은데 다른 탭을 클릭해도 열려 있는 탭이 닫히는 것을 원하지 않으면 어떻게 해야 합니까? 아쉽게도 이 플러그인은 해당 옵션을 제공하지 않습니다. 더 멋진 점은 동시에 여러 탭을 열어두어야 한다면 우리 아코디언을 사용하지 말아야 한다는 것이 공식 데모에 분명히 명시되어 있다는 것입니다. 어쨌든 우리는 그것을 만들고 싶습니다. 하나의 탭만 열리는 것을 지원합니다.

사진 9

글쎄, 나는 이 아코디언 플러그인을 다시 작성할 만큼 강력하지 않기 때문에 "확장기" "멀티 오픈 아코디언" 등을 Google에 검색합니다. 실제로 그러한 요구 사항을 가진 친구들이 아직도 많고, 훌륭한 사람들도 있습니다. 몇 가지 해결책이 있지만 모두 약간 복잡합니다. 마침내 각 섹션을 아코디언으로 정의하면 충분하다는 것을 갑자기 깨달았습니다. 작업은 동시에 하나의 섹션만 열 수 있습니다. 다른 섹션에 영향을 주지 않고 각 섹션을 마음대로 열고 닫으려면 각 섹션을 아코디언으로 바꾸고 아코디언에서 섹션 하나만 정의하면 됩니다.

아래의 이전 코드를 수정하고 아코디언1, 아코디언2, 아코디언3이라는 ID로 3개의 div를 정의하고 해당 콘텐츠를 넣으세요.

코드 복사

코드는 다음과 같습니다.

🎜>

섹션 1

섹션 1의 내용

< ;div id="accordion2">

섹션 2

섹션 2 div>

섹션 3

섹션 3

스크립트 코드를 수정하세요. :




코드 복사

코드는 다음과 같습니다.

$("#accordion3").accordion()

})

프로그램을 실행해 보면 세 개의 섹션이 동시에 열리고 닫힐 수 없는 것을 발견합니다! 이는 분명히 우리가 원하는 결과가 아닙니다. 그 이유는 매우 간단합니다. 위에서 언급한 아코디언 플러그인에 하나의 섹션만 열려 있고 각 아코디언에 하나의 섹션만 정의한 경우 이 섹션은 의심할 여지 없이 열려 있어야 합니다. 닫으면 다른 섹션을 열 수 없으므로 닫고 싶어도 닫을 수 없습니다.
하지만 다행스럽게도 아코디언의 collapsible을 true로 설정하면 이 섹션만 접고 열 수 있게 만들 수 있습니다. 다음과 같이 스크립트를 수정하세요.

코드를 복사하세요. 코드는 다음과 같습니다.

< ;script type=" text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1") .accordion({ 축소 가능 : true });
$("#accordion2").accordion({ 축소 가능: true })
$("#accordion3").accordion({ 축소 가능: true });
})

프로그램을 다시 실행해 보세요. 모든 것이 생각대로 되었습니다.

사진 10

　2.2.3아코디언 네스팅

또 다른 문제는 아코디언 중첩입니다. 저도 처음에 이 기능을 구현하려고 할 때 몇 가지 문제에 직면했습니다.

태그와

를 Accordion 1에 직접 추가하면 섹션 1의 Accortion1에 포함된 Accordion이 올바르게 구문 분석될 것이라고 생각한다면 착각입니다. 최종 코드와 효과는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

섹션 1

subaccortion

하위 아코르션

그림 11

조금 불완전한 점은 섹션 1에 나타나는 스크롤바입니다. 다음으로 높이 속성을 설정하고 그 안의 하위 아코디언을 처음에는 접힌 상태로 만듭니다.

스크립트 코드를 다음과 같이 수정하세요.

코드를 복사하세요

코드는 다음과 같습니다. $(document).ready(function () {

$("#tabs").tabs();

$("# 아코디언1").accordion( { 축소 가능: true, autoHeight: false });
$("#subaccortion").accordion({ 축소 가능: true, active:false });
$("#accordion2" ).accordion({ collapsible : true, autoHeight: false })
$("#accordion3").accordion({ collapsible: true, autoHeight: false })
스크립트>

그림 12

여기에서 처음에 라벨이 접힌 상태인지 열린 상태인지 설정할 수 있다는 것을 이미 확인할 수 있습니다. 물론, 제목을 클릭해도 접기 및 열기 동작이 발생하지 않도록 조정 기능을 비활성화할 수도 있습니다.

3 플러그인에 테마 적용——테마 롤러　3.1색상 변경

이제 jQuery UI를 사용하여 인터페이스를 쉽게 만들 수 있습니다. 하지만 상상해 보십시오. 그렇게 많은 사람이 사용한다면 인터넷 전체가 동일해질까요? 사용자가 브라우저를 열자마자 어디를 가든 동일한 내용이 표시되어 다소 혼란스러울 것입니다. 그리고 이러한 플러그인을 사용할 때 우리 웹사이트의 테마, 톤 등에 맞게 약간의 조정도 필요합니다.

jQuery UI는 사용자 정의 스타일을 지원하며, 가능하다면 고급 사용자 정의를 위해 구현 코드를 변경할 수도 있습니다.

스타일 수정이라는 목적을 달성하기 위해 해당 CSS 파일을 수정할 수도 있지만 이는 공식 홈페이지의 테마 홈페이지에 가서 필요한 테마를 다운로드 받는 것만큼 좋지 않으며, 온라인에서 원하는 테마를 편집하세요.

테마롤러 진입 후, 마음에 드는 테마 스타일을 선택하고 다운로드 받으세요.

사진 13

압축을 푼 후 css 폴더로 이동하여 jquery-ui-1.8.24.custom.css 파일과 이미지 폴더를 프로젝트 내 적절한 위치에 복사한 후 페이지에서 올바르게 참조하여 적용해야 합니다. 스타일 . 어떤 테마를 사용하든 테마에 사용된 이미지 이름은 동일하고 색상만 다릅니다. 본 예제는 MVC 템플릿을 이용하여 생성한 프로젝트이기 때문에 프로젝트 내 imges 폴더에 이미 존재하는 사진과 다운로드한 사진의 이름이 부분적으로 동일할 수 있으므로, 복사 시 교체 여부를 묻는 메시지가 나오며 확인을 클릭합니다.

그림 14

그림 15

이때, 기존에 작성한 스타일시트 참조를 고객 스타일시트 참조로 변경

코드 복사 코드는 다음과 같습니다:

그런 다음 페이지를 새로 고치면 효과는 다음과 같습니다.

그림 16

jquery-ui-1.8.24.custom.css와 이미지 폴더의 상대적 위치를 변경하지 않는 것, 즉 함께 두는 것이 가장 좋습니다. CSS 파일이 이미지 폴더를 호출하기 때문입니다. . 사진의 경우 상대 위치를 변경하는 경우 테마가 제대로 작동하려면 CSS에서 사진에 대한 모든 호출 경로를 변경해야 합니다.

　3.2 아이콘 변경

색상뿐만 아니라 jQuery UI 테마에는 선택할 수 있는 많은 아이콘도 미리 설정되어 있습니다. 웹 페이지에서 풍부한 아이콘을 많이 볼 수 있습니다. 이 아이콘의 색상은 다운로드한 테마에 해당하며 이미지 폴더에 포함되어 있습니다.

그림 17

문제는 수많은 아이콘 중에서 우리가 원하는 아이콘을 정확히 지정하는 방법입니다. 예를 들어 이제 아코디언 제목 왼쪽에 있는 삼각형 아이콘을 선형의 뾰족한 모양으로 변경하고 싶습니다.

다음은 제가 제공하는 작은 팁입니다. 원하는 아이콘에 마우스를 올리면 해당 아이콘에 해당하는 도구 설명 텍스트가 나타납니다.

그림 18

이제 이름이 지정되었으므로 스크립트 코드로 이동하여 수정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

드디어 효과를 볼까요, 완벽합니다.

사진 19

jQuery UI 사용에 대한 기본 소개는 다음과 같습니다. 물론 jQuery UI에는 탭과 아코디언 두 가지 플러그인만 포함되어 있는 것은 아닙니다. 다른 플러그인과 효과의 사용도 유사합니다. 자세한 사용법과 설정 방법은 공식 문서와 데모에서 확인할 수 있습니다.

포스트스크립트: jQuery는 이미 인기가 많기 때문에 jQuery UI와 결합하면 프로그래머의 부담이 훨씬 줄어들 것입니다. 이러한 편리함을 즐기면서 우리는 jQuery와 UI에 기여한 동료들에게 묵묵히 감사를 표해야 합니다. 동시에 우리는 jQuery의 플러그인과 UI 라이브러리를 풍부하게 하고 확장하는 데에도 기여할 수 있습니다.

샘플 소스 코드 다운로드:

http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar
관련 링크
jQuery UI 공식 홈페이지

http://jqueryui.com/ 테마 롤러

http://jqueryui.com/themeroller/ jQuery 학습: Zhang Ziqiu의 "처음부터 jQuery 배우기 " 시리즈 :

http://www.jb51.net/article/24908.htm