404 Not Found

Not Found

The requested URL /banner.php was not found on this server.

přejít na obsah přejít na navigaci

Linux E X P R E S, jQuery (27) – kontextová nápověda a číselníky v jQuery UI

404 Not Found

Not Found

The requested URL /banner.php was not found on this server.

jQuery (27) – kontextová nápověda a číselníky v jQuery UI

jquery.png

Tentokrát se podíváme na dvojici widgetů v jQuery. Bude to „bublinová“ nápověda a tzv. číselníky, tedy prvky umožňující snadno nastavovat číselné hodnoty.


Kontextová nápověda (tooltip)

Každý to jistě zná – najede myší na nějaký objekt a zobrazí se k němu informace, typicky v nějaké „bublině“. Umí to i obyčejný HTML kód (atribut title), ale to je víc „šidítko“ než cokoli jiného. Pokud chceme lepší zobrazení, je třeba se poohlédnout jinde. Například do jQuery UI, kde k tomu slouží widget Tooltip.

Ukázkat nativní kontextové nápovědy (přímo v HTML) Ukázkat nativní kontextové nápovědy (přímo v HTML)

Funguje kompatibilně s nativními tooltipy, takže v HTML kódu webu není potřeba nic měnit. Lze ho nastylovat podle potřeby (podle grafických témat, podle druhu nápovědy, závažnosti zpráv…), animovat, pohybovat bublinami s myší apod.

$('p').tooltip();

Toto je nejjednodušší použití widgetu, které jen převede nativní nápovědu na použití widgetu (použijí se zmíněné atributy title; existuje ale možnost text předefinovat). Zobrazení je hodně podobné, ale méně závisí na prohlížeči a operačním systému.

Využití widgetu Tooltip pro zobrazení nápovědy Využití widgetu Tooltip pro zobrazení nápovědy

Animace

Když si vyzkoušíte uvedený kód, všimnete si, že je zobrazování a mizení animované (plynulé). Tuto animaci lze ovlivnit jak co do parametrů (rychlost, zpoždění atd.), ale také co do typu animace (efektu). Pak to může vypadat i úplně jinak:

var props = {
  show: { effect: "bounce", duration: 500 },
  hide: { effect: "slide", duration: 2000 }
};

$('p').tooltip(props);

Při zobrazování se nápověda krátce zatřese, při mizení odjede vlevo mimo stránku. Animaci lze také zcela vypnout, pokud se show, resp. hide nastaví na hodnotu false.

Nastylování

Ke globálnímu nastylování lze použít třídy ui-tooltip (kontejner bubliny) a ui-tooltip-content (obsah bubliny). Je-li ale například potřeba použít jiné barvy pro určitý typ elementů, musí se na to jít trochu jinak. V JavaScriptu bude:

$('p.warning').tooltip({ tooltipClass: 'tooltip-warning' });

A do CSS se potom umístí něco jako toto:

.tooltip-warning {
  background-color: red;
  color: yellow;
}

Zobrazí se tak červená bublina se žlutým textem.

Speciálně nastylovaná kontextová nápověda Speciálně nastylovaná kontextová nápověda

Další možnosti

Widget Tooltip toho umí ještě o dost víc. Mějme například tento kód:

var props = {
  track: true,
  content: getTooltipContent
};

$('p').tooltip(props);

Parametr track způsobí, že se bude bublina pohybovat s kurzorem myši. Parametr content umožňuje buď přímo předat nějaký obsah (nejen textový, ale obecně HTML), nebo využít funkci, jako je tomu v tomto příkladu (getTooltipContent()). Další možnosti práce s widgetem Tooltip najdete v dokumentaci.

404 Not Found

Not Found

The requested URL /banner.php was not found on this server.



Číselníky

Číselník čili spinner je ovládací prvek umožňující snadno nastavovat čísla. Nejčastěji se používá v případech, kdy se číslo mění v malém rozsahu a je proto vhodné umožnit rychlé nastavování myší. Dříve nebyla vůbec možnost pracovat s takovým prvkem v holém HTML, nativní prvek (element input s typem number) v HTML5 není ještě úplně široce podporován (je jen v relativně nových verzích prohlížečů).

Nativní číselník v HTML5 Nativní číselník v HTML5

Proto je mnohdy výhodnější použít přímo widget Spinner z jQuery UI, který implementuje široce použitelný číselník s dalšími funkcemi. Mějme HTML kód:

<input type="text" id="spinner" value="0">

Je to tedy obyčejné textové vstupní pole (číselníkové pole HTML5 nepoužívejte, jinak tam budou ovládací tlačítka dvakrát). K němu doplníme funkci číselníku velmi snadno:

$('#spinner').spinner();

Výsledkem je následující ovládací prvek:

Číselník vytvořený widgetem Spinner Číselník vytvořený widgetem Spinner

Parametrizace

Jak je výše uvedený příklad jednoduchý, tak je „hloupý“. Neumí například takovou základní věc, jako je horní a dolní mez číselných hodnot, v praxi obvykle nezbytnost. Můžeme tam ale limity přidat:

var props = {
  min: 0,
  max: 10
};
$('#spinner').spinner(props);

Toto umožní „naklikat“ jen čísla 0 – 10, mimo tento rozsah uživatele nepustí.

Pozor: Stále lze do pole zadat číslo mimo rozsah nebo i úplně jiný řetězec! Lze tomu zabránit buď zákazem ruční změny (pole jen k zápisu), nebo lze reagovat na událost změny a zvalidovat obsah, případně tam vrátit poslední platnou hodnotu.

Následující příklad ukazuje další možnosti parametrizace spinneru:

var props = {
   min: 0,
   max: 50,
   step: 2,
   page: 5,
   incremental: false
 };
 
 $('#spinner').spinner(props);

Meze jsou jasné. Pak následuje nastavení kroku, o kolik se hodnota změní po kliknutí na tlačítko šipky nebo po stisku klávesy šipky. Parametr page určuje, o kolik změnit hodnotu klávesami Page UpPage Down. A konečně parametr incremental říká, zda se má při delším držení tlačítka zrychlovat nebo ne (ve výchozím stavu se zrychluje, zde se to vypíná).

Nastylování a další možnosti

Číselníky lze stylovat pomocí tříd ui-spinner (vnější kontejner), ui-spinner-input (původní element pole), ui-spinner-button (tlačítka pro ovládání hodnoty), ui-spinner-upui-spinner-down (tlačítko nahoru, resp. dolů).

Widget Spinner podporuje specifické číselné formáty (včetně finančních hodnot), ovšem potřebuje k tomu podporu frameworku Globalize. Na něj se podíváme někdy v budoucnu.

Nabídky (menu)

U webů a webových aplikací je často potřeba vytvářet různé nabídky (menu). V HTML je lze řešit jen staticky, pro ty dynamické sáhneme k widgetu, který je součástí jQuery UI.

Nahoru

Přidat téma diskuse

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Top články z OpenOffice.cz

Lukáš Jelínek

Lukáš Jelínek

Dlouholetý člen autorského týmu LinuxEXPRESu a OpenOffice.cz. Vystudoval FEL ČVUT v oboru Výpočetní technika. Žije v Kutné Hoře a podniká v oblasti informačních technologií. Ve volném čase rád fotografuje, natáčí a stříhá video, občas se věnuje powerkitingu a na prahu čtyřicítky začal hrát tenis.


  • Distribuce: Debian, Linux Mint
  • Grafické prostředí: KDE

| proč linux | blog