JQuery pro začátečníky (část 6)

reklama

V naší poslední lekci v tomto jQuery pro začátečníky tutoriál série, budeme se krátce podívat na uživatelské rozhraní jQuery - nejpoužívanější jQuery plugin pro přidání grafických uživatelských rozhraní do webových aplikací. Od fantazijních forem a vizuálních efektů, přes rozšiřitelné widgety, přadleny a dialogová okna - jQuery UI vám dává sílu vytvářet bohatá webová uživatelská rozhraní.

Pokud jste tak ještě neučinili, přečtěte si naše předchozí články ze série:

• Úvod: Co je jQuery a proč by vás to mělo zajímat? Vytvoření interaktivního webu: Úvod do jQueryjQuery je skriptovací knihovna na straně klienta, kterou téměř každý moderní web používá - díky tomu jsou webové stránky interaktivní. Není to jediná knihovna Javascript, ale je to nejrozvinutější, nejvíce podporovaná a nejrozšířenější ... Přečtěte si více
• 1: Selektory a základy Výukový program jQuery - Začínáme: Základy a výběrMinulý týden jsem mluvil o tom, jak důležité je jQuery pro každého moderního webového vývojáře a proč je to úžasné. Tento týden si myslím, že je čas, abychom si zašpinili ruce nějakým kódem a zjistili, jak ...
  instagram viewer
  Přečtěte si více
• 2: Metody Úvod do jQuery (část 2): Metody a funkceToto je část úvodního úvodu do programovací série webů jQuery. Část 1 se zabývala základy jQuery o tom, jak ji zahrnout do vašeho projektu, a selektory. V části 2 budeme pokračovat ... Přečtěte si více
• 3: Čekání na načtení stránky a anonymní funkce Úvod do jQuery (část 3): Čekání na načtení stránky a anonymní funkcejQuery je patrně nezbytnou dovedností moderního webového vývojáře a v této krátké mini-sérii doufám, že vám poskytnu znalosti, které vám umožní začít je používat ve vašich vlastních webových projektech. V... Přečtěte si více
• 4: Události Výukový program jQuery (část 4) - posluchači událostíDnes to vykopneme do zářezu a skutečně ukážeme, kde jQuery svítí - události. Pokud jste postupovali podle minulých tutoriálů, měli byste nyní dobře rozumět základnímu kódu ... Přečtěte si více
• Ladění pomocí nástrojů pro vývojáře Chrome Problémy s webovými stránkami s vývojářskými nástroji Chrome nebo FirebugPokud jste dosud sledovali moje návody jQuery, možná jste již narazili na některé problémy s kódem a nevěděli jste, jak je opravit. Když čelíme nefunkčnímu kódu, je to velmi ... Přečtěte si více
• 5: AJAX Výukový program jQuery (část 5): AJAX Them All!Když se blížíme ke konci naší mini-tutoriálové série jQuery, je na čase, abychom se hlouběji podívali na jednu z nejpoužívanějších funkcí jQuery. AJAX umožňuje webové stránce komunikovat s ... Přečtěte si více

Co je uživatelské rozhraní jQuery a proč bych jej měl používat?

Uživatelské rozhraní jQuery vám poskytuje všechny komponenty potřebné pro moderní webovou aplikaci s GUI. Pro lepší popis je to kolekce widgetů.

Pro rychlou představu o tom, co s tím můžete udělat, stačí procházet MakeUseOf. U nás je obsah ve skutečnosti jen oddělený divs s neuspořádaným seznamem, který bude fungovat jako index. Spusťte na nich funkci jQuery a magicky se promění v karty. Skvělý! Můžete dokonce načíst obsah karty pomocí AJAX, pokud chcete.

Stránka Odměny také používá dialogové okno „modální vyskakovací okno“ k potvrzení akce uživatele a vrácení zpráv. Chcete-li zaměřit pozornost uživatele, můžete nechat dialogové okno ztlumit zbytek obsahu stránky, dokud není interakce dokončena.

Na našem serveru Odpovědi používáme jednoduché popis Tato funkce poskytuje rady ohledně tlačítek.

Uživatelské rozhraní jQuery opravdu vyniká, pokud jde o formuláře, umožňující přístup k velkému množství posuvníků a sběračů. Jsem velkým fanouškem držitel dat widget, který můžete načíst na horní část běžného textového pole, kde má uživatel zadat datum.

Vypadá to komplikovaně, že? Dokážete si představit, že něco podobného kódujete v čistém JavaScriptu? Takto to děláte s uživatelským rozhraním jQuery:

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

Nebudu trávit více času vysvětlením, jaké je to úžasné, protože Oficiální ukázky uživatelského rozhraní jQuery poskytnout dobrý přehled o všech dostupných funkcích a také jednoduché ukázky kódu. Jděte si to přečíst.

Přidání uživatelského rozhraní jQuery

Nejjednodušší způsob, jak začít s uživatelským rozhraním jQuery, je přidat do záhlaví následující řádky - ale vytvořit Ujistěte se, že jsou přidány PO hlavní referenci jQuery, protože uživatelské rozhraní jQuery vyžaduje, aby byl jQuery předem načten. Potřebujete jak odkaz na skript pluginu, tak i šablony stylů který obsahuje vizuální popis těchto prvků uživatelského rozhraní.