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

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
Laser Game Brno

Yahoo! UI Library - Úvod

Google       Google       30. 8. 2006       13 352×

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 SODAT vidí budoucnost datové bezpečnosti ve strojovém učení

SODAT vidí budoucnost datové bezpečnosti ve strojovém učení

Firmy chrání svá citlivá data často nedostatečně. Podle průzkumu společnosti SODAT se v minulém roce setkalo až 80 % z nich s bezpečnostním incidentem ztráty nebo úniku dat. Jedna z pilotních firem, která testovala novou verzi řešení SODAT Protection & Analytics 2.0pro bezpečností analýzu a monitoring dat díky novince zjistila, kdo z disku smazal důležité výkresy a mohla na incident včas reagovat.

Reklama
Reklama
Obrázek ke článku Kontrolujete pracovní emaily i na dovolené? 7 tipů odborníka, jak nepřijít o data

Kontrolujete pracovní emaily i na dovolené? 7 tipů odborníka, jak nepřijít o data

Letní měsíce jsou pro většinu zaměstnanců spojené s každoroční dovolenou. Z údajů Českého statistického úřadu vyplývá, že v roce 2017 podnikli Češi přes 13 milionů delších cest (tzn. s více než čtyřmi noclehy). Přitom právě na období července, srpna a září připadá více než 7,5 milionů z nich. Nicméně tradiční představu o dovolené jako o čase, kdy má práci na starost někdo jiný, Češi boří. 

Obrázek ke článku 10 SEO mýtů, které už nemusíte v roce 2018 řešit

10 SEO mýtů, které už nemusíte v roce 2018 řešit

„Kolik má být na stránce klíčových slov?“, „Nemáš vyplněný meta tag keywords, to nebude fungovat.“, „Katalogy jsou mrtvý“. Také jste už slyšeli některé z těchto otázek? Pojďme si na ně konečně jednou provždy odpovědět.

Obrázek ke článku Trend Micro pomohlo usvědčit viníky v mezinárodním případu Scan4You

Trend Micro pomohlo usvědčit viníky v mezinárodním případu Scan4You

Společnost Trend Micro Incorporated, globální lídr v oblasti kybernetické bezpečnosti, oznámila podrobnosti o své úzké spolupráci s FBI v případu Scan4You. Trend Micro se podílelo na identifikaci osob, které byly spojeny se službou Scan4You Counter Antivirus, což vedlo k jejich odsouzení.

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