jQuery UI 20 dan ortiq plaginlarni, jumladan, turli xatti-harakatlarni (masalan, elementlarni sudrab yoki cho'zish), sakkiz turdagi vidjetlarni (masalan, kalendar, dialog oynalari, tab tizimi va boshqalar) va animatsiya effektlari. Bundan tashqari, UIda vidjetlar ishlab chiqilgan va foydali piktogramma to'plamini (173 dona) o'z ichiga olgan bir nechta dizayn mavzulari mavjud. Dizayn mavzularining har qandayini to'g'ridan-to'g'ri jQuery UI veb-saytida yuklashdan oldin sozlash mumkin.

Qani boshladik

jQuery UI beshta xatti-harakatlar plaginiga ega, ularning ba'zi imkoniyatlari quyida keltirilgan:

~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(shrift:9pt Arial,sans-serif;) p(aniq:ikkalasi; hoshiya:0; to‘ldirish:5px 0 5px 7px; shrift uslubi: kursiv) .itLf(float:chap; eni:280px ; balandligi: 200px;) .itRg(float:chap; chekka-chap:70px; balandlik:200px; width:200px;) .element(float:chap; en:120px; balandlik:120px; chet:7px; toʻldirish:0,5 em;chegara:1px qattiq #ddd; fon rangi:#eee) .element h3(toʻldirish:3px; chekka:0; fon rangi:#f8f8f8; matnni tekislash: markaz; shrift:normal 8pt Arial, sans-serif ; rang:#444) #tashlanishi mumkin(fon rangi:#f2c579;) #tashlanishi mumkin h3(fon rangi:#f1d29e;) ​​#draggable(kenglik:100px; balandlik:100px;) #tanlangan .ui-tanlash( fon: #f1d29e;) ​​#selectable .ui-tanlangan (fon: #f2c579; rang: oq;) ul (roʻyxat uslubi turi: yoʻq; chet: 0; toʻldirish: 0; kenglik: 150px;) ul li (chekka: 3px; toʻldirish: 4px; fon rangi: #fff; chegara: 1px qattiq #888) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p~gt~Elementlarni torting va ushlang~ lt~/p~gt~ ~lt~div id="draggable" class="element"~gt~ ~lt~h3~gt~Dragable element~lt~/h3~gt~ ~lt~/div~gt ~ ~ lt~div id="droppable" class="element"~gt~ ~lt~h3~gt~Tutuvchi element~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt ~ ~ lt~div class="itRg"~gt~ ~lt~p~gt~Elementlarni cho'zish~lt~/p~gt~ ~lt~div id="resizable" class="element"~gt~ ~lt~ h3~ gt~Uzilishi mumkin element~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itLf" style="height:150px"~gt~ ~ lt~ p~gt~Tanlanadigan elementlar~lt~/p~gt~ ~lt~ul id="tanlangan"~gt~ ~lt~li~gt~1-modda~lt~/li~gt~ ~lt~li~ gt~ 2-modda~lt~/li~gt~ ~lt~li~gt~3-modda~lt~/li~gt~ ~lt~li~gt~4-modda~lt~/li~gt~ ~lt~/ ul~ gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p~gt~Gruplanadigan elementlar~lt~/p~gt~ ~lt ~ul id="sortable"~gt~ ~lt~li~gt~1-modda~lt~/li~gt~ ~lt~li~gt~2-modda~lt~/li~gt~ ~lt~li~gt ~element 3~lt~/li~gt~ ~lt~li~gt~4-modda~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("Tushundim!"); ))) $("#selectable").selectable(); $("#sortable").sortable().disableSelection(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Yuqorida keltirilgan xususiyatlarning har biri bir necha qator kodlarga ajratilgan.

UI shuningdek, vidjetlarni tartibga soluvchi sakkizta plaginni taqdim etadi:

~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~ tanasi(shrift:9pt Arial,sans-serif;) p.titl(aniq:har ikkisi; cheti:0; to‘ldirish:5px 0 5px 7px; shrift uslubi: kursiv) .itLf(float:chap; eni :280px; balandlik: 200px;) .itRg(float:chap; chekka-chap:70px; balandlik:200px; width:200px;) #akkordeon(shrift-size:8pt; chekka-pastki:25px) #tabs(shrift- o'lcham:8pt; chekka-pastki:25px) #opnDialog(shrift o'lchami:8pt; chekka-pastki:25px) #progressbar(shrift-size:8pt;) tugmasi(shrift-size:8pt;) #radio(shrift-size) :8pt; chekka-pastki:25px) #avtotoʻldirish(chekka-pastki:25px) #slayder(chekka-pastki:25px) #sana tanlagich(shrift oʻlchami:8pt;) ~lt~/style~gt~ ~lt~/head ~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p class="titl"~gt~Akkordeon~lt~/p~gt~ ~lt~div id=" akkordeon"~gt~ ~lt~h3~gt~~lt~a href="#"~gt~1-bo'lim~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~ lt~p~gt~ ~lt~i~gt~Glasgow~lt~/i~gt~ Shotlandiyadagi eng yirik shahar va Buyuk Britaniyadagi aholi soni boʻyicha uchinchi oʻrinda turadi. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~2-bo'lim~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Glazgodagi muzqaymoq urushlari~lt~/i~gt~ - Shotlandiyaning Glazgo shahrida raqib o'rtasidagi bir qator mojarolar narkotik sotuvchilar o'z mollarini muzqaymoq furgonlarida etkazib berishadi. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~3-bo'lim~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Millwall Brick~lt~/i~gt~ - o'ralgan gazetadan yasalgan va mahkamlangan futbol bezorilarining qo'lbola quroli. qo'rg'oshin kabi musht.. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~4-bo'lim~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~Dialog oynasi~lt~/p~gt~ ~lt~a id="opnDialog" href="javascript:$("#dialog").dialog("open");"~gt~Oynani ochish~lt~/a~gt~ ~lt~div id="dialog" title= "Oddiy oyna"~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="Ingliz tilini kiriting"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~ !}

Bundan tashqari, jQuery UI-ning ilg'or uslublar tizimi yumaloq burchaklar yoki stilize qilingan joylarni ta'minlash uchun ishlatilishi mumkin, masalan, tizim ogohlantirishlari yoki xato xabarlari uchun:

~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~ tanasi(to‘ldirish:10px; shrift:9pt Arial,sans-serif;) p.titl(tozalash:har ikkisi; cheti:0; to‘ldirish:5px 0 5px 7px; shrift uslubi: kursiv) ~lt~/ style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~p class="titl"~gt~Xabar uslubi va yumaloq burchaklar~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~Hey!~lt~/strong~gt~ Bu ui-state-ta'kidlash uslubiga misoldir. ~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~Diqqat!~lt~/strong~gt~ Bu ui-state-error uslubiga misol. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl" style="padding-top:25px"~gt~Ikonlar. ~lt~a href="http://jqueryui.com/themeroller/"~gt~To'liq ro'yxat~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~

Foydalanish

Shaxsiy plaginlardan qanday foydalanishni o'rganishni boshlashdan oldin, butun jQuery UI kutubxonasi qanday ishlashini bilish muhimdir.

Agar siz o'zingiz sozlagan mavzudan foydalanmoqchi bo'lsangiz, avval ushbu sahifadagi barcha kerakli mavzu sozlamalarini o'rnating, so'ng "Mavzuni yuklab olish" tugmasini bosing va siz o'zingizni kutubxonani yuklab olish sahifasida topasiz, u erda tahrirlangan mavzu bo'ladi. Mavzu maydonida ko'rsatilgan.

Mavzu va kerakli komponentlar haqida qaror qabul qilganingizdan so'ng, yuklab olish sahifasida "Yuklab olish" tugmasini bosishingiz kerak, shundan so'ng arxiv kompyuteringizga yuklab olinadi. U uchta jildni o'z ichiga oladi:

• css— dizayn fayllarini o'z ichiga oladi (CSS fayli va tasvirlar).
• js— jQuery va jQuery UI bilan fayllarni o'z ichiga oladi.
• rivojlanish to'plami— ushbu papkani saytga yuklash shart emas, uning barcha mazmuni yordamchi xususiyatga ega. Plagin va boshqa yordamchi fayllarni ko'rsatadigan juda ko'p turli xil fayllar mavjud.

Ushbu uchta papkaga qo'shimcha ravishda, arxivning ildizida yuklab olingan plaginlar namoyishi bilan index.html fayli mavjud (albatta, ushbu faylni saytga yuklashning hojati yo'q).

UI saytingizga ulanmoqda

JQuery UI saytingiz sahifalarida ishlashi uchun jQuery kutubxonasining js fayli, jQuery UI js fayli (yuklab olingan arxivning js jildida joylashgan) va css jildining mazmuni bo'lishi kerak. sahifaga ulangan (ularning barchasi (CSS tarkibi) bitta katalogda xostingda joylashganligi muhim):

< 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" >

Va tamom! Keyin sahifangizda jQuery UI xususiyatlaridan foydalanishingiz mumkin. Masalan, oddiy elementni tortib olinadigan qilish uchun javascript kodining bir qatoridan foydalaning:

~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~ tanasi(shrift:9pt Arial,sans-serif;) p(rang:#888; hoshiya:8px 0 12px 0) #draggable(kenglik:125px; balandlik:125px; toʻldirish:0,5em; chegara:1px qattiq #ddd; fon rangi: #eee) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div id="draggable"~gt~ ~lt~p ~gt~Dragable element~lt~/p~gt~ ~lt~/div~gt~ ~lt~script~gt~ $("#draggable").draggable(); // elementni tortilishi mumkin bo'lgan bu kod qatori ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Plaginlar bilan ishlash

Barcha xatti-harakatlar va vidjet plaginlari xuddi shunday ishlaydi. Har bir jQuery UI plagini tanlangan elementlarda chaqiriladigan bitta asosiy usul bilan ifodalanadi. Uning nomi har doim plagin nomiga mos keladi. Ushbu usuldan foydalanib, siz elementlarga plaginni yaratishingiz (o'rnatishingiz), plagin xususiyatlarini bilib olishingiz va o'zgartirishingiz, voqea ishlov beruvchilarini o'rnatishingiz, shuningdek, odatda usullar deb ataladigan plagin funktsiyalarini ishga tushirishingiz mumkin (garchi ular ushbu kontseptsiyaning odatiy ma'nosida usullar bo'lmasa ham) ).

O'rnatish (o'rnatish)

Har qanday plaginni sahifa elementlariga oʻrnatish uchun jQuery-dan foydalanib kerakli elementlarni tanlang va keyin ulardagi plagin usulini chaqiring (uning nomi har doim plagin nomiga mos keladi):

Usullari

Odatda, JavaScript-dagi ob'ektning usuli bu ob'ektda quyidagi tarzda chaqiriladigan funktsiyani anglatadi:

obj.A(); // ob'ekt obj obj.B bo'yicha A usulini chaqirish (); // ob'ekt ob'ektida B usulini chaqirish

Biroq, muayyan jQuery UI plaginlari bilan ishlash doirasida usullar ushbu yozish shakli deb ataladi:

$("#someId" ) .plaginName ( "usul nomi" , usul parametrlari);

Masalan:

Xususiyatlari

Har bir plagin bir qator xususiyatlarga ega (ularning tavsiflarini tegishli plaginlarning hujjatlarida topish mumkin). Har bir xususiyat plagin yaratilgan vaqtda o'rnatilishi mumkin. Buning uchun plaginni elementga o‘rnatayotganda, xossalari bo‘lgan obyektni formatda o‘tkazish kerak (xususiyat_nomi_1: qiymat_1, xususiyat_nomi_2: qiymat_2, ...):

// dialog oynasi plaginidan // foydalanib id=someId elementidan dialog oynasini yarating va oyna uchun sarlavhani belgilang $("#someId" ) .dialog (( sarlavha: "Xabar" ) ); // datepicker plaginidan // foydalanib sahifadagi birinchi divni kalendar qiling va minimal va maksimal sanani belgilang $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1)) , maxDate: yangi Sana(2013, 1 - 1, 1) );

Bundan tashqari, har qanday xususiyatning qiymati plagin yaratilgandan keyin aniqlanishi yoki o'zgartirilishi mumkin. Buning uchun siz "variant" usulidan foydalanishingiz kerak:

// dialog oynasining sarlavhasini bilib oling var dialogTitle = $("#someId" ) .dialog ("variant" , "title" ); // "#1" prefiksini qo'shish orqali sarlavhani o'zgartiring $("#someId" ) .dialog ("variant" , "title" , "#1 " + dialogTitle) // kalendardagi minimal sanani o'zgartiring // qaysi $("div:first" ) .datepicker ("variant" , "minDate" , new Date(2008 $("selektor" ) .dialog ((yopish: funksiya (voqea, ui)) sahifadagi birinchi divga o'rnatiladi. (...));

O'z plaginlaringizni yaratish

Ko'plab qulay va intuitiv plaginlarni tashkil qilishdan tashqari, jQuery UI shunga o'xshash plaginlarni o'zingiz qilishingiz mumkin bo'lgan vositani taqdim etadi - UI Widget Factory. Uning katta afzalliklaridan biri shundaki, u mavjud vidjetlarni o'zgartirish va o'z vidjet ierarxiyalarini yaratish imkonini beruvchi ba'zi OOP imkoniyatlarini tashkil qiladi.

Muallifdan: Assalomu alaykum, do'stlar. Ushbu maqolada biz jQuery UI kutubxonasi bilan tanishishni boshlaymiz, bu sizning veb-saytingizda ko'plab qiziqarli tayyor echimlarni amalga oshirishga imkon beradi: kalendar, akkordeon, jonli qidiruv, chiroyli animatsiya effektlari va boshqalar. Ushbu maqolada jQuery UI kutubxonasini qanday yuklab olish va ulashni bilib olamiz.

Xo'sh, nima uchun bizga jQuery UI kutubxonasi kerak? Aslida, unda biz nima uchun murojaat qilamiz uchinchi tomon plaginlari– saytga tayyor yechimlarni o‘rnatish va ulardan foydalanish uchun. Lekin jQuery UI kutubxonasi keng qamrovli yechimdir, ya'ni. bu erda siz faqat bitta narsani emas, balki turli xil voqealar bilan ishlash uchun vidjetlar, effektlar va plaginlarning butun to'plamini topasiz.

Siz butun paketni yuklab olishingiz yoki bir yoki bir nechta vidjetni tanlashingiz mumkin. Shuningdek, jQuery UI kutubxonasiga deyarli har qanday lazzat uchun yigirmalab mavzular kiritilgan. Bu ham muhim ortiqcha.

Keling, so'zlardan harakatga o'tamiz: jQuery UI kutubxonasini yuklab oling va o'rnating. Keling, rasmiy veb-saytga o'tamiz va Yuklab olish bo'limiga o'tamiz. Bu erda yuklab olish uchun komponentlar va mavzuni tanlashimiz mumkin.

JavaScript. Tez boshlash

Veb-ilovani yaratishning amaliy misoli bilan JavaScript asoslarini bilib oling.

Siz sahifaning pastki qismidagi ochiladigan ro'yxatdan mavzuni tanlashingiz mumkin.

Bundan tashqari, agar xohlasangiz, o'zingizning dizayningiz bilan o'zingizning mavzuingizni loyihalashingiz mumkin; buning uchun ochiladigan ro'yxatning tepasida joylashgan maxsus mavzuni loyihalash havolasini bosing. Ochilgan sahifada biz shriftlarni, ranglarni va elementlarning boshqa dizaynini o'zgartirishimiz mumkin, o'zgarishlarni onlayn kuzatib boramiz, umuman olganda, biz loyihalashimiz mumkin. o'z mavzusi.

Ammo oldingi sahifaga qaytaylik va jQuery UI kutubxonasining barcha komponentlarini Base mavzusi bilan yuklab olamiz.

Olingan arxivda bizga uslub fayli (jquery-ui.css) va skript fayli (jquery-ui.js) kerak bo'ladi. Ikkala fayl ham oddiy va siqilgan versiyalarda taqdim etiladi, shuning uchun ulardan birini tanlashingiz mumkin. Albatta, sizga jQuery kutubxonasi kerak bo'ladi, men 1.11.3 versiyasini ulayman Google xizmati.

Natijada, barcha ulanishlar bilan sahifa quyidagicha ko'rinadi:

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

Maqola jQuery UI bilan endigina ishlashni boshlayotgan va ushbu kutubxona bilan amalda tanishmoqchi bo'lgan foydalanuvchilar uchun mo'ljallangan.
Ushbu oyna interfeysi oynalarning mavjudligi, ularni sudrab borish, oynalar hajmini o'zgartirish, ularni minimallashtirish/kengaytirish va hokazo kabi asosiy xususiyatlarni o'z ichiga oladi. Oxir-oqibat shunday bo'lishi kerak.
Shunday qilib, biz interaktiv oynali veb-interfeys va bu maqsadda jQuery UI-dan foydalanish qobiliyatiga misol yaratmoqchimiz - keyin mushukka xush kelibsiz.

Qisqacha kirish jQuery UI nima ekanligini hali ham bilmaganlar u haqida rus tilida quyidagi havola orqali batafsil o'qishlari mumkin. Ko'rib chiqilayotgan kutubxona hujjatlarining rus tiliga tarjimasi paydo bo'lishi allaqachon Habré .1 Stage da aytib o'tilgan. - Tayyorgarlik. Birinchidan, kutubxonani http://jqueryui.com rasmiy veb-saytidan yuklab oling. Interfeysda sozlashning ko'plab variantlari mavjud, bizning misolimiz uchun bizga barcha komponentlar va Flick mavzusi kerak bo'ladi.
Yuklab olingan komponentlarni kompyuteringizga yuklab olgandan so'ng, siz quyidagi fayl tuzilishini olasiz:

CSS va JS papkalarida hamma narsa aniq, lekin biz index.html uchun shablonni quyidagicha yozamiz: