LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> JAK na komplexní ovládací prvky

V dnešním díle seriálu o JavaSrciptovské knihovně JAK se podíváme na některé komplexní ovládací prvky, které jsou často používané na webových stránkách. Jde o kalendář, textový wysiwyg editor a galerie obrázků.

26.5.2011 00:00 | Ondřej Tůma | Články autora | přečteno 8874×

Komplexními prvky je nazývám proto, že nejde o jeden jednoduchý prvek jako např. tlačítko, či vstupní pole, ale o celou řadu různých vstupních „čidel”, která reagují na podněty uživatele a dohromady vytváří ucelenou funkčnost.

Kalendář

O kalendáři sem se zmiňoval v jednom z minulém dílu tohoto seriálu. Jde o prvek, jehož absence se stala i jedním z podmětů v diskuzi W3C skupiny, při návrhu nové verze HTML. Jeho použitím zabije web-kodér hned dva problémy. V první řadě může být (a taky je) problém pro uživatele dodržet programátorem daný, tedy strojově zpracovatelný, formát data a času.

To je samo o sobě opravdu problém, protože datum a čas se dá napsat mnoha rozličnými způsoby. Toto se občas řeší tak, že každý prvek v zadávané hodnotě, má svůj vlastní select i s možnými hodnotami. Například měsíc 1 - 12 (případně jména), nebo hodiny 0-23 a podobně. Druhý vyřešený problém je usnadnění uživateli orientaci v zadávané hodnotě. Přesněji řečeno, uživatel při použití kalendáře má vizuální představu o datu případně času, ví o jaký den v týdnu se jedná, o jaký týden v měsíci a podobně.


JavaScriptový kalendář z knihovny JAK.

Implementace kalendáře je pak velmi jednoduchá a je implementovaná prostřednictvím jednoho javascriptovského řádku kódu navíc.
<label for="datum">Datum:</label>
<input type="text" id="datum" name="datum" value=""/>

<script type="text/javascript">
        JAK.Calendar.setup("calendar_icon.gif", "[vybrat datum]", {}, "datum");
</script>
[dokumentace prvku kalendář na stránkách projektu]

Wysiwyg editor

Tedy zkratka pro známé co vidíš to dostaneš. Dnes velmi oblíbený prvek v mnoha CMS systémech a zároveň nepřítel všech grafických návrhů, sémantiky a čitelnosti kódu. Proč takový prvek použít ? Občas vyžaduje zadavatel stránek nějaký systém na snadné formátování stránek. Uživatel si prostě napíše text a zformátuje si ho obdobně jako to dělá v nějakém klasickém textovém procesoru (v mém případě Abiwordu).


JavaSriptový WYSIWYG html editor z knihovny JAK.

Problematičnost takového prvku v nějakém CMS tkví v jeho implementaci a v rozsahu možnostech použití. Tento editor je implementován vnitřním wysiwyg editorem prohlížeče a ty k editaci (X)HTML přistupují různorodě. Pokud je tedy jeden text editován v různých prohlížečích, může v něm být použito různých obdobně významových formátovacích značek. Například kde jeden editor použije <b> jiný <strong> a jiny <span style="font-weight: bold"> Výsledek je velmi obdobný HTML hrůze, vygenerované právě klasickými textovými procesory např. Microsoft Wordem. Druhý problém může přeci jen eliminovaný kodérem. Každý web má svůj styl, svůj vzhled a grafické zpracování. V definicích stylu jsou přesně popsané html hlavičky, barvy a formátování textu. A teď tu máme kreativního uživatele, majitele stránek, který má grafické cítění hospodského osla a který chce mít jednou text žlutý, jednou zelený, tady hlavičku o něco menší, tady o něco širší, tady to zarovnáme doleva, sem se hodí tabulka s tyrkysovým pozadím atd. Vrchol pak je bílá stránka se žlutým textem, nebo černá stránka z tmavě modrým textem.

Z těchto důvodů doporučuji začlenění wysiwyg editoru do stránek volitelné a jen pro dostatečně zaškolené uživatele, kteří ví co si mohou dovolit a výsledek nebude srovnatelný z omalovánkami dětí z mateřské školky.
<label for="text">Text:</label>
<textarea id="text" name="text"></textarea>

<script type="text/javascript">
var formatOpt = [
    {innerHTML:"<h1 style='font-size: 30px;color: #6d675e;'>Nadpis 1</h1>", value:"h1"},
        {innerHTML:"<h2 style='font-size: 25px;'>Nadpis 2</h2>", value:"h2"},
        {innerHTML:"<h3 style='font-size: 20px;'>Nadpis 3</h3>", value:"h3"},
        {innerHTML:"<p style='text-align: justify;'>Odstavec</p>", value:"p"}
    ];

    var controls = [
        {type:"undo",text: ['Zpět']},     // toto je plugin undoredo
        {type:"redo",text: ['Znovu']},     // toto je plugin undoredo
        {type:"separator"},
        {type:"bold",text:"Tučné"},
        {type:"italic",text:"Kurzíva"},
        {type:"underline",text:"Podtržené"},
        {type:"strikethrough",text:"Přeškrtnuté"},
        {type:"separator"},
        {type:"format",text:"Formát", options: formatOpt},
        {type:"separator"},
        {type:"link",text:["Link","Target URL:"]},
        {type:"unlink",text:"Remove Link"},
        {type:"separator"},
        {type:"html",text:"Editovat HTML"}
    ];

    var opts = { controls:controls, imagePath:"/editor-img/" };
    var e = new JAK.Editor("text",opts);
</script>
[dokumentace prvku Editor na stránkách projektu]
[popis pokročilých voleb a pluginů]

Galerie obrázků - LightBox

Dnes se velmi často na jedné stránce vyskytuje více obrázků, případně jsou obrázky rozměrově větší a jejich začlenění do stránky by nebylo to pravé, ořechové. Použití nějaké javascriptovské galerie se tedy přímo nabízí. V JAKu je implementován tento prvek pod názvem LightBox. Jeho konfigurace je velmi rozsáhlá a rozepisováním bych zbytečně duplikoval pěknou dokumentaci v českém jazyce. Proto jen předvedu ukázku zdrojového kódu.
var data = [
    {alt: 'Západ slunce', small: {url: '/img/gallery/tn01.jpg'}, big: {url: '/img/gallery/01.jpg'} },
    {alt: 'Praděd', small: {url: '/img/gallery/tn02.jpg'}, big: {url: '/img/gallery/02.jpg'} },
    {alt: 'Klaustrofobie', small: {url: '/img/gallery/tn03.jpg'}, big: {url: '/img/gallery/03.jpg'} },
    {alt: 'Přehlídka armády', small: {url: '/img/gallery/tn04.jpg'}, big: {url: '/img/gallery/04.jpg'} }
];

opt = {
    useShadow: false,
    galleryId: 'lightBox',
    usePageShader: true,
    zIndex: 5,
    imagePath: '/lightbox-img/shadow-',
    components: {
         strip: JAK.LightBox.Strip.Scrollable,
         navigation: JAK.LightBox.Navigation.Basic,
         anchorage: JAK.LightBox.Anchorage.Fixed,
         main: JAK.LightBox.Main.CenteredScaled,
         description: JAK.LightBox.Description.Basic
    }
};

galerie = new JAK.LightBox(data, opt);

JavaScriptová galerie obrázků LightBox z knihovny JAK.

[dokumentace galerie LightBox na stránkách projektu]
[popis pokročilých voleb]

Závěr

JAK definuje i jiné další grafické prvky například scrollbar, který sem zmínil v předchozím díle. Tímto článkem však jejich představování končí. Aktuálně plánuji již jen dva články, jeden o AJAXu a druhý o mapovém API. Pokud by Vám snad nějaké informace chyběli, nebo máte pocit, že jsem nějakou důležitý prvek vynechal, neváhejte se o tom zmínit v komentářích pod článkem.

PS

Na stránkách Lightbox zatím nepoužívám proto, že v době kdy jsem programoval tento CMS sem o JAKu nevěděl. Nyní přemýšlím co vše a jak udělám v nové verzi CMS. Co již ale vím, že rozhodně použiji JAK knihovnu tam, kde to bude třeba a se slzou v oku nahradím vlastní kód, kódem novým, který se ve velké míře bude odkazovat právě na knihovnu JAK.

Verze pro tisk

pridej.cz

 

DISKUZE

Nejsou žádné diskuzní příspěvky u dané položky.



Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

17.4.2018 0:46 /František Kučera
Dubnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 4. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tématem tohoto srazu bude OpenStreetMap (OSM) aneb svobodné mapy.
Přidat komentář

16.3.2018 22:01 /František Kučera
Kulatý OpenAlt sraz v Praze oslavíme klasicky: u limonády a piva! Přijďte si posedět, dát si dobré jídlo a vybrat z mnoha piv do restaurace Kulový blesk, který najdete v centru Prahy nedaleko metra I. P. Pavlova na adrese Sokolská 13, Praha 2. Sraz se koná ve čtvrtek 22. března a začínáme v 18:00. Heslo: OpenAlt. Vezměte s sebou svoje hračky! Uvítáme, když si s sebou na sraz vezmete svoje oblíbené hračky. Jestli máte nějaký drobný projekt postavený na Arduinu, nějakou zajímavou elektronickou součástku, či třeba i pěkný úlovek z crowdfundingové akce, neváhejte. Oslníte ostatní a o zábavu bude postaráno.
Přidat komentář

13.2.2018 0:41 /František Kučera
Únorový pražský sraz OpenAltu se koná 15. 2. 2018 a tentokrát se vydáme na návštěvu do jednoho pražského datacentra. Sejdeme se v 17:50 v severovýchodní části nástupiště tramvajové zastávky Koh-I-Noor. Po exkurzi se přesuneme do restaurace U Pštrosa (Moskevská 49), kde probereme tradiční témata (svobodný software a hardware, DIY, CNC, SDR, 3D tisk…) a tentokrát bude k vidění i IoT brána od The Things Network.
Přidat komentář

11.2.2018 23:11 /Petr Ježek
Hledáte lehký a rychlý prolížeč PDF souborů? Pokud vás již omrzelo čekat na načítání stránek či jiné nešvary, zkuste xreader.
Přidat komentář

11.2.2018 20:35 /Redakce Linuxsoft.cz
Třetí ročník odborné IT konference na téma Cloud computing v praxi proběhne ve čtvrtek 1. března 2018 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 16 hod. odpoledne. Konference o trendech v oblasti cloud computingu nabídne i informace o konkrétních možnostech využívání cloudů a řešení vybraných otázek souvisejících s provozem IT infrastruktury.
Přidat komentář

15.1.2018 0:51 /František Kučera
První letošní pražský sraz se koná již tento čtvrtek 18. ledna od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Vítáni jsou všichni příznivci svobodného softwaru a hardwaru, ESP32, DIY, CNC, SDR nebo dobrého piva. Prvních deset účastníků srazu obdrží samolepku There Is No Cloud… just other people's computers. od Free Software Foundation.
Přidat komentář

14.11.2017 16:56 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

16.1.2018 1:08 / Ivan Pittner
verejna ip od o2 ubuntu

15.1.2018 17:26 / Mira Harvalik
Re: Jak udělat HTML/Javascript swiping gallery do mobilu?

30.12.2017 20:16 / Michal Knoll
odmocnina

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2018) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze