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

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

 

Yahoo! UI Library - Úvod

Google       Google       30. 8. 2006       12 117×

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 Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý