uživatelské rozhraní jQuery je knihovna založená na jQuery, která implementuje více než 20 pluginů, včetně pluginů, které organizují různá chování (například přetahování nebo roztahování prvků), osm typů widgetů (jako je kalendář, dialogová okna, systém karet atd.) a animační efekty. Kromě toho má uživatelské rozhraní několik designových témat, se kterými jsou navrženy widgety a které obsahují sadu užitečných ikon (173 kusů). Jakékoli z motivů návrhu lze upravit přímo na webu uživatelského rozhraní jQuery, bezprostředně před načtením.

Začněme

jQuery UI má pět pluginů pro chování, z nichž některé jsou uvedeny níže:

~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:oboth; margin:0; padding:5px 0 5px 7px; font-style:italic) .itLf(float:left; width:280px ; height:200px;) .itRg(float:left; margin-left:70px; height:200px; width:200px;) .element(float:left; width:120px; height:120px; margin:7px; padding:0.5 em; border:1px solid #ddd; background-color:#eee) .element h3(padding:3px; margin:0; background-color:#f8f8f8; text-align:center; font:normal 8pt Arial,sans-serif ; color:#444) #dropable(background-color:#f2c579;) #dropable h3(background-color:#f1d29e;) ​​​​#draggable(width:100px; height:100px;) #selectable .ui-selecting( pozadí: #f1d29e;) ​​​​#selectable .ui-selected(pozadí:#f2c579; color:white;) ul(list-style-type:none; margin:0; padding:0; width:150px;) ul li(margin:3px; padding:4px; background-color:#fff; border:1px solid #888) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div class="itLf"~gt~ ~lt~p~gt~Přetáhněte prvky~ lt~/p~gt~ ~lt~div id="draggable" class="element"~gt~ ~lt~h3~gt~Přetahovatelný prvek~lt~/h3~gt~ ~lt~/div~gt ~ ~ lt~div id="droppable" class="element"~gt~ ~lt~h3~gt~Zachycující prvek~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt ~ ~ lt~div class="itRg"~gt~ ~lt~p~gt~Roztahovací prvky~lt~/p~gt~ ~lt~div id="resizable" class="element"~gt~ ~lt~ h3~ gt~Roztažitelný prvek~lt~/h3~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~div class="itLf" style="height:150px"~gt~ ~ lt~ p~gt~Volitelné prvky~lt~/p~gt~ ~lt~ul id="selectable"~gt~ ~lt~li~gt~Položka 1~lt~/li~gt~ ~lt~li~ gt~ Položka 2~lt~/li~gt~ ~lt~li~gt~Položka 3~lt~/li~gt~ ~lt~li~gt~Položka 4~lt~/li~gt~ ~lt~/ ul~ gt~ ~lt~/div~gt~ ~lt~div class="itRg" style="height:150px"~gt~ ~lt~p~gt~Seskupitelné prvky~lt~/p~gt~ ~lt ~ul id="řadit"~gt~ ~lt~li~gt~Položka 1~lt~/li~gt~ ~lt~li~gt~Položka 2~lt~/li~gt~ ~lt~li~gt ~Položka 3~lt~/li~gt~ ~lt~li~gt~Položka 4~lt~/li~gt~ ~lt~/ul~gt~ ~lt~/div~gt~ ~lt~script~gt ~ $ ("#změna velikosti").změna velikosti(); $("#přetáhnout").přetáhnout(); $("#droppable").droppable(( drop:function())( $(this).addClass("ui-state-highlight") .find("h3").html("Rozumím!"); ))); $("#selectable").selectable(); $("#seřadit").seřadit().disableSelection(); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Každá z výše uvedených funkcí je uspořádána do několika řádků kódu.

Uživatelské rozhraní také poskytuje osm pluginů, které organizují widgety:

~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; výška:200px;) .itRg(float:left; margin-left:70px; height:200px; width:200px;) #accordion(font-size:8pt; margin-bottom:25px) #tabs(font- size:8pt; margin-bottom:25px) #opnDialog(font-size:8pt; margin-bottom:25px) #progressbar(font-size:8pt;) button(font-size:8pt;) #radio(font-size :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~Akordeon~lt~/p~gt~ ~lt~div id=" akordeon"~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Oddíl 1~lt~/a~gt~~lt~/h3~gt~ ~lt~div~gt~ ~ lt~p~gt~ ~lt~i~gt~Glasgow~lt~/i~gt~ je největší město ve Skotsku a třetí nejlidnatější ve Spojeném království. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Oddíl 2~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Zmrzlinové války v Glasgow~lt~/i~gt~ - série konfliktů ve skotském městě Glasgow mezi rivalem drogoví dealeři rozvážející své zboží v dodávkách se zmrzlinou. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Část 3~lt~/a~gt~~lt~/h3 ~gt~ ~lt~div~gt~ ~lt~p~gt~ ~lt~i~gt~Millwall Brick~lt~/i~gt~ - improvizovaná zbraň fotbalových chuligánů, vyrobená ze srolovaných novin a upnutá v pěst jako olova.. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~h3~gt~~lt~a href="#"~gt~Část 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~Dialogové okno~lt~/p~gt~ ~lt~a id="opnDialog" href="javascript:$("#dialog").dialog("open");"~gt~Otevřít okno~lt~/a~gt~ ~lt~div id="dialog" title= "Jednoduché okno"~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="Zadejte angličtinu"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~ !}

Kromě toho lze pokročilý systém stylů uživatelského rozhraní jQuery použít k poskytnutí zaoblených rohů nebo stylizovaných oblastí, například pro systémová varování nebo chybové zprávy:

~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(padding:10px; font:9pt Arial,sans-serif;) p.titl(clear:both; margin:0; padding:5px 0 5px 7px; font-style:italic) ~lt~/ style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~p class="titl"~gt~Styl zpráv a zaoblené rohy~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~ Toto je příklad stylu 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: left; margin-right: .3em;"~gt~~lt~/span~gt~ ~lt~strong~gt~Pozor!~lt~/strong~gt~ Toto je příklad stylu ui-state-error. ~lt~/p~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~p class="titl" style="padding-top:25px"~gt~Ikony. ~lt~a href="http://jqueryui.com/themeroller/"~gt~Celý seznam~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~

Používání

Než se začnete učit používat jednotlivé pluginy, je důležité vědět, jak funguje celá knihovna uživatelského rozhraní jQuery.

Pokud chcete použít motiv, který si sami upravíte, proveďte nejprve všechna potřebná nastavení motivu na této stránce, poté klikněte na tlačítko „Stáhnout motiv“ a ocitnete se na stránce pro stažení knihovny, kde bude vámi upravený motiv uvedeno v poli Téma.

Poté, co jste se rozhodli pro téma a požadované součásti, musíte na stránce stahování kliknout na Stáhnout, poté se archiv stáhne do vašeho počítače. Bude obsahovat tři složky:

• css— obsahuje soubory návrhů (soubor CSS a obrázky).
• js— obsahuje soubory s jQuery a jQuery UI.
• vývojový balíček— tuto složku není nutné nahrávat na stránku, veškerý její obsah má pomocnou povahu. Existuje mnoho různých souborů s ukázkou pluginu a dalších pomocných souborů.

Kromě těchto tří složek je v kořenovém adresáři archivu soubor index.html s ukázkou stažených pluginů (samozřejmě není nutné tento soubor nahrávat na stránky).

Připojení uživatelského rozhraní k vašemu webu

Aby uživatelské rozhraní jQuery fungovalo na stránkách vašeho webu, je nutné, aby soubor js knihovny jQuery, soubor js uživatelského rozhraní jQuery (umístěný ve složce js staženého archivu) a obsah složky css jsou propojeny se stránkou (je důležité, aby byla celá (obsah css) umístěna na hostingu v jednom adresáři):

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

To je vše! Poté můžete na své stránce používat funkce uživatelského rozhraní jQuery. Například použití jednoho řádku kódu javascript k přetažení běžného prvku:

~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 solid #ddd; background-color:#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(); // tento řádek kódu, díky kterému lze prvek přetáhnout ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Práce s pluginy

Všechny pluginy pro chování a widgety fungují podobným způsobem. Každý plugin uživatelského rozhraní jQuery je reprezentován jednou hlavní metodou, která je volána na vybraných prvcích. Jeho název vždy odpovídá názvu pluginu. Pomocí této metody můžete vytvořit instanci (instalovat) plugin na prvky, zjistit a změnit vlastnosti pluginu, nainstalovat obslužné rutiny událostí a také spouštět funkce pluginu, které se obvykle nazývají metody (ačkoli to nejsou metody v obvyklém smyslu tohoto konceptu). ).

Instanciace (instalace)

Chcete-li nainstalovat jakýkoli plugin na prvky stránky, stačí vybrat potřebné prvky pomocí jQuery a poté na ně zavolat metodu pluginu (jejíž název vždy odpovídá názvu pluginu):

Metody

Obvykle metoda objektu v javascriptu znamená funkci volanou na tomto objektu takto:

obj.A(); // volání metody A na objekt obj obj.B () ; // volání metody B na objekt obj

V rámci práce se specifickými pluginy uživatelského rozhraní jQuery se však metody nazývají tato forma záznamu:

$("#someId" ) .plaginName ( "název metody" , parametry metody) ;

Například:

Vlastnosti

Každý plugin má řadu vlastností (jejich popis naleznete v dokumentaci příslušných pluginů). Každou vlastnost lze nastavit v okamžiku vytvoření instance pluginu. Chcete-li to provést, při instalaci pluginu na prvek musíte předat objekt s vlastnostmi ve formátu (název_vlastnosti_1:hodnota_1, název_vlastnosti_2:hodnota_2, ...):

// vytvořte dialogové okno z prvku s id=someId pomocí // dialogového pluginu a zadejte titulek pro okno $("#someId" ) .dialog (( title: "Message" ) ) ; // udělejte z prvního div na stránce kalendář pomocí // pluginu datepicker a zadejte minimální a maximální datum $("div:first") .datepicker (( minDate: new Date(2007, 1 - 1, 1) , maxDatum: new Datum(2013, 1 - 1, 1) );

Hodnotu jakékoli vlastnosti lze navíc zjistit nebo změnit po vytvoření instance pluginu. Chcete-li to provést, musíte použít metodu "option":

// zjistěte název dialogového okna var dialogTitle = $("#someId" ) .dialog ("option" , "title" ) ; // změnit název přidáním předpony "#1 " $("#someId" ) .dialog ("option" , "title" , "#1 " + dialogTitle) // změnit minimální datum v kalendáři // které je nainstalován do prvního prvku div na stránce $("div:first" ) .datepicker ("option" , "minDate" , new Date(2008 $("selector" ) .dialog (( close : function (event, ui)) (...)));

Vytváření vlastních pluginů

Kromě organizace mnoha pohodlných a intuitivních pluginů poskytuje jQuery UI prostředek, pomocí kterého si můžete podobné pluginy vytvořit sami – UI Widget Factory. Jednou z jeho velkých výhod je, že organizuje některé funkce OOP, které vám umožňují upravovat stávající widgety a vytvářet vlastní hierarchie widgetů.

Od autora: Zdravím vás přátelé. V tomto článku se začneme seznamovat s knihovnou uživatelského rozhraní jQuery, která vám umožní implementovat na váš web mnoho zajímavých hotových řešení: kalendář, akordeon, živé vyhledávání, krásné animační efekty a mnoho dalšího. V tomto článku se naučíme, jak stáhnout a připojit knihovnu uživatelského rozhraní jQuery.

Proč tedy potřebujeme knihovnu uživatelského rozhraní jQuery? Vlastně, proč se tedy obracíme pluginy třetích stran– pro instalaci a použití hotových řešení na místě. Ale knihovna jQuery UI je komplexní řešení, tzn. zde nenajdete jen jednu věc, ale celý balík widgetů, efektů a pluginů pro práci s různými událostmi.

Můžete si stáhnout celý balíček nebo vybrat jeden či více widgetů. V knihovně uživatelského rozhraní jQuery jsou také dvě desítky témat pro téměř každý vkus. To je také významné plus.

Pojďme od slov k činům: stáhněte si a nainstalujte knihovnu uživatelského rozhraní jQuery. Pojďme na oficiální web a přejděte do sekce Ke stažení. Zde můžeme vybrat komponenty ke stažení a motiv.

JavaScript. Rychlý start

Naučte se základy JavaScriptu s praktickým příkladem, jak vytvořit webovou aplikaci.

Téma můžete vybrat z rozevíracího seznamu v dolní části stránky.

Pokud si přejete, můžete si také navrhnout vlastní motiv s vlastním designem; k tomu stačí kliknout na odkaz navrhnout vlastní motiv, který se nachází přímo nad rozevíracím seznamem. Na stránce, která se otevře, můžeme změnit písma, barvy a další design prvků, přičemž změny sledujeme online, obecně můžeme navrhnout vlastní téma.

Vraťme se ale na předchozí stránku a stáhněte si všechny součásti knihovny jQuery UI s tématem Base.

Ve výsledném archivu budeme potřebovat soubor stylu (jquery-ui.css) a soubor skriptu (jquery-ui.js). Oba soubory jsou nabízeny v běžné i komprimované verzi, takže si můžete vybrat kterýkoli z nich. No, samozřejmě, budete potřebovat knihovnu jQuery, propojím verzi 1.11.3 s služba Google.

V důsledku toho bude stránka se všemi připojeními vypadat takto:

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

Článek je určen uživatelům, kteří s jQuery UI teprve začínají a chtějí se s touto knihovnou seznámit v praxi.
Toto rozhraní okna předpokládá takové základní vlastnosti, jako je přítomnost oken, možnost je přetahovat, možnost měnit velikost oken, minimalizovat/rozbalovat je atd. To by se nakonec mělo stát.
Chceme tedy vytvořit příklad interaktivního webového rozhraní s okny a možnosti použití uživatelského rozhraní jQuery pro tento účel – pak vítejte v cat.

Stručný úvod Ti, kteří stále nevědí, co je uživatelské rozhraní jQuery, si o něm mohou přečíst více v ruštině na následujícím odkazu. Podoba ruského překladu dokumentace předmětné knihovny již byla zmíněna na scéně Habré .1. – Přípravné. Nejprve si stáhněte knihovnu z oficiálního webu http://jqueryui.com. Rozhraní má mnoho možností přizpůsobení, pro náš příklad budeme potřebovat všechny komponenty a motiv Flick.
Po stažení a rozbalení stažených součástí do počítače získáte následující strukturu souborů:

U složek css a js je vše jasné, ale šablonu pro index.html napíšeme takto: