Yahoo! UI Library - Úvod
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Yahoo! UI Library - ÚvodYahoo! UI Library - Úvod

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín

Yahoo! UI Library - Úvod

Google       Google       30. 8. 2006       12 986×

Druhý nejpoužívanější vyhledávač Yahoo! uvolnil zdrojové kódy některých jeho prvků uživatelského rozhraní (našeptávač, kalendář, menu) postavených na JavaScript/AJAX. V tomto seriálu uvidíte návod na jejich použití na stránkách.

Reklama
Reklama

Yahoo! UI Library nabízí všem webmasterům pod licencí BSD jedoduchou sadu použitelných ovládacích prvků, které můžete vidět na portálu Yahoo! Jejich implementace je snadná.

Hlavní stránky knihovny jsou http://developer.yahoo.com/yui/, na tomto odkaze je ke stažení: http://kent.dl.sourceforge.net/sourceforge/yui/yui_0.11.2.zip. Instalace je jednoduchá, stáhněte si výše uvedený soubor a rozbalte jej. Skládá se ze 3 složek: build, docs a examples. Ve složce build najdete zdrojové soubory – ty jsou pro nás nejdůležitější. Ve složce docs se nachází dokumentace a ve složce examples příklady.

Samotná knihovna nám nabízí tyto prvky:

Animation
Prvek umožňující jednoduchou animaci prvků. Zvládá jednorázový přesun, změnu CSS stylů, plynulou animaci, definovat kontrolní body, apod. Pro ukázku, zde jsou příklady.
Drag & Drop
Prvek umožňující jednoduchý systém přetahování. Odesílá události, čili můžeme na každé přesunutí zareagovat JavaScriptem a pomocí prvku Connection Manager (více níže) reagovat i PHP skriptem. Toto však obecně platí u všech prvků této knihovny. Prvek Drag & Drop zvládá přetažení „divů“, obrázků, změnu velikosti, seznamy, aj. Více opět příklady.
Connection Manager
Prvek, který umožňuje velice jednoduše otevřít nové HTTP spojení (např. kvůli spuštění PHP skriptu) a pokračovat v něm (získávat výsledek, apod.). Pomocí něj lze jednoduše v JavaScriptu měnit obsah databáze. Používá se nejčastěji ve spojení s jinými prvky této knihovny. Více opět příklady.
Calendar
Prvek zobrazující obligátní kalendář pro výběr data. Je plně skinovatelný, lze jednoduše přeložit do češtiny, obsahaje podporu pro výběr více dat, zvýraznění týdne, apod. Použití demonstrují příklady.
Menu
Velice výkonný prvek, umožňující jednoduchou tvorbu nabídek. Deklarují se jako jednoduché nečíslované seznamy <ul>, kód knihovny z nich udělá nabídku. Může být víceúrovňová, dá se dynamicky JavaScriptem měnit. Tyto příklady ukazují i celkové použití na stránce, napodobují nabídku Start systému Windows a hlavní nabídku aplikací.
Slider
Zajímavý prvek, který by se dal přeložit jako číselník. Pomocí něj se dá vybrat číslo ze zadaného rozsahu. V těchto příkladech uvidíte jeho použítí i jeho velice zajímavý vzhled.
Tree View
Chcete-li zobrazit data ve stromové struktuře (seznam rubrik a podrubrik, soubory na disku), tento prvek se hodí nejvíce. V příkladech můžete vidět jeho použítí.
Container
Tento prvek obsahuje další prvky, pojďme se na ně podívat:
Module
Pokud chcete na stránkách zobrazit nějaké informace, můžete použít prvek Module. Např. na této stránce by to mohly být ony bloky v levém a pravém sloupci. Pomocí tohoto prvku se dělají ostatní, zde uvedené prvky.
Panel
Tento prvek zobrazuje různá „podokna“ stránky. Zajímavé jsou základní styly nabízené knihovnou (Aqua, XP, Photo Box); jsou hezké a onen XP styl jen tak nelze rozeznat od pravého okna. Tato „okna“ jsou jen plovoucí divy. Jsou přesunovatelné za „záhlaví“ a mají „ikonku“ zavřít.
Dialog
Tento prvek by se dal zařadit jako druh prvku Panel. Je to také okno se všemi styly jako prvek Panel, jehož obsahem je (X)HTML formulář. Ten se po odeslání může odeslat pomocí metody (GET/POST) rodičovskému oknu, pomocí prvku Connection Manager získat odpověď nebo vyvolat uživatelskou funkci. Dá se často použít jako zpestření uživatelského rozhraní stránky.
SimpleBox
Tento prvek je zjednodušený prvek Dialog, který se používá na potrvzení akce. Vypadá o mnoho lépe než zabudovaný objekt JavaScriptu confirm(). Je „modální“, čili při jeho použití nelze používat zbytek stránky, která efektně zašedne. Tímto se však neliší od prvku Dialog, který je taktéž „modální“.

Všechny tyto prvky mají své příklady zde.

Tolik stručný popis většiny ovládacích prvků knihovny Yahoo! UI Library. V příštích dílech si povíme o použití každého z nich.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

4 názory  —  4 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
Autor se věnuje programování všeho druhu, hlavně v Javě a .NET Frameworku.

Nové články

Obrázek ke článku První český hackathon ve vlaku inspirovaly služby jako  Tinder, Airbnb nebo Uber

První český hackathon ve vlaku inspirovaly služby jako Tinder, Airbnb nebo Uber

Patnáct set kilometrů, cesta přes dva státy, šestnáct hodin programování a přísun energy drinků, tak by se dal shrnout unikátní hackathon ve vlaku pořádaný Kiwi.com. Z Prahy do Košic a zpět se svezlo celkem 13 týmů, každý s originálním nápadem. Hlavní výhru, voucher na letenky v hodnotě 2 500 EUR, si v Praze převzal tým až z Ukrajiny.

Reklama
Reklama
Obrázek ke článku Gamifikace nakupování dorazila i do České republiky

Gamifikace nakupování dorazila i do České republiky

Zákazníci zejména retailových společností jsou často znuděni klasickými věrnostními či motivačními programy. Většinou z toho důvodu, že jsou jeden jako druhý a nepřináší nic nového. Ale i v České republice se projevují zahraniční trendy, nedávno zde totiž vstoupila na trh a rychle se uchytila nová platforma kombinující to nejlepší z věrnostních a motivačních programů, která navíc využívá prvky gamifikace – Rondo.cz. Na hlavní milníky vývoje nálad a motivace zákazníků a nejnovější trendy se zaměřil Jan Hřebabecký, spoluzakladatel Rondo.cz

Celý článekGoogle2. listopadu 2017PR
Obrázek ke článku NopCommerce – datová vrstva a přístup k datům – 2. díl

NopCommerce – datová vrstva a přístup k datům – 2. díl

V minulém článku jsme si představili platformu NopCommerce z globálního pohledu. V dnešním díle se již zaměříme na konkrétní část systému, a to datovou vrstvu. Představíme si základní stavební kameny systému v podobě doménových objektů. Ukážeme si, jakým způsobem rozšířit doménové objekty a jakým způsobem přistupuje NopCommerce k nastavení systému a modulů.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý