jQuery UIнь jQuery-д суурилсан номын сан бөгөөд 20 гаруй залгаасуудыг хэрэгжүүлдэг бөгөөд үүнд төрөл бүрийн үйлдлийг зохион байгуулдаг залгаасууд (жишээлбэл, элементүүдийг чирэх эсвэл сунгах), найман төрлийн виджет (хуанли, харилцах цонхнууд, tab систем гэх мэт) болон хөдөлгөөнт эффектүүд. Нэмж дурдахад, 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~ их бие(фонт:9pt Arial,sans-serif;) p(тодорхой:хоёулаа; захын зай:0; дэвсгэр:5px 0 5px 7px; үсгийн хэв маяг: налуу) .itLf(хөвөгч:зүүн; өргөн:280px ; өндөр: 200 пиксел;) .itRg(хөвөгч: зүүн; хөвөө-зүүн: 70 пиксел; өндөр: 200 пиксел; өргөн: 200 пиксел;) . элемент (хөвөгч: зүүн; өргөн: 120 пиксел; өндөр: 120 пиксел; зах: 7 пиксел; дүүргэгч: 0.5 em; хүрээ: 1px хатуу #ddd; дэвсгэр өнгө:#eee) .элемент h3(дөөрөг:3px; зах:0; дэвсгэр өнгө:#f8f8f8; текстийг зэрэгцүүлэх: төв; фонт: хэвийн 8pt Arial,sans-serif ; өнгө:#444) #унадаг(арын өнгө:#f2c579;) #унадаг h3(арын өнгө:#f1d29e;) ​​#чирдэг(өргөн:100px; өндөр:100px;) #сонгож болно .ui-сонгож байна( дэвсгэр: #f1d29e;) ​​#сонгомжтой .ui-сонгосон(арын дэвсгэр:#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="resizable" 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~Selectable elements~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="sortable"~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 ~ $ ("#resizable").resizable(); $("#draggable").draggable(); $("#droppable").droppable(( drop:function())( $(this).addClass("ui-state-highlight") .find("h3").html("Ойлголоо!"); ))) $("#сонгомжтой").сонгох боломжтой(); $("#sortable").sortable().disableSelection(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Дээр дурдсан функц бүрийг хэд хэдэн кодын мөр болгон зохион байгуулдаг.

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~ их бие(фонт:9pt Arial,sans-serif;) p.titl(тодорхой:хоёулаа; захын зай:0; дэвсгэр:5px 0 5px 7px; үсгийн маяг: налуу) .itLf(хөвөгч:зүүн; өргөн :280px; өндөр:200px;) .itRg(хөвөгч:зүүн;зүүн зах:70px; өндөр:200px; өргөн:200px;) #баян хуур(фонтын хэмжээ:8pt; захын доод:25px) #tabs(фонт- хэмжээ:8pt; margin-bottom:25px) #opnDialog(фонтын хэмжээ:8pt; margin-bottom:25px) #progressbar(фонтын хэмжээ:8pt;) товчлуур(фонтын хэмжээ:8pt;) #radio(фонтын хэмжээ) :8pt; захын-доод:25px) #автоматаар гүйцээх(доод талын захын:25px) #гулсагч(доод талын захын:25px) #огноо сонгогч(фонтын хэмжээ:8pt;) ~lt~/style~gt~ ~lt~/head ~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p class="titl"~gt~Аккордеон~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~ нь Шотландын хамгийн том хот бөгөөд Их Британид 3 дахь хүн амтай хот юм. ~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~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~ ~lt~li~gt~~lt ~a href="#tabs-2"~gt~Proin 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~ Morbi tincidunt, 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("нээлттэй");"~gt~Цонхыг нээх~lt~/a~gt~ ~lt~div id="dialog" гарчиг= " Энгийн цонх"~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~ их бие(загвар:10px; фонт:9pt Arial,sans-serif;) p.titl(тодорхой:хоёулаа; захын зай: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: left; margin-right: .3em;"~gt~~lt~/span~gt~ ~lt~strong~ gt~Хөөе!~lt~/strong~gt~ Энэ бол ui-төлөв тодотгох загварын жишээ юм. ~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: left; 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~Иконууд. ~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 бүхий файлуудыг агуулсан.
• хөгжлийн багц- энэ фолдерыг сайтад байршуулах шаардлагагүй, түүний бүх агуулга нь туслах шинж чанартай байдаг. Plugin болон бусад туслах файлуудыг харуулсан олон янзын файлууд байдаг.

Эдгээр гурван хавтаснаас гадна архивын үндсэн хэсэгт татаж авсан залгаасуудыг харуулсан 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 функцуудыг ашиглаж болно. Жишээ нь, энгийн элементийг чирэх боломжтой болгохын тулд JavaScript кодын нэг мөрийг ашиглан:

~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~ их бие(фонт:9pt Arial,sans-serif;) p(өнгө:#888; захын зай:8px 0 12px 0) #чирэх боломжтой(өргөн:125px; өндөр:125px; дэвсгэр:0.5em; хүрээ:1px хатуу #dddd; дэвсгэр өнгө:#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~ $("#чирж болдог").чирдэг(); // элементийг чирэх боломжтой болгодог кодын энэ мөр ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Плагинуудтай ажиллах

Бүх зан төлөв болон виджетийн залгаасууд ижил төстэй байдлаар ажилладаг. jQuery UI залгаас бүрийг сонгосон элементүүд дээр дуудагддаг нэг үндсэн аргаар төлөөлдөг. Түүний нэр үргэлж залгаасын нэртэй таарч байдаг. Энэ аргыг ашигласнаар та элементүүд дээр залгаасыг үүсгэх (суулгах), залгаасын шинж чанарыг олж мэдэх, өөрчлөх, үйл явдал зохицуулагчийг суулгах, мөн ихэвчлэн аргууд гэж нэрлэгддэг залгаасын функцуудыг ажиллуулах боломжтой (хэдийгээр эдгээр нь энэ ойлголтын ердийн утгаараа арга биш боловч). ).

Суулгах (суулгах)

Хуудасны элементүүд дээр ямар нэгэн залгаас суулгахын тулд jQuery ашиглан шаардлагатай элементүүдийг сонгоод дараа нь залгаасын аргыг дуудна уу (нэр нь залгаасын нэртэй үргэлж таарч байдаг):

Арга зүй

Ерөнхийдөө javascript дахь объектын арга нь энэ объект дээр дараах байдлаар дуудагдсан функцийг хэлнэ.

obj.A(); // obj obj.B объект дээр А аргыг дуудах () ; // obj объект дээр В аргыг дууд

Гэсэн хэдий ч тодорхой jQuery UI залгаасуудтай ажиллах хүрээнд эдгээр бичлэгийн хэлбэрийг аргууд гэж нэрлэдэг.

$("#someId" ) .plaginName ( "аргын нэр" , аргын параметрүүд);

Жишээлбэл:

Үл хөдлөх хөрөнгө

Plugin бүр хэд хэдэн шинж чанартай байдаг (тэдгээрийн тайлбарыг холбогдох залгаасуудын баримт бичгээс олж болно). Проперт бүрийг залгаасыг үүсгэх үед тохируулж болно. Үүнийг хийхийн тулд залгаасыг элемент дээр суулгахдаа шинж чанар бүхий объектыг форматаар дамжуулах шаардлагатай (проперти_нэр_1: үнэ цэнэ_1, өмчийн_нэр_2: үнэ цэнэ_2, ...):

// харилцах цонхны залгаасыг // ашиглан id=someId бүхий элементээс харилцах цонх хийж, цонхны гарчгийг зааж өгнө $("#someId" ) .dialog (( гарчиг: "Message" ) ); // огноо сонгогч залгаасыг ашиглан хуудасны эхний div-г хуанли болгож, хамгийн бага ба дээд огноог зааж өгнө $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1)) , maxDate: шинэ Огноо(2013, 1 - 1, 1) );

Нэмж дурдахад, залгаасыг үүсгэсний дараа аливаа өмчийн үнэ цэнийг олж мэдэх эсвэл өөрчлөх боломжтой. Үүнийг хийхийн тулд та "сонголт" аргыг ашиглах хэрэгтэй:

// харилцах цонхны гарчгийг олоорой var dialogTitle = $("#someId" ) .dialog ("сонголт" , "гарчиг" ) ; // "#1 " $("#someId" ) угтварыг нэмж гарчгийг өөрчлөх .dialog ("option" , "title" , "#1 " + dialogTitle) // хуанли дахь хамгийн бага огноог өөрчлөх // аль нь $("div:first" ) .datepicker ("option" , "minDate" , new Date(2008 $("selector" ) .dialog (( хаах : функц (үйл явдал, ui)) хуудасны эхний div дээр суулгасан. (... ) );

Өөрийнхөө залгаасуудыг үүсгэх

jQuery UI нь олон тохиромжтой, ойлгомжтой залгаасуудыг зохион байгуулахаас гадна ижил төстэй нэмэлт өргөтгөлүүдийг өөрөө хийх боломжийг олгодог - UI Widget Factory. Үүний нэг том давуу тал нь одоо байгаа виджетүүдийг өөрчлөх, өөрийн виджетийн шатлалыг үүсгэх боломжийг олгодог зарим OOP боломжуудыг зохион байгуулдаг явдал юм.

Зохиогчоос: Сайн байцгаана уу найзуудаа. Энэ нийтлэлд бид jQuery UI номын сантай танилцаж эхлэх бөгөөд энэ нь танд вэбсайт дээрээ олон сонирхолтой бэлэн шийдлүүдийг хэрэгжүүлэх боломжийг олгодог: хуанли, баян хуур, шууд хайлт, сайхан эффектүүдхөдөлгөөнт дүрс болон бусад олон. Энэ нийтлэлээс бид jQuery UI номын санг хэрхэн татаж авах, холбох талаар сурах болно.

Тэгвэл бидэнд jQuery UI номын сан яагаад хэрэгтэй байна вэ? Ер нь бид яагаад ханддаг юм бэ гуравдагч талын залгаасууд– талбай дээр бэлэн шийдлүүдийг суурилуулах, ашиглахад зориулагдсан. Гэхдээ jQuery UI номын сан нь цогц шийдэл юм, i.e. Энд та зөвхөн нэг зүйл биш, янз бүрийн арга хэмжээнүүдэд зориулсан виджет, эффект, залгаасуудын багцыг олох болно.

Та багцыг бүхэлд нь татаж авах эсвэл нэг буюу хэд хэдэн виджет сонгох боломжтой. Мөн jQuery UI номын санд бараг бүх амтанд тохирсон хорин хэдэн сэдэв багтсан болно. Энэ нь бас чухал давуу тал юм.

Үгнээс үйлдэл рүү шилжье: jQuery UI номын санг татаж аваад суулгаарай. Албан ёсны вэбсайт руу орж, Татаж авах хэсэг рүү орцгооё. Эндээс бид татаж авах бүрэлдэхүүн хэсгүүд болон сэдвийг сонгох боломжтой.

JavaScript. Хурдан эхлэл

Хэрхэн вэб програм үүсгэх практик жишээгээр JavaScript-ийн үндсийг сур.

Та хуудасны доод хэсэгт байрлах унадаг жагсаалтаас сэдэв сонгох боломжтой.

Мөн хэрэв та хүсвэл өөрийн загвараар өөрийн сэдвийг зохиож болно; үүнийг хийхийн тулд унадаг жагсаалтын нэн даруй дээр байрлах захиалгат загварын холбоос дээр дарна уу. Нээгдсэн хуудсан дээр бид фонт, өнгө болон бусад элементүүдийн дизайныг өөрчилж, өөрчлөлтийг онлайнаар ажиглаж, ерөнхийдөө дизайн хийх боломжтой. өөрийн сэдэв.

Гэхдээ өмнөх хуудас руугаа буцаж очоод jQuery UI номын сангийн бүх бүрэлдэхүүн хэсгүүдийг үндсэн сэдэвтэй татаж авцгаая.

Үүссэн архивт бидэнд загварын файл (jquery-ui.css) болон скрипт файл (jquery-ui.js) хэрэгтэй болно. Хоёр файлыг ердийн болон шахсан хувилбараар санал болгодог тул та аль нэгийг нь сонгох боломжтой. Мэдээж хэрэг, танд jQuery номын сан хэрэгтэй болно, би 1.11.3 хувилбарыг холбох болно Google үйлчилгээ.

Үүний үр дүнд бүх холболттой хуудас дараах байдлаар харагдах болно.

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

Энэхүү нийтлэл нь jQuery UI-тэй дөнгөж ажиллаж эхэлж байгаа бөгөөд энэ номын сантай практик дээр танилцахыг хүсч буй хэрэглэгчдэд зориулагдсан болно.
Энэхүү цонхны интерфейс нь цонх байгаа эсэх, тэдгээрийг чирэх чадвар, цонхны хэмжээг өөрчлөх, багасгах/өргөжүүлэх гэх мэт үндсэн шинж чанаруудыг агуулдаг. Эцсийн эцэст ийм зүйл болох ёстой.
Тиймээс бид интерактив цонхтой вэб интерфэйсийн жишээ болон jQuery UI-г энэ зорилгоор ашиглах чадварыг бий болгохыг хүсч байна - тэгвэл мууранд тавтай морилно уу.

Товч танилцуулга jQuery UI гэж юу болохыг мэдэхгүй хэвээр байгаа хүмүүс дараах холбоосоор орж орос хэл дээр дэлгэрэнгүй уншиж болно. Тухайн номын сангийн бичиг баримтын орос хэл дээрх орчуулгын дүр төрхийг Habré .1-д аль хэдийн дурдсан байдаг. -Бэлтгэл. Эхлээд http://jqueryui.com албан ёсны вэбсайтаас номын санг татаж авна уу. Интерфэйс нь тохируулах олон сонголттой бөгөөд бидний жишээнд бидэнд бүх бүрэлдэхүүн хэсгүүд болон Flick сэдэв хэрэгтэй болно.
Татаж авсан бүрэлдэхүүн хэсгүүдийг компьютер дээрээ татаж аваад задалсны дараа та дараах файлын бүтцийг авах болно.

Css болон js фолдеруудын хувьд бүх зүйл ойлгомжтой, гэхдээ бид index.html-ийн загварыг дараах байдлаар бичнэ.