노드 js 연결 jquery ui. JQuery UI – 자동 완성 플러그인. jQuery UI 라이브러리의 개발 버전 설치

jQuery UI다양한 동작(예: 요소 끌기 또는 늘이기)을 구성하는 플러그인, 8가지 유형의 위젯(예: 달력, 대화 상자, 탭 시스템 등) 및 애니메이션 효과. 또한 UI에는 위젯을 디자인하고 유용한 아이콘 세트(173개)를 포함하는 여러 디자인 테마가 있습니다. 모든 디자인 테마는 로드 직전에 jQuery UI 웹사이트에서 직접 조정할 수 있습니다.

시작하자

jQuery UI에는 다섯 가지 동작 플러그인이 있으며 그 중 일부 기능이 아래에 나와 있습니다.

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ body(font:9pt Arial,sans-serif;) p(clear:both; margin:0; padding:5px 0 5px 7px;font-style:italic) .itLf(float:left; 너비:280px ; 높이:200px;) .itRg(float:left; margin-left:70px; 높이:200px; 너비:200px;) .element(float:left; 너비:120px; 높이:120px; 여백:7px; 패딩:0.5 em; 테두리:1px 단색 #ddd; 배경색:#eee) .element h3(패딩:3px; 여백:0; 배경색:#f8f8f8; 텍스트 정렬:센터; 글꼴:일반 8pt Arial,sans-serif ; 색상:#444) #droppable(배경 색상:#f2c579;) #droppable h3(배경 색상:#f1d29e;) ​​​​#draggable(너비:100px; 높이:100px;) #선택 가능 .ui-selecting( 배경: #f1d29e;) ​​​​#selectable .ui-selected(배경:#f2c579; 색상:흰색;) ul(목록 스타일 유형:없음; 여백:0; 패딩:0; 너비:150px;) ul li(마진:3px; 패딩:4px; 배경색:#fff; 테두리:1px 솔리드 #888) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p~gt~요소 드래그 앤 캐치~ lt~/p~gt~ ~lt~div id="draggable" class="element"~gt~ ~lt~h3~gt~드래그 가능한 요소~lt~/h3~gt~ ~lt~/div~gt ~ ~ lt~div id="droppable" class="element"~gt~ ~lt~h3~gt~요소 잡기~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt ~ ~ lt~div class="itRg"~gt~ ~lt~p~gt~요소 늘이기~lt~/p~gt~ ~lt~div id="크기 조정 가능" class="element"~gt~ ~lt~ h3~ gt~신축 가능한 요소~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itLf" style="height:150px"~gt~ ~ lt~ p~gt~선택 가능한 요소~lt~/p~gt~ ~lt~ul id="선택 가능"~gt~ ~lt~li~gt~항목 1~lt~/li~gt~ ~lt~li~ gt~ 항목 2~lt~/li~gt~ ~lt~li~gt~항목 3~lt~/li~gt~ ~lt~li~gt~항목 4~lt~/li~gt~ ~lt~/ ul~ gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p~gt~그룹화 가능한 요소~lt~/p~gt~ ~lt ~ul id="정렬 가능"~gt~ ~lt~li~gt~항목 1~lt~/li~gt~ ~lt~li~gt~항목 2~lt~/li~gt~ ~lt~li~gt ~항목 3~lt~/li~gt~ ~lt~li~gt~항목 4~lt~/li~gt~ ~lt~/ul~gt~ ~lt~/div~gt~ ~lt~script~gt ~ $ ("#크기조절").ressize(); $("#draggable").draggable(); $("#droppable").droppable(( drop:function())( $(this).addClass("ui-state-highlight") .find("h3").html("알겠습니다!"); )) ); $("#selectable").selectable(); $("#sortable").sortable().disableSelection(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

위에 제시된 각 기능은 몇 줄의 코드로 구성됩니다.

UI는 또한 위젯을 구성하는 8개의 플러그인을 제공합니다.

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ body(font:9pt Arial,sans-serif;) p.titl(clear:both; margin:0; padding:5px 0 5px 7px;font-style:italic) .itLf(float:left; width :280px; 높이:200px;) .itRg(float:left; margin-left:70px; height:200px; width:200px;) #accordion(font-size:8pt; margin-bottom:25px) #tabs(font- 크기:8pt; 여백-하단:25px) #opnDialog(글꼴-크기:8pt; 여백-하단:25px) #progressbar(글꼴-크기:8pt;) 버튼(글꼴-크기:8pt;) #radio(글꼴-크기 :8pt; margin-bottom:25px) #autocomplete(margin-bottom:25px) #slider(margin-bottom:25px) #datepicker(font-size:8pt;) ~lt~/style~gt~ ~lt~/head ~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p class="titl"~gt~Accordion~lt~/p~gt~ ~lt~div id=" 아코디언"~gt~ ~lt~h3~gt~~lt~a href="#"~gt~섹션 1~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~ lt~p~gt~ ~lt~i~gt~Glasgow~lt~/i~gt~는 스코틀랜드에서 가장 큰 도시이자 영국에서 세 번째로 인구가 많은 도시입니다. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~섹션 2~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~글라스고우의 아이스크림 전쟁~lt~/i~gt~ - 스코틀랜드 글라스고우에서 라이벌 사이의 일련의 갈등 아이스크림 밴으로 물건을 배달하는 마약상. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~섹션 3~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Millwall Brick~lt~/i~gt~ - 신문지를 말아서 고정하여 만든 축구 훌리건의 즉석 무기 납 같은 주먹.. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~섹션 4~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~img src="http://tinyurl.com/3sn6e3t"~gt~ ~lt~/p~gt~ ~lt~/div ~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Tabs~lt~/p~gt~ ~lt~div id="tabs"~gt~ ~lt~ul~gt ~ ~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunctincidunt~lt~/a~gt~~lt~/li~gt~ ~lt~li~gt~~lt ~a href="#tabs-2"~gt~프로인 dolor~lt~/a~gt~~lt~/li~gt~ ~lt~/ul~gt~ ~lt~div id="tabs-1" ~gt~ ~lt~p~gt~ Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~div id="tabs-2"~gt~ ~lt~p~gt~ Morbitincidunt, dui sit amet facilisis feugiat, odio metus gravida ante , ut pharetra Massa metus id nunc. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~대화 상자~lt~/p~gt~ ~lt~a id="opnDialog" href="javascript:$("#dialog").dialog("open");"~gt~창 열기~lt~/a~gt~ ~lt~div id="dialog" title= "간단한 창"~gt~ ~lt~p~gt~ This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the "x" icon. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Прогрессбар~lt~/p~gt~ ~lt~div id="progressbar"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p class="titl"~gt~Кнопки~lt~/p~gt~ ~lt~button~gt~Обычная кнопка~lt~/button~gt~ ~lt~div id="radio" style="margin-top:15px"~gt~ ~lt~input type="radio" id="radio1" name="radio" /~gt~~lt~label for="radio1"~gt~1~lt~/label~gt~ ~lt~input type="radio" id="radio2" name="radio" checked="checked" /~gt~~lt~label for="radio2"~gt~2~lt~/label~gt~ ~lt~input type="radio" id="radio3" name="radio" /~gt~~lt~label for="radio3"~gt~3~lt~/label~gt~ ~lt~/div~gt~ ~lt~p class="titl"~gt~Автозаполнение~lt~/p~gt~ ~lt~input id="autocomplete" title="영어를 입력하세요"a"" /~gt~ ~lt~p class="titl"~gt~Ползунок~lt~/p~gt~ ~lt~div id="slider"~gt~~lt~/div~gt~ ~lt~p class="titl"~gt~Календарь~lt~/p~gt~ ~lt~div id="datepicker"~gt~~lt~/div~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#accordion").accordion(); $("#tabs").tabs(); $("#dialog").dialog({ autoOpen:false }); $("#progressbar").progressbar({value: 37}); $("#opnDialog").button(); $("button").button(); $("#radio").buttonset(); var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#autocomplete").autocomplete({source: availableTags}); $("#slider").slider({ range: true, min: 0, max: 500, values: [ 75, 300 ] }); $("#datepicker").datepicker({source: availableTags}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~ !}

또한 jQuery UI의 고급 스타일링 시스템을 사용하여 둥근 모서리나 스타일화된 영역(예: 시스템 경고 또는 오류 메시지)을 제공할 수 있습니다.

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ body(패딩:10px; 글꼴:9pt Arial,sans-serif;) p.titl(clear:both; 여백:0; 패딩:5px 0 5px 7px; 글꼴 스타일: 기울임꼴) ~lt~/ style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~p class="titl"~gt~메시지 스타일 지정 및 둥근 모서리~lt~/p~gt~ ~lt~div class= "ui-widget" style="float:left;"~gt~ ~lt~div class="ui-state-highlight ui-corner-all" style="padding:0 .7em"~gt~ ~lt~p ~gt~ ~lt~span class="ui-icon ui-icon-info" style="float: 왼쪽; margin-right: .3em;"~gt~~lt~/span~gt~ ~lt~strong~ gt~Hey!~lt~/strong~gt~ 이것은 ui-state-highlight 스타일의 예입니다. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="ui-widget" style="float:left; margin-top:15px"~gt ~ ~lt~div class="ui-state-error ui-corner-all" style="padding:0 .7em"~gt~ ~lt~p~gt~ ~lt~span class="ui-icon ui- icon-info" style="float: 왼쪽; margin-right: .3em;"~gt~~lt~/span~gt~ ~lt~strong~gt~주의!~lt~/strong~gt~ 이것은 ui-state-error 스타일의 예입니다. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl" style="padding-top:25px"~gt~Icons. ~lt~a href="http://jqueryui.com/themeroller/"~gt~전체 목록~lt~/a~gt~~lt~/p~gt~ ~lt~span~gt~ ~lt~a class="ic" href="#"~gt~~lt~span class="ui-icon ui-icon-circle-zoomin"~gt~~lt~/span~gt~~lt~/a~gt~ ~lt~a class="ic" href="#"~gt~~lt~span class="ui-icon ui-icon-info"~gt~~lt~/span~gt~~lt~/a~ gt~ ~lt~a class="ic" href="#"~gt~~lt~span class="ui-icon ui-icon-arrow-4"~gt~~lt~/span~gt~~lt ~/a~gt~ ~lt~b~gt~ . . .~lt~/b~gt~ ~lt~/span~gt~ ~lt~script~gt~ $(".ic").button(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

용법

개별 플러그인을 사용하는 방법을 배우기 전에 전체 jQuery UI 라이브러리가 어떻게 작동하는지 아는 것이 중요합니다.

직접 사용자 정의한 테마를 사용하려면 먼저 이 페이지에서 필요한 모든 테마 설정을 지정한 다음 "테마 다운로드" 버튼을 클릭하면 편집한 테마가 있는 라이브러리 다운로드 페이지가 나타납니다. 테마 필드에 표시됩니다.

테마와 필수 구성 요소를 결정한 후 다운로드 페이지에서 다운로드를 클릭하면 아카이브가 컴퓨터에 다운로드됩니다. 여기에는 세 개의 폴더가 포함됩니다.

  • CSS— 디자인 파일(CSS 파일 및 이미지)이 포함되어 있습니다.
  • JS— jQuery 및 jQuery UI가 포함된 파일이 포함되어 있습니다.
  • 개발 번들— 이 폴더는 사이트에 업로드할 필요가 없으며 모든 내용은 보조적인 성격을 갖습니다. 플러그인 및 기타 보조 파일의 데모와 함께 다양한 파일이 있습니다.

이 세 폴더 외에도 아카이브 루트에는 다운로드한 플러그인의 데모가 포함된 index.html 파일이 있습니다(물론 이 파일을 사이트에 업로드할 필요는 없습니다).

사이트에 UI 연결

jQuery UI가 사이트 페이지에서 작동하려면 jQuery 라이브러리의 js 파일, jQuery UI의 js 파일(다운로드한 아카이브의 js 폴더에 있음) 및 css 폴더의 내용이 필요합니다. 페이지에 연결됩니다(모든 페이지(CSS 콘텐츠)가 하나의 디렉터리에 호스팅되어 있는 것이 중요합니다).

< link type= "text/css" href= "css/themename/jquery-ui-1.8.12.custom.css" rel= "Stylesheet" /> < script type= "text/javascript" src= "js/jquery-1.4.4.min.js" > < script type= "text/javascript" src= "js/jquery-ui-1.8.12.custom.min.js" >

그게 다야! 그런 다음 페이지에서 jQuery UI 기능을 사용할 수 있습니다. 예를 들어, 자바스크립트 코드 한 줄을 사용하여 일반 요소를 드래그 가능하게 만듭니다.

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / ~gt~ ~lt~script src="http://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~ ~lt~script src="/ui/jqueryui .custom.js"~gt~~lt~/script~gt~ ~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~ ~lt ~style~gt~ body(font:9pt Arial,sans-serif;) p(color:#888; margin:8px 0 12px 0) #draggable(width:125px; height:125px; padding:0.5em; border:1px 단색 #ddd; 배경색:#eee) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div id="드래그 가능"~gt~ ~lt~p ~gt~드래그 가능한 요소~lt~/p~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#draggable").draggable(); // 요소를 드래그 가능하게 만드는 이 코드 줄 ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

플러그인 작업

모든 동작 및 위젯 플러그인은 비슷한 방식으로 작동합니다. 각 jQuery UI 플러그인은 선택한 요소에서 호출되는 하나의 기본 메서드로 표시됩니다. 해당 이름은 항상 플러그인 이름과 일치합니다. 이 방법을 사용하면 요소에 플러그인을 인스턴스화(설치)하고, 플러그인 속성을 찾아 변경하고, 이벤트 핸들러를 설치하고, 일반적으로 메서드라고 불리는 플러그인 기능을 실행할 수도 있습니다(이 개념의 일반적인 의미에서는 메서드는 아니지만). ).

인스턴스화(설치)

페이지 요소에 플러그인을 설치하려면 jQuery를 사용하여 필요한 요소를 선택한 다음 해당 요소에 대한 플러그인 메소드를 호출하면 됩니다(이름은 항상 플러그인 이름과 일치함).

행동 양식

일반적으로 자바스크립트에서 객체의 메소드는 다음과 같이 해당 객체에 대해 호출되는 함수를 의미합니다.

obj.A(); // 객체 obj에 대해 메서드 A를 호출합니다. obj.B () ; // 객체 obj에서 메서드 B를 호출합니다.

그러나 특정 jQuery UI 플러그인을 사용하는 프레임워크 내에서는 메소드를 다음과 같은 기록 형식이라고 합니다.

$("#someId" ) .plaginName ( "메서드 이름" , 메소드 매개변수) ;

예를 들어:

속성

각 플러그인에는 다양한 속성이 있습니다(해당 설명은 해당 플러그인의 문서에서 찾을 수 있습니다). 각 속성은 플러그인이 인스턴스화될 때 설정될 수 있습니다. 이렇게 하려면 요소에 플러그인을 설치할 때 다음 형식(property_name_1:value_1, property_name_2:value_2, ...)의 속성이 포함된 객체를 전달해야 합니다.

// 대화 상자 플러그인을 사용하여 // id=someId인 요소에서 대화 상자를 만들고 창 제목을 지정합니다. $("#someId" ) .dialog (( title: "Message" ) ) ; // datepicker 플러그인을 사용하여 // 페이지의 첫 번째 div를 달력으로 만들고 최소 및 최대 날짜를 지정합니다. $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1) , maxDate: new Date(2013, 1 - 1, 1) ) ;

또한 플러그인이 인스턴스화된 후에 모든 속성의 값을 확인하거나 변경할 수 있습니다. 이렇게 하려면 "옵션" 방법을 사용해야 합니다.

// 대화 상자의 제목을 알아냅니다. varDialogTitle = $("#someId" ) .dialog ("option" , "title" ) ; // 접두사 "#1 "을 추가하여 제목을 변경합니다. $("#someId" ) .dialog ("option" , "title" , "#1 " +DialogTitle) // 달력의 최소 날짜를 변경합니다. // $("div:first" ) .datepicker ("option" , "minDate" , new Date(2008 $("selector" ) .dialog (( close : function (event, ui)) 페이지의 첫 번째 div에 설치됩니다. ( ... ) ) ) ;

나만의 플러그인 만들기

편리하고 직관적인 많은 플러그인을 구성하는 것 외에도 jQuery UI는 유사한 플러그인을 직접 만들 수 있는 수단인 UI 위젯 팩토리를 제공합니다. 가장 큰 장점 중 하나는 기존 위젯을 수정하고 자신만의 위젯 계층 구조를 만들 수 있는 일부 OOP 기능을 구성한다는 것입니다.

저자의 말: 안녕하세요, 친구들. 이 기사에서는 달력, 아코디언, 실시간 검색, 아름다운 애니메이션 효과 등 웹 사이트에 이미 만들어진 여러 가지 흥미로운 솔루션을 구현할 수 있는 jQuery UI 라이브러리에 대해 알아가기 시작할 것입니다. 이 기사에서는 jQuery UI 라이브러리를 다운로드하고 연결하는 방법을 알아봅니다.

그렇다면 jQuery UI 라이브러리가 왜 필요한가요? 사실, 그렇다면 우리는 왜 타사 플러그인– 현장에 기성 솔루션을 설치하고 사용하는 경우. 그러나 jQuery UI 라이브러리는 포괄적인 솔루션입니다. 여기서는 한 가지뿐만 아니라 다양한 이벤트 작업을 위한 위젯, 효과 및 플러그인의 전체 패키지를 찾을 수 있습니다.

전체 패키지를 다운로드하거나 하나 이상의 위젯을 선택할 수 있습니다. 또한 jQuery UI 라이브러리에는 거의 모든 취향에 맞는 24가지 테마가 포함되어 있습니다. 이것은 또한 중요한 장점입니다.

말에서 행동으로 옮겨봅시다: jQuery UI 라이브러리를 다운로드하고 설치하세요. 공식 웹사이트로 이동하여 다운로드 섹션으로 이동해 보겠습니다. 여기에서 다운로드할 구성 요소와 테마를 선택할 수 있습니다.

자바스크립트. 빠른 시작

웹 애플리케이션을 만드는 방법에 대한 실습 예제를 통해 JavaScript의 기본 사항을 알아보세요.

페이지 하단의 드롭다운 목록에서 주제를 선택할 수 있습니다.

또한 원하는 경우 자신만의 디자인으로 자신만의 테마를 디자인할 수 있습니다. 이렇게 하려면 드롭다운 목록 바로 위에 있는 사용자 정의 테마 링크 디자인을 클릭하기만 하면 됩니다. 열리는 페이지에서 글꼴, 색상 및 기타 요소 디자인을 변경할 수 있으며 온라인에서 변경 사항을 관찰할 수 있습니다. 자신의 주제.

하지만 이전 페이지로 돌아가서 Base 테마가 포함된 jQuery UI 라이브러리의 모든 구성 요소를 다운로드해 보겠습니다.

결과 아카이브에는 스타일 파일(jquery-ui.css)과 스크립트 파일(jquery-ui.js)이 필요합니다. 두 파일 모두 일반 버전과 압축 버전으로 제공되므로 둘 중 하나를 선택할 수 있습니다. 물론 jQuery 라이브러리가 필요합니다. 버전 1.11.3을 다음과 연결하겠습니다. 구글 서비스.

결과적으로 모든 연결이 포함된 페이지는 다음과 같습니다.

< link rel = "stylesheet" href = "ui/jquery-ui.css" >

이 기사는 이제 막 jQuery UI 작업을 시작하고 이 라이브러리를 실제로 익히고 싶어하는 사용자를 대상으로 합니다.
이 창 인터페이스는 창 존재, 창 끌기 기능, 창 크기 조정 기능, 창 최소화/확장 기능 등과 같은 기본 속성을 가정합니다. 결국 이런 일이 일어나야 합니다.
따라서 우리는 대화형 창 웹 인터페이스의 예와 이러한 목적을 위해 jQuery UI를 사용하는 기능을 만들고 싶습니다. 그런 다음 cat에 오신 것을 환영합니다.

간략한 소개 아직 jQuery UI가 무엇인지 모르는 사람들은 다음 링크를 따라 러시아어로 자세한 내용을 읽을 수 있습니다. 문제의 도서관 문서에 대한 러시아어 번역의 등장은 이미 Habré .1 Stage에서 언급되었습니다. – 준비. 먼저 공식 홈페이지(http://jqueryui.com)에서 라이브러리를 다운로드합니다. 인터페이스에는 사용자 정의를 위한 다양한 옵션이 있습니다. 이 예에서는 모든 구성 요소와 Flick 테마가 필요합니다.
다운로드한 구성 요소를 컴퓨터에 다운로드하고 추출하면 다음과 같은 파일 구조를 얻게 됩니다.

css 및 js 폴더에는 모든 것이 명확하지만 index.html에 대한 템플릿은 다음과 같이 작성하겠습니다.