> 웹 프론트엔드 > JS 튜토리얼 > jQuery UI 사용 경험 및 Skills_jquery 정보

jQuery UI 사용 경험 및 Skills_jquery 정보

WBOY
풀어 주다: 2016-05-16 17:49:31
원래의
1183명이 탐색했습니다.

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 alt="" src="http://files.jb51.net/file_images/article/201210/2012101001451912.jpg"></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>

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




탭 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 href= "#">섹션 3



    섹션 3의 내용> 🎜>< ;/div>




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



    코드 복사

    사진 6

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

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

    코드를

    복사하세요. 다음:

    섹션 1.1의 내용



    1.2




    섹션 2
    < div>

    섹션 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를 정의하고 해당 콘텐츠를 넣으세요.


    코드 복사

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

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

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


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

    사진 10

     2.2.3아코디언 네스팅

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


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


    섹션 1



    subaccortion


    하위 아코르션








    그림 11

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

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


    코드를 복사하세요

    코드는 다음과 같습니다.

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

    사진 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

    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    최신 이슈
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿