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
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Pergoly a střechy Brno

Yahoo! UI Library - Úvod

Google       Google       30. 8. 2006       14 505×

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 Konference: Moderní informační systémy podporují automatizaci

Konference: Moderní informační systémy podporují automatizaci

Současná situace v šíření onemocnění Covid-19 klade na řadu firem nové nároky a mnohé z nich jsou nyní více než kdy jindy závislé na nejmodernějších informačních technologiích. Proto i v oblasti podnikových informačních systémů vidíme rostoucí důraz na automatizaci nebo na důslednou integraci. Také o těchto trendech se bude mluvit na konferenci Firemní informační systémy, která se koná 24.9.2020 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Reklama
Reklama
Obrázek ke článku Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Nebezpečí ukrytá v USB: z nuly na škvarek za pět sekund

Za cenu šesti dolarů lze celkem bez obtíží koupit nový, líbivě vyhlížející flash disk. Přidaná hodnota, které se vám spolu s ním dostane, už tak moc líbivá není. To, co se před pár sekundami tvářilo jako externí disk, se po připojení k počítači změní v důmyslné elektrické křeslo, které vaše zařízení v onen příslovečný škvarek promění za pár sekund. Cílovou skupinou pro koupi takových zařízení by mohli být záškodníci, kteří by tímto způsobem osnovali pomstu třeba vůči záletnému partnerovi. 

Obrázek ke článku Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Znalosti, dovednosti i prestižní titul MBA: Jde to i moderně a online

Snad nikdy není špatná příležitost na investici do hodnotného vzdělání. Obzvlášť v případě, že absolvent dovede teoretické poznatky přetavit v praktické dovednosti, využitelné při řešení problémů i v komunikaci. Právě na to se specializuje studijní program MBA Řízení informačních technologií, vyučovaný na Business Institutu.

Obrázek ke článku Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Coding Bootcamp Praha: Obor IT krize nepoznamenala, žádaní jsou weboví vývojáři

Pandemie Covid-19 otřásla trhem práce v základech. Dopady krize pocítilo celkově až 45 % zaměstnanců. Není divu, že čím dál větší jistotu přináší obor IT. Ten zůstal krizí téměř nepoznamenán a při nutnosti začít dělat věci na dálku se ještě více ukázalo, jak moc mnohé firmy kvalitní IT potřebují. Do IT nyní přicházejí začátečníci, kteří v něm vidí lukrativní budoucnost a jistotu, ale i freelanceři a zaměstnanci z oborů zasažených krizí

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