Začínáme s jQuery UI

link co je jQuery UI?

jQuery UI je widget a interakce knihovna postavena na vrcholu jQuery JavaScript knihovny, které můžete použít k vytvoření vysoce interaktivní webové aplikace. Tato příručka je navržena tak, aby vám až do rychlosti o tom, jak jQuery UI funguje. Postupujte podle níže a začněte.

odkaz Začít tím, odhlašování Ukázky

získat pocit, pro to, co jQuery UI je schopen, podívejte se na UI Dema.

v sekci ukázky navigace uvádí všechny interakce a widgety, které jQuery UI nabízí. Vyberte si interakci nebo widget a zobrazí se vám několik demo konfigurací pro tento konkrétní plugin. Každé demo umožňuje zobrazit zdrojový kód, změnit témata a adresu URL lze vždy označit záložkou. Například, podívejte se na akordeon widget vyplnit prostor demo stránku.

odkaz Vytvořit Svůj Vlastní jQuery UI ke Stažení

Jakmile budete mít základní pochopení toho, co jQuery UI je a co to dělá, jste připraveni to vyzkoušet! Je čas přejít na tvůrce stahování na webu jQuery UI a stáhnout kopii jQuery UI. jQuery UI je Download Builder umožňuje vybrat komponenty, které chcete stáhnout a získat vlastní verzi knihovny pro váš projekt. Existují tři snadné kroky k budování své vlastní jQuery UI ke stažení:

odkaz Krok 1: Vyberte si Komponenty, Které Potřebujete,

hlavní sloupci ke Stažení Builder obsahuje seznam všech JavaScript komponenty v jQuery UI rozděleny do skupin: základní, interakce, widgety a efekty. Některé komponenty v jQuery UI závisí na jiných komponentách. Stačí zaškrtnout políčka widgetů, které chcete stáhnout, a všechny požadované závislosti budou také automaticky zkontrolovány. Komponenty, které vyberete, budou všechny sloučeny do vlastního souboru JavaScriptu jQuery UI.

odkaz Krok 2: Vyberte Téma (nebo Roll Svůj Vlastní Motiv)

V pravém sloupci ke Stažení Builder, budete najít oblasti, kde si můžete vybrat z několika předem navržených témat pro widgety jQuery UI.Můžete si vybrat z různých témat, které poskytujeme, nebo si můžete navrhnout vlastní motiv pomocí ThemeRoller (více o tom později).

pokročilá nastavení motivu: část motivu nástroje Download Builder také nabízí některá pokročilá nastavení konfigurace motivu. Pokud plánujete použít více motivů na jedné stránce, budou tato pole užitečná. Pokud plánujete na stránce používat pouze jedno téma, můžete tato nastavení zcela přeskočit.

odkaz Krok 3: Vyberte verzi jQuery UI

posledním krokem v nástroji Download Builder je výběr čísla verze. Nezapomeňte zkontrolovat nejen to, jakou verzi jQuery UI si vyberete, ale také verzi jQuery Core, kterou verze podporuje, protože různé verze knihovny podporují různé verze jQuery. Další informace o tom, co je nového v každé verzi uživatelského rozhraní jQuery, naleznete v průvodcích pro upgrade projektu a seznamech změn.

odkaz klikněte na Stáhnout!

jste hotovi s download Builder! Klikněte na tlačítko Stáhnout a získáte přizpůsobený soubor zip obsahující vše, co jste vybrali.

odkaz základní přehled: Použití jQuery UI na webové stránce

dále otevřete index.html ze staženého zipu v textovém editoru. Uvidíte, že odkazuje na vaše téma, jQuery a jQuery UI. Obecně budete muset tyto tři soubory zahrnout na libovolnou stránku, abyste mohli používat widgety a interakce jQuery UI:

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

Jakmile jste zahrnuty potřebné soubory, můžete přidat nějaké jQuery widgety na vaše stránky. Chcete-li například vytvořit widget datepicker, přidáte na svou stránku prvek pro zadávání textu a poté na něj zavoláte .datepicker(). Takto:

HTML:

<input type="text" name="date">

JavaScript:

$( "#date" ).datepicker();

link That’s It!

For demos of all of the jQuery UI widgets and interactions, check out the demos section of the jQuery UI website.

link přizpůsobení jQuery UI vašim potřebám

jQuery UI umožňuje přizpůsobit ji několika způsoby. Už jste viděli, jak Stáhnout Builder umožňuje přizpůsobit svou kopii jQuery UI, aby obsahoval pouze části, které chcete, ale existují další způsoby, jak upravit kód, aby vaše implementace.

link jQuery UI základy: pomocí voleb

každý plugin v jQuery UI má výchozí konfiguraci, která je zajištěný pro nejzákladnější a běžné použití případu. Pokud však chcete, aby se plugin choval odlišně od výchozí konfigurace, můžete přepsat každé jeho výchozí nastavení pomocí „možnosti“. Možnosti jsou sada vlastností předaných do widgetu jQuery UI jako argument. Widget posuvníku má například možnost orientace, která umožňuje určit, zda má být posuvník vodorovný nebo svislý. Chcete-li nastavit tuto možnost pro posuvník na stránce, stačí ji předat jako argument, jako je tento:

$( "#mySliderDiv" ).slider({
 orientation: "vertical"
});

You can pass as many different options as you’d like by following each one with a comma (except the last one):

$( "#mySliderDiv" ).slider({
 orientation: "vertical",
 min: 0,
 max: 150,
 value: 50
});

Jen si pamatujte, obklopit své možnosti s složené závorky { } a ty jsi na dobré cestě. Výše uvedený příklad se samozřejmě sotva dotýká toho, co můžete dělat s jQuery UI. Chcete-li získat podrobné informace o celé sadě widgetů jQuery UI, navštivte dokumentaci jQuery UI.

odkaz vizuální přizpůsobení: Navrhování jQuery UI téma

Chcete-li navrhnout vlastní téma, jQuery UI má velmi úhledný aplikace právě pro tento účel. Říká se tomu ThemeRoller a vždy se k němu můžete dostat kliknutím na odkaz „témata“ v navigaci jQuery UI, nebo jednoduše jít do jQuery UI ThemeRoller.

ThemeRoller poskytuje vlastní rozhraní pro navrhování všech prvků používaných jQuery UI widgety. Když vyladíte „páky“ v levém sloupci, widgety vpravo budou odrážet váš design. Karta Galerie ThemeRoller nabízí řadu předem navržených témat (stejných, které nabízí tvůrce stahování), které můžete vyladit nebo stáhnout tak, jak jsou.

odkaz Stahování Téma

Když kliknete na „Download theme“ tlačítko v ThemeRoller, budete přesměrováni na Stažení Stavitel a své vlastní téma bude automaticky vybrán v Tématu rozbalovací nabídky. Odtud můžete svůj balíček ke stažení nakonfigurovat dále. Po stažení uvidíte, že stránka example.html je stylizována pomocí vlastního motivu.

rychlý Tip: Pokud budete někdy potřebovat upravit motiv, jednoduše otevřete soubor CSS a zjistěte, kde se říká „Chcete-li zobrazit a upravit toto téma, navštivte …“Tato adresa URL otevře téma v Adresářimeroller pro úpravy.

podpora odkazů: kde mohu získat pomoc?