Widgety postavené na knihovně JAK

Na této stránce jsou zobrazeny ukázky widgetů (miniaplikací), které jsou postaveny nad knihovnou JAK.

Kalendář

V příkladu je vidět nastavení kalendáře. Přebírá 4 a více parametrů:

  • imageUrl - cesta k obrázku, který bude za input polem zobrazen. pokud není zadán, bude vygenerováno tlačítko
  • label - alt pro obrázek, nebo název tlačítka
  • optObj - asociativní pole parametrů nastavující kalendář
  • id1..N - libovolný počet ID html input elementů, na které bude kalendář navázán.

Nastavující objekt optObj má tuto strukturu volitelných parametrů:

  • defaultFormat - formátovací řetězec pro datum, zadává se ve stejném tvaru jako pro JavaScriptovou funkci Date(), výchozí hodnota je "j.n.Y"
  • today - řetězec označující dnešek, výchozí hodnota je "Dnes"
  • rollerDelay - čas (msec), po kterém se zobrazí roletky na výber měsice/roku, výchozí hodnota je 200
  • lockWindow - má-li se okno kalendáře bránit vytažení mimo okno prohlížeče (nahoře, vlevo), defaultně je false
  • monthNames - pole názvů měsíců
  • monthNamesShort - pole zkrácených (tří písmenných) názvů měsíců
  • dayNames - pole nazvů dní v týdnu
  • pickTime - určuje, zda je možné v kalendáři nastavovat čas, výchozí hodnota je false

Nejprve nastavíme parametrem pickTime, že chceme vybírat čas a poté v jakém formátu bude vloženo datum do našich dvou inputů. Místo názvu inputu vkládáme pole s názvy jako třetí parametr. Nicméně si můžeme všimnout, že pokud do pole času vložíme správný řetězec, např.: 13:51, kalendář si tento čas nenačte a bude ukazovat čas aktuální. To je z toho důvodu, že kombinací jak z inputů složit řetězec reprezentující datum je nekonečně mnoho. Proto si musíme napsat vlastní inicializaci kalendáře (převzít jeho statické inicializační metody) a tu použít. Vzorová inicializace pro dva a tři inputy je ve statické třídě JAK.Calendar.Setup. Zde je zejména přepsaná soukromá metoda click v metodě manage, která se stará o složení řetězce udávající datum z obsahů jednotlivých inputů.

Kalendář navíc vysílá tři signály:

  • calendarShow - při otevření kalendáře
  • calendarHide - při zavření kalendáře
  • datepick - při výběru datumu

Signál datepick je vyvolán dřív než calendarHide.

Požadované knihovny:
  • jak.js
  • calendar.js
  • calendarsetup.js

Stáhnout widget calendar.

Hodnotící prvek

Web 2.0 je hlavně o obsahu tvořeným komunitou a tento obsah je velice často potřeba různě známkovat a hodnotit. Pro tento účel je vytvořen tento widget. Hodnotící widget rozšiřuje základní funkčnost odkazů v jednom kontejneru. Obaluje je možností volat jejich URL pomocí HTTPXMLREQESTu a přiřazovat dynamicky prvkům třídy pro jejich zvýrazňování. Pokud pomocí reqestu vrátíme i aktuální údaj o celkovém hodnocení, widget ho zpracuje a přídá prvkům třídu pro jejich zvýraznění. Widget počítá s tím, že v obalujícím prvku (kontejner) jsou odkazy (element A), které widget obaluje svoji funkčností.

Při vytváření widget přejímá 2 parametry:

  • id - id obalujícího elementu, či vlastní DOM element
  • settings - nepovinný objekt s nastavením
    • ajax - boolean hodnota, určující zda hodnocení bude prováděno ajaxem, či nikoli, výchozí hodnota je false
    • post - boolean hodnota, určující typ odesílání (GET, POST), výchozí hodnota je false
    • selectedClass - po hodnocení requestem, může být vrácen json string s objektem, který má jedinou vlastnost "rating" a jeho hodnotou je číslo. Toto číslo určuje celkové hodnocení. Potom všem prvkům splňujícím toho hodnocení bude přiřazena tato třída. Výchozí je "selected".

Hodnotící objekt propaguje na kontejner a elementy v kontejneru tyto třídy:

  • [kontejner].rank-active - kontejner získává tuto třídu, pokud uživatel najede myší nad kontejner, potažmo jeho děti
  • [element].rank-active - element získává tuto třídu, pokud uživatel najede nad konkrétní element myší
  • [element].disabled - všechny elementy kontejneru (děti) získávají tuto třídu po získání výsledků z HTTPXMLREQUESTU.

Pokud chceme plně využít hodnotící prvek, je nutné doprogramovat serverovou část. Hodnotící prvek převezme odkazy z linků a ty použije pro dotaz pomocí JAK.Request. Odkaz může vypadat např. takto: rank.php?number=3. Pak serverový skript rank.php musí očekávat vstup se jménem number. Dále je vhodné aby si uložil tuto hodnotu k ostatním, udělal z nich průměr a tento průměr vrátil jako odpověď v JSON formátu:

 {
 	rating: 2
 }
	

V odpovědi výše tedy server vrací průměrnou hodnotu 2, kterou nakonec hodnotící prvek po hlasování zvýrazní.

Požadované knihovny:
  • jak.js
  • rank.js

Stáhnout widget rank.

Editor 2

WISIWIG editor nové generace je nástupcem staršího editoru.

Stejně jako předchozí verze využívá vestavěné funkce prohlížeče pro editaci tzv. richtextu.

Mezi novinky patří například možnost umístění do stránky samostatně bez nutnosti nahrazení prvku textarea, oddělené nástroje od samotného editoru a širší podpora napříč prohlížeči.

Konstruktoru se předává pouze objekt s konfiguračními parametry:

  • imagePath - string - cesta k obrazkum s lomitkem na konci (img/editor2/)
  • controls - object - pole ovladacich prvku editoru
  • content - string - vychozi text
  • placeholder - string - text, zobrazovany v prazdnem blurovanem editoru
Požadované knihovny:
  • jak.js
  • range.js
  • parser.js
  • editor.js
  • editor-controls.js

Stáhnout widget editor2.

Vyskakovací okno

Tento widget může být používán pro vyskakovací okna, která mají uživatele aplikace informovat o určitém stavu. Při vytvoření je zobrazeno okno se stíny o předem definované velikosti.

Okno vytvoříme příkazem:

//vytvoření okna
var params = {};
var w = new JAK.Window(params);
//nastavení obsahu
var txt = JAK.ctext("Ahoj!");
w.content.appendChild(txt);

Když chceme okno zobrazit zavoláme:

document.body.appendChild(w.container);

Konstruktoru okna předáváme asociativní pole s těmito možnými klíči (v závorkách jsou výchozí hodnoty):

  • imagePath - cesta k souborům se stíny (/img/shadow-)
  • imageFormat - přípona souborů se stíny (png)
  • sizes - rozměry stínu v jednotlivých směrech po směru hodinových ručiček ([6,6,6,6])

Názvy obrázků stínů jsou pevně dané a to jako první pismeno směru, či rohové jsou prvním písmenem obou směrů, tedy: t, tl, l, lb, b, rb, r, tr.

Widget window vytvoří element div, který je dostupný jako vlastnost objektu container a v něm je vytvořena tabulka o devíti buňkách, kde v krajních jsou stíny a v prostřední je obsah. Obsah je opět propagován jako vlastnost objektu s názvem content. Proto můžeme do obsahu přidávat text přes volání w.content.appendChild().

Dále obalující DIV prvek získává třídu window-container a obsahová buňka získává třídu window-content, přes které je možné okno dostylovat. Jelikož jsou stíny v buňkách tabulky, je nutné mít na paměti, že pokud chceme aby okno mělo border, musíme ho nastavovat contentu a ne containeru.

Viditelnost okna můžeme ovládat metodami show() pro zobrazení a hide() pro schování okna. Obecně pokud vytvoříme okno a připneme ho do DOM stromu pomocí appendChild, bude okno zobrazeno, což může být nežadoucí, proto je vhodnější okno při inicializaci skriptů vytvořit, připnout do DOM stromu a skrýt a až bude okno třeba, tak ho pomocí metody show() zobrazit.

Požadované knihovny:
  • jak.js
  • window.js

Stáhnout widget window.

Widget pro vyrobení modálního okna. Okno může být v jednu chvíli otevřeno pouze jedno. Všechna vytvořená okna sdílí jeden prvek overlay (překrytí stránky). Použití je jednoduché, okno přijímá pouze dva parametry: obsah okna (string nebo element) a nepovinný objekt s konfigurací. HTML okna a překrytí se tvoří co nejpozději - až při prvním otevření okna.

Konfigurační parametry:

  • winId - string - id okna
  • winClass - string/array - třída okna
  • overlayClass - string/array - třída overlay
  • closeContent - string/element - obsah zavíracího prvku
  • winFixed - bool - fixní nebo absolutní pozicování okna
  • closeActions - bool - přidá defaultní zavírací akce (ESC, klik na overlay, klik na zavírací prvek)
  • bordersImgSupport - string - přidá podporu pro obrázkové okraje (tabulka kolem) ('never', 'always', 'dump')
  • bordersImg - string - sprite obrázek použitý pro obrázkové okraje
  • bordersWidth - number/array - šířka okrajů tvořených sprite obrázkem (pořadí jako v css, začíná horním okrajem a pokračuje po směru hodinových ručiček)

Okno kromě toho, že fakt dobře vypadá, je chytré a umí se dobře zobrazovat a pozicovat i na menších displejích. Není problém, když se fixně pozicované okno nevejde celé do viditelné části dokumentu - vytvoří se scrollbary kolem jeho obsahu. Doporučuji tuhle featuru vyzkoušet s tímto demem. Pro starší androidy (< 4), které mají často problém s fixním pozicováním, je vynuceno absolutní pozicování (i pro overlay).

Veřejné metody:

  • open() - otevře okno
  • close() - zavře okno
  • addOpenElements(elms) - zadané elementy budou na klik otevírat okno; lze zadat 1 element nebo pole, jako ID elementu nebo přímo
  • setContent(content) - přenastavení obsahu okna během jeho existence
  • getContainer() - vrátí vnější obal okna
  • isOpened() - je okno právě otevřeno?
  • disableEsc() - zrusi zavirani okna na klavesu escape (odvesi posluchac), hodi se, pokud ma na escape reagovat neco v obsahu okna
  • enableEsc() - obnovi zavirani okna na klavesu escape (navesi posluchac), respektuje nastaveni closeActions v confu

Vysílané signály:

  • mw-open - okno otevřeno
  • mw-close - okno zavřeno
  • mw-built - HTML kód okna byl vytvořen (včetně obsahu) a připnut do DOMu.
Požadované knihovny:
  • jak.js
  • modalwindow.js

Podrobnější dokumentace k modálnímu oknu

Stáhnout widget modal window.

Prohlížeč obrázků

Další často používanou komponentou je prohlížečka obrázků. Tento widget stejně jako hodnotící widget pracuje rozšiřuje základní funkčnost HTML. Tedy nejdříve si vytvoříme prvek s náhledovými obrázky a odkazy na velké obrázky:

 <div id="gallery">
 	<a href="/img/gallery/01.jpg"><img src="/img/gallery/tn01.jpg" alt="Západ slunce" /></a>
 	<a href="/img/gallery/02.jpg"><img src="/img/gallery/tn02.jpg" alt="Praděd" /></a>
 	<a href="/img/gallery/03.jpg"><img src="/img/gallery/tn03.jpg" alt="Klaustrofobie" /></a>
 	<a href="/img/gallery/04.jpg"><img src="/img/gallery/tn04.jpg" alt="Přehlídka armády" /></a>
 </div>

Dále je nutné informace zkopírovat do javascriptového pole, kde předáme informace o popisce, URL náhledového obrázku a URL velkého obrázku:

 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'} }
 ];

Nyní již můžeme inicializovat objekt galerie:

 var g = new JAK.ImageBrowser('gallery', data);

Třetím volitelným argumentem při volání konstruktoru je asociativní pole s další možností nastavení chování galerie (v závorce je výchozí hodnota):

  • width - max. šířka velkého obrázku [640]
  • height - max. výška velkého obrázku [480]
  • thumbWidth - max. šířka náhledového obrázku [100]
  • thumbHeight - max. výška náhledového obrázku [75]
  • thumbBorder - šířka rámečku okolo náhledu [0]
  • zoomLinkId - ID prvku, který otevírá galerii
  • mainLinkId - ID obrázku, který otevírá galerii
  • imagePath - cesta k obrazkům se stíny [/]
  • imageFormat - připona obrazků se stíny (png/gif/jpg) [png]
  • showNavigation - true/false, mají-li být zobrazena navigační tlačítka (prev/next) [true]
  • useShadow - true/false, má-li se okolo galerie zobrazit stín [false]
  • parent - pokud false, pak je galerie centrována nad vším; pokud non-false, pak jde o id/prvek, do kterého se galerie vytvoří [false]
  • shadowSizes - velikosti stínu v px, dle směru hodinových ručiček [22,22,22,22]
  • fixed - určuje pokud má být galerie fixována v okně, nebo ne. Výchozí hodnota je true - zapnuto
  • captionBoxHeight - určuje výšku v px boxu mezi hlavním obrázkem a náhledy, ve kterém bude zobrazen popisek obrázku

Při povolení použití stínu se využívá widgetu vyskakovacího okna popsaného výše, tedy musí být na stránce tento skript načten také. Galerie níže je jednak se stínem a také s místem na popisek.

ImageBrowser byl nahrazen LightBoxem a proto se doporučuje použití widgetu LightBox.

Požadované knihovny:
  • jak.js
  • imagebrowser.js

Stáhnout widget imagebrowser.

Galerie obrázků na našich službách nám byla na některých službách "těsná", nešla dostatečně konfigurovat tak aby šel měnit dostatečně flexibilně její vzhled. Pro účely Novinek, jsme proto vyvinuli novou verzi galerie, LightBox. Tato galerie je skinovatelná pouze pomocí CSS a je možné její funkčnost ovlivňovat bohatou konfigurací, pokud ani ta není dostačující, je možné doplnit její funkčnost pomocí pluginů.

Chtěli jsme vytvořit galerii, která nebude mít známé vady většiny dostupných galerií, tedy nepřátelské ovládání, které mění svoji pozici při změně obrázku, flexibilní stylování a možnost doplnění funkčnosti jednoduchými zásuvnými moduly.

LightBox se ve výchozím nastavení používá stejně snadno jako předchozí galerie. Pro vložení do stránky lze využít kód níže, který vloží LightBox vypadající jako galerie na Novinkách:

Jak je vidět z konfigurace, některé položky jsou podobné, jako u předchozí galerie, některé (většina) je nových a definují funkčnost galerie. Co tyto položky znamenají a jak psát rozšířující pluginy pro LightBox, se dozvíte na samostatné stránce věnované Lightboxu. Tato ukázka navíc vyžaduje widget Vyskakovacího okna.

Požadované knihovny:
  • jak.js
  • icomponents.js
  • lightbox.js
  • window.js

Pokud chceme využít animovaného přechodu mezi prvky galerie, musíme ještě použít interpolátor a metronom.

Stáhnout widget lightbox.

Ořez obrázků

V pokročilejších administračních rozhraních je uživateli kromě HTML editoru dána možnost úpravy nahraných obrázků, zejména jejich ořez. Ořez obrázků je možné rozdělit na dvě části a to klientskou a serverovou. Tento widget řeší klientskou část a to konkrétně určení pozice výřezu a jeho rozměry. Vlastní zpracování ořezu na straně serveru je již na konkrétní implementaci a použitém jazyce.

Na následujícím obrázku jsou vytvořeny dva ořezové elementy, jeden pro vytvoření ikony, tedy má nastavené fixní rozměry a lze jen posouvat a druhý je pro vytvoření libovolného čtvercového výřezu o rozměrech 100×100 až 300×300px.

Obrázek, který chceme ořezávat musí být přístupný přes ID. Poté můžeme nastavit cropper např. takto:

 var c = new JAK.ImageCropper("imageCropperImage","imageCropperForm",{imagePath: '/img/widgets/imagecropper/'});
 //fixni orezavac 50×50px
 var sizes = {x:50, y:50}
 var v = c.createView("icon", sizes, 0, "#f0f");
 c.showView(v);
 //orez na 100×100 az 300×300px ctverec
 var sizes2 = {x:"100-300", y:"100-", defaultX:150, defaultY:150}
 var v2 = c.createView("image", sizes2, 1, "#0ff");
 c.showView(v2);

Poslední co musíme nastavit, je vytvoření formuláře s jedinečným ID a na ten nasměrovat ImageCropper, který v něm vytvoří pro každé ořezové okno jedno skryté formulářové pole s názvem ořezového elementu (u nás icon a image) a jeho hodnotou jsou čtyři souřadnice oddělené čárkou. Souřadnice jsou: levý horní roh X,Y, spodní pravý roh X a Y.

Objekt ImageCropper očekává tři parametry.

  • imageId - ID obrázku, na který bude aplikován ořez
  • formId - ID formuláře, kam budou vygenerovány skryté formulářové elementy s hodnotami, může být null, pak nejsou žádné skryté elementy generovány
  • params - volitelné asociativní pole, kterým můžeme nastavit:
    • imagePath - cestu k obrázkům šipek, které pomáhají v roztahování ořezového okna
    • dimensions - boolean hodnota určující, zda se mají nad ořezovým oknem zobrazovat výsledné rozměry

Další nastavení se provádí při vytváření ořezového okna metodou createView. Zde je možno nastavit 4 parametry.

  • viewName - název ořezového okna, potažmo název vytvářeného skrytého elementu
  • dimensions - asociativní pole rozměrů s těmito atributy:
    • x - udává rozměr nebo interval povolených rozměrů pro X souřadnici
    • y - udává rozměr nebo interval povolených rozměrů pro Y souřadnici
    • defaultX - (volitelný) výchozí rozměr pro X souřadnici
    • defaultY - (volitelný) výchozí rozměr pro Y souřadnici
  • fixedRatio - boolean hodnota určující, zda má být zachován poměr stran
  • color - barva rámečku ořezového okna

Pro souřadnice X a Y je možné zadat pevnou hodnotu, pak nelze okno v daném směru natahovat, nebo interval. Uzavřený interval lze zadat takto: 20-200. Lze zadat i polootevřený interval a to s vynecháním jednoho z čísel, tedy např.: -100 umožní natahovat okno od 1 do 100px, 20- umožní natáhnout okno od 20px do max. rozměru obrázku. Při pevných rozměrech nejsou zobrazeny šipky (pokud jsou povoleny k zobrazení) pro změnu rozměru ořezového okna. Výchozí nastavení velikosti usnadňuje určení velikosti ořezového okna nezávisle na intervalu rozsahu zvětšení okna. Pokud chceme fixní poměr, pak je nutné mít na paměti, že tento poměr se přepočítává k výchozím rozměrům okna a to buď zadaných ve výchozích rozměrech, nebo intervalových rozměrech.

S okny lze manipulovat i programově. Objekt ImageCropper propaguje tyto veřejné metody pro práci s ořezovými okny:

  • deleteView(view) - vymaže okno view (view je objekt vrácený metodou createView)
  • hideView(view) - schová okno, nicméně jeho rozměry budou odesílány formulářem
  • showView(view, hideOthers) - zobrazí okno; druhý parametr udává, zda schovat ostatní okna [true]
  • disableView(view) - vypne okno tak, že se souřadnice neodešlou přes formulář
  • enableView(view) - zapne okno tak, že se souřadnice pošlou přes formulář
  • resizeView(view, x, y) - změní rozměry okna dle rozměrů X a Y; ImageCropper nehlídá správnost rozměrů
  • moveView(view, x, y) - přesune okno na zadané souřadníce; ImageCropper nehlídá správnost souřadnic
Požadované knihovny:
  • jak.js
  • imagecropper.js

Stáhnout widget imagecropper.

Záložky

V moderních stránkách jsou běžné záložky, které jsou vytvořeny nenásilnou formou z již vygenerovaného HTML nebo jejich vytvoření dynamicky za běhu.

Widget přidává všem záložkám třídu tab a vybrané záložce navíc přidává třídu tab-selected.

Dalším způsobem, jak vytvořit záložky, je vytvořit pojmenované obalující prvky záložek (UL) a obsahů (DIV):

 <ul id="testTabs">
 	<li id="sourceHTMLTab">HTML</li>
 	<li id="sourceJSTab">Zdrojový kód</li>
 </ul>

 <div id="sources">
 	<div id="sourceHTML">Záložka na kterou se díváme</div>
 	<div id="sourceJS">Záložka s JS zdroji</div>
 </div>

Poté stačí přidat všechny prvky naráz pomocí metody a definovat ve třetím paramatru, která záložka má být ve výchozím stavu otevřená (hodnota -1 znamená, že žádná, hodnota 0 znamená první):

 tabs.addManyTabs("testTabs", "sources",0);
Požadované knihovny:
  • jak.js
  • tabs.js

Stáhnout widget tabs.

Výběr barvy

Ne uplně častý, ale v HTML editorech docela běžný, je požadavek na snadný výběr barvy uživatelem. Na widget výběru barvy jsou kladeny rozmanité požadavky, je vhodné nabídnout paletu barev pro rychlý výběr, dále pokročilý výběr z duhového přechodu a možnost zadat barvu v různých barevných módech.

Metoda setup() je jediná legitimní statická metoda pro vytvoření widgetu. Její parametry jsou:

  • image - prvním parametrem je cesta k obrázku, který bude zobrazen u políčka (klikací), pokud false, je vygenerován html button
  • alt - textový popisek obrázku
  • params - asociativní pole s těmito možnými klíči:
    • imagePath - cesta k obrázkům přechodů pro zobrazení duhy ve widgetu [img/]
    • windowOptions - asociativní pole s vlastnostmi pro widget Okna, do kterého je tento widget renderován
    • paletteSize - počet buněk v řádku a sloupci barevné palety [8]
    • labels - pole popisků záložek ["Paleta","Duha"]
    • ok - popisek tlačítka [OK]
    • cancel - popisek tlačítka [Cancel]
  • fieldIds - další parametry funkce jsou Id formulářových prvků, nad kterými bude zobrazován výběr barvy.

Pokud je za textovým inputem vytvořen obrázek, je mu přiřazena CSS třída cp-launcher.

Jestliže potřebujeme získat barvu jinak než jen doplněním její hodnoty do textového pole, můžeme si zaregistrovat posluchače na událost colorselect, kterou instance výběru barvy vyvolává pokud je barva vybrána. Poté je možné přečíst barvu z vlastnosti color vlastnosti data objektu dané události. Je předávána instance třídy JAK.Color. Ukázka využití:

 JAK.signals.addListener(window, 'colorselect', 'colorPickerCallback');
 function colorPickerCallback(evt) {
 	alert(evt.data.color.x); //vrátí např. #a2b311
 }
Požadované knihovny:
  • jak.js
  • colorpicker.js
  • window.js

Stáhnout widget colorpicker.

Výběr

Pro výběr jedné z možností se dost často používá formulářový prvek SELECT. Ten ale nelze jednoduše nastylovat. Proto ho můžeme obalit hezčím výběrem, kde nakreslíme obrázek SELECTu, který bude zapadat do našich stránek. Vyskakovací výběr je tvořen widgetem Okna.

Vytvoření výběru lze jednoduše zavoláním:

 var b = new JAK.BetterSelect("bSelect", {imagePath: "/img/widgets/window/shadow-"});

Kde první parametr je ID formulářového SELECTu a druhý parametr je asociativní pole s parametry pro widget Okna.

Požadované knihovny:
  • jak.js
  • betterselect.js
  • window.js

Stáhnout widget betterselect.

Řazení

Dost často se v současných aplikacích využívá změna pořadí, neboli uživatelské řazení. Je nutné umožnit uživateli vizuálně seřadit prvky na stránce a tento stav poté uchovat na serveru. Pro tyto případy je možno využít tento widget.

Na stránce vytvoříme DIV element, který bude obsahovat obrázky a my budeme chtít určit jejich pořadí.

Vytvoření objektu je pouze voláním konstruktoru:

 new JAK.Reorder("galleryReorder", {}, window, "resultMethod1");

kterému předáváme 4 parametry:

  • boxId - ID kontejneru s objekty, které se mají prohazovat
  • params - asociativní pole s dalším nepovinným nastavením:
    • handleClass - pokud přetahujeme větší objekty, je občas vhodné, aby šlo přetahovat pouze za části obsahu (např. záhlaví), tyto oblasti definujeme společnou stylovou třídou pro tyto elementy [false]
    • direction - osy, ve kterých budeme přetahovat [xy]
    • ghostProcess - při přetahování vzniká klon původního elementu, pokud je element složitější struktury, je vhodné ho po naklonování zjednodušit. O to se stará předaná callback funkce tímto parametrem.
  • callbackObj - objekt, nad kterým budeme volat callbackMethod
  • callbackMethod - metoda, kterou widget volá při změně pořadí

Pokud prohodíte první prvek s druhým, vznikne pořadí 1,0,2,3, pokud je prohodíte nazpátek, vrácene pořadí se nezmění, ač se vizuálně prvky prohodí! Proč? Vracené pořadí je vždy pořadí relativní a tak stačí toto pole projít a aplikovat ho jako masku na pole s aktuálním stavem, který si držíme někde uvnitř vlastní aplikace.

Proto můžeme jednoduše měnit pořadí očíslovaných DIVů při změně pořadí obrázků touto metodou:

 function resultMethod1(arr) {
 	JAK.gel("galleryReorderRank").innerHTML =arr.toString();

 	var g = JAK.gel('galleryReorder2');
 	var elements = g.getElementsByTagName('div');
 	var elements2 = [];
 	//zapamatovani si objektu do vlastinho pole, protoze z getElementsByTagName leze divne se chovajici kolekce
 	for (var i=0; i < elements.length; i++) {
 		elements2[i] = elements[i];
 	}
 	//pak apendujeme elementy do jejich rodice v poradi danem polem arr (append prvku ve stromu je vlastne jeho presunutim)
 	for( var i = 0; i < arr.length; i++) {
 		g.appendChild(elements2[arr[i]]);
 	}
 }

Pokud začneme táhnout element tak je tento element zduplikován a označen třídou reorder-dragged. Dále originální element je označen třídou reorder-active. Pokud začneme táhnout element tak je tento element zduplikován a označen třídou reorder-dragged. Dále originální element je označen třídou reorder-active. Jakmile je přesunut nad jiný element, je tato třída předána tomuto elementu.

A na konec příkladů jednoduchá hra s použitím tohoto widgetu.

Požadované knihovny:
  • jak.js
  • reorder.js

Stáhnout widget reorder.

Konzole

Tento widget většinou neuvidí návštěvníci vašich stránek, nicméně vám může ulehčit práci při ladění vašich skriptů. Konzole funguje velice podobně jako konzole v rozšíření Firebug pro FireFox. Umožňuje zadávat příkazy v Javascriptu, obsahuje historii a nápovědu.

Konzoli do stránky přidáme jednoduše přidáním odkazu na její CSS a JS soubory do hlavičky dané stránky:

 <link rel="stylesheet" href="console.css" type="text/css"></link>
 <script src="jak.js" type="text/javascript"></script>
 <script src="console.js" type="text/javascript"></script>
	

Ve vlastních skriptech již nemusíte používat pro debugovací výpisy alert(), ale stačí volat metodu debug(), která přesměruje výpis právě do konzole, pokud je konzole nastartována.

Konzole v příkazovém řádku obsahuje znak mínusu, který konzoli minimalizuje do řádku a znak pro odstavec, za který lze měnit velikost okna. Okno je přesouvatelné myší za text promt. Konzole si toto nastavení pamatuje do uzavření okna pomocí cookies.

V příkazovém řádku je možné použít tabulátor pro doplňování názvů metod a vlastností vámi napsaných objektů a je možné použít šipku nahoru a dolu pro listování v historii příkazů. Příkazy které konzole ovládá je možné vypsat příkazem help.

Pomocí příkazu cd se lze zanořit do vytvořené objektové struktury a pak již psát lokálně názvy metod a vlastností. Vyzkoušet si to můžeme na příkladu statické třídy JAK.Browser. Pokud do konzole zadáme příkaz JAK.Browser.client, konzole vypíše řetězec identifikující použitý prohlížeč. Můžeme ale také zadat cd JAK.Browser (i s využitím tabulátoru pro doplnění názvů) a pak stačí jen zadat this.client, nebo jen client.

Pokud potřebujete ladit stránky do jejichž zdrojového kódu nemáte přístup, můžete použít tento bookmarklet JAK konzole. Stačí si ho přetáhnout na lištu odkazů a na dané stránce na něj kliknout.

Požadované knihovny:
  • jak.js
  • console.js

Stáhnout widget console.

Slider

Tento widget umožňuje uživateli pohodlněji zadat číslo, než jen při použití klasického inputu. Slider umožnuje zadat číslo v určitém rozsahu, popřípadě i určitém kroku.

Základní slider můžeme vidět níže. Umí rozsah od 1 do 100 s krokem 1 a dokáže se nastavit dle zadané hodnoty v inputu:

Slider jde samozřejmě konfigurovat parametry konstruktoru:

  • id - ID kontejneru do kterého se slider vykreslí
  • params - asociativní pole s dalším nepovinným nastavením:
    • width - šířka slideru [100]
    • height - výška slideru [15]
    • min - dolní mez intervalu výběru [1]
    • max - horní mez intervalu výběru [100]
    • riderW - šířka jezdce [10]
    • riderH - výška jezdce [22]
    • step - délka kroku, pokud je 0, je délka 1px (délka slideru / krok) je nejmenší rozlišitelný dílek [0]
    • mode - string udávající pozici slideru, jestli se bude renderovat svisle, nebo vodorovně. Hodnoty jsou horizontal / vertical. [horizontal]
    • iput - volitelný input element, do kterého jsou zapisovány data, popřípadě z nich může slider číst [null]
    • separator - string udávající oddělovač číslic, tedy pokud zadáme čárku, je možné číst a zapisovat česká desetiná čísla [.]
    • decimal - počet desetiných míst, která se budou zobrazovat [0]
    • mainSliderId - název unikátního ID vytvořeného elementu pro hlavní prvek slideru
    • arrowsMoverId - název unikátního ID vytvořeného odkazu, na který jsou navěšeny události pro obsluhování slideru klavesami
    • riderSliderId - název unikátního ID vytvořeného jezdce slideru
    • plusId - název unikátního ID vytvořeného tlačítka plus
    • minusId - název unikátního ID vytvořeného tlačítka minus
    • mainSliderClassName - název třídy vytvořeného elementu pro hlavní prvek slideru
    • arrowsMoverClassName - název třídy vytvořeného odkazu, na který jsou navěšeny události pro obsluhování slideru klavesami
    • riderSliderClassName - název třídy vytvořeného jezdce slideru
    • plusClassName - název třídy vytvořeného tlačítka plus
    • minusClassName - název třídy vytvořeného tlačítka minus

Slider je možné samozřejmě použít k získání hodnot v jiném intervalu a/nebo jiném kroku. Slider pro interval <1-12> s krokem 0.5 a čtením českého desetiného čísla bychom nastavili takto:

A styly můžeme nastavit tak, aby slider vypadal dle našich požadavků. Ve výchozím nastavení každý prvek Slideru dostane CSS třídu, nicméně je možné pro každý prvek definovat vlastní CSS třídu i id. Výchozí CSS třídy jsou:

  • mainSlider - obalující div
  • arrowsMover - div značící dráhu pro jezdce
  • riderSlider - div jezdce
  • plus - div se znakem plus
  • minus - div se znakem minus
  • invalidClassName - třídu dostává připojený input, pokud je v něm chybně zadané číslo

Výchozí nastavení vzhledu je:

.arrowsMover {border: 1px solid gray; background-color: lightgray;}
.horizontal .riderSlider {top: -4px; border: 1px solid black; background-color: darkgray;}
.vertical .riderSlider {left: -4px; border: 1px solid black; background-color: darkgray;}
.invalidClassName	{background-color: red;}
	

Slider také můžeme jednoduše použít pro změnu velikostí prvků na stránce, nebo jejich umístění.

Mimo jiné byla použita i třída graphicsSlider, která jezdce podbarví obrázkem. Slider také hlavnímu divu dává třídu vertical/horizontal, pomocí které můžeme v CSS definicích rozdělit slidery dle jejich orientace.

Poslední ukázkou je slider s nastylovanými tlačítky [+] a [-]. Pro tuto eventualitu je přichystána výchozí třída buttonSlider.

Požadované knihovny:
  • jak.js
  • slider.js

Stáhnout widget slider.

Tree - strom

Tree je jednoduše použitelný, a dobře rozšiřitelný widget pro zobrazení stromové struktury, tedy např. adresářů a souborů na disku, nebo kategorií a článků v redakčním systému.

Widget se skládá ze tří souborů:

  • tree.js - obsahuje základní třídy stromu Node a Leaf pro tvorbu uzlů a listů
  • treevis.js - obsahuje třídy pro vizualizaci stromu a základní visualizer "Lines"
  • treebuilder.js - volitelný soubor, který obsahuje jednoduchý vytvařeč stromu z předaného předpisu

Připnutí widgetu do stránky:

 <link rel="stylesheet" href="tree.css" type="text/css"></link>
 <script src="jak.js" type="text/javascript"></script>
 <script src="tree.js" type="text/javascript"></script>
 <script src="treevis.js" type="text/javascript"></script>
 <script src="treebuilder.js" type="text/javascript"></script>
	

a výsledek vizualizace:

Jelikož je widget napsán tak, aby ho bylo možné jednoduše rozšířit, je detailnější popis na vlastní stránce. Na této stránce se dozvíte, jak dekorovat uzly novou funkčností, např. dynamickým donačítáním částí stromů pomocí AJAXu, nebo jak vytvořit třídu pro vlastní vizualizaci stromu.

Požadované knihovny:
  • jak.js
  • tree.js

Stáhnout widget tree.

Drag & Drop

Moderní webové stránky je často nutné obohatit o možnost přetahování elementů po stránce, resp. přetáhnutí určitých elementů na pozici jiných, konkrétně např. zboží do košíku. Tuto funkcionalitu zajišťuje widget Drag & Drop.

Knihovna obsahuje dvě hlavní metody:

  • addDragable - parametrem je element, který pujde tahnout, druhým volitelným parametrem je podelement, za který půjde tahnout element
  • addDropable - parametrem je element, do kterého pujde upustit

Widget také vysílá signály:

  • dragdrop-start - při začátku tažení. V datovém objektu jsou předávány tyto informace:
    • draggedElm - element, který začal být tažen
  • dragdrop-end - při konci tažení, tedy při uvolnění tlačítka myši. V datovém objektu jsou tyto informace:
    • draggedElm - elemencontrastcolorpickert, který byl tažen
    • droppable - pole elementů, nad kterými byl puštěn a byli widgetu předány jako "droppable"
    • coords - objekt s hodnotami x a y
  • dragdrop-mousemove - vyvoláváno periodicky při tažení. V datovém objektu jsou tyto informace:
    • draggedElm - element, který je tažen
    • droppable - pole elementů, nad kterými se tažený element nachází (kurzor myši) a byli widgetu předány jako "droppable"
    • coords - objekt s hodnotami x a y
  • dragdrop-change - vyvoláváno při tažení, pouze v případě, kdy se změní hodnota droppable, tedy uživatel umisťuje element do jiného "droppable". V datovém objektu jsou tyto informace:
    • draggedElm - element, který je tažen
    • droppable - pole elementů, nad kterými se tažený element nachází (kurzor myši) a byli widgetu předány jako "droppable"
    • coords - objekt s hodnotami x a y

Zajímavé jsou ještě hodnoty konfiguračního objektu konstruktoru:

  • helper - určuje co se má zobrazovat pod kurzorem myši. [clone]
    • 'original' - bude táhnuto originálním elementem
    • 'clone' - bude táhnuto klonem originálního elementu
    • function - lze předat funkci, která při zavolání dostane originální element a vrátí element, který bude zobrazen pod kurzorem, jde tedy vytvářet libovolné "duchy"
  • revert - boolean hodnota určuje, zda při upuštění elementu mimo "droppable" element nastane jeho vrácení na původní místo [false]
  • callbackObject - objekt jehož callbackMethod bude volána při puštění elemenntu do "droppable" elementu
  • callbackMethod - string nebo reference na funkci
  • draggableClass - třída, kterou získá element zobrazovaný pod kurzorem myši při tažení
  • revertAnimationSpeed - rychlost animace návratu elementu při hodnotě revert=true. Udává se v px/20ms. [3]

Pomocí těchto ingrediencí je možno uvařit nákupní košík s možností přetáhnutí zboží do něj.

Pokud chceme droppable, tedy košík, zvýraznit při najedí myší při tažení, můžeme využít signálu dragdrop-change a dragdrop-end.

Přidaná funkcionalita je pouze v přidání posluchačů signálů a nastavování CSS třídy košíku:

 JAK.signals.addListener(window, 'dragdrop-change', _dropChange, dd);
 JAK.signals.addListener(window, 'dragdrop-end', _dropEnd, dd);

 //vyvolano pri presunu nad a z kosiku
 function _dropChange(e) {
	 if (e.data.droppable.length > 0) {
		 JAK.DOM.addClass(JAK.gel('kosik'),'dropActive');
	 } else {
		 JAK.DOM.removeClass(JAK.gel('kosik'), 'dropActive');
	 }
 }

 //vyvolano pri pusteni, funkcionalita muze byt
 //misto posluchace signalu implementovana v callback metode
 function _dropEnd(e) {
	JAK.DOM.removeClass(JAK.gel('kosik'), 'dropActive');
 }
Požadované knihovny:
  • jak.js
  • interpolator.js

Stáhnout widget dragdrop.

Super Select

Pro naše potřeby jsme vyvinuli plnohodnotnou náhradu standardního formulářového prvku select. Tento nadstandardní prvek zajištuje widget SuperSelect.

Tento widget umožňuje nahradit standardní HTML prvek select konstrukcí s obdobnou funkcionalitou, ale s větší možností formátování jednotlivých voleb. Zároveň zůstane zachována funkcionalita formuláře, kde k nahrazení došlo.

SuperSelect lze jednoduše použít pro náhradu všech standardních selectů zavoláním statické metody:

	JAK.SuperSelect.replaceAllSelects();

Náhradu za standardní selecty lze omezit na část dokumentu.

	<div id="nahradSelect">
		<select name="ahoj">
			<option>1</option>
		</select>
	</div>
	<script type="text/javascript">
		JAK.SuperSelect.replaceAllSelects('nahradSelect');
	</script>

Pokud potřebuji vytvořit vlastní instanci třídy SuperSelect, mohu v konstruktoru použít následující parametry:

  • select - HTML element <select>, který budeme nahrazovat SuperSelectem
  • name - reprezentuje stejnou vlastnost jako u standardního selectu (název proměnné)
  • data - pole objektů položek option
  • place - element do kterého se připojí vyrobený SuperSelect
  • onlyTextSelected - povolí pouze zobrazení textu
  • optionsRootWidth - šířka rozbalené roletky
  • classNames - asociativní pole CSS tříd pro jednotlivé elementy SuperSelectu

Do již vytvořeného SuperSelectu, lze jednoduše dynamicky přidat další položky option.

Pro přidání jedné položky option se volá metoda addOption s následujícími parametry:

  • optObj - objekt s vlastnostmi elm a value, kde elm je HTML danné položky option a value je hodnota proměnné, která bude odesílána formulářem či ajaxovým requestem
  • index - určuje pozici, na kterou se vkládaný option vloží, pokud nebude zadaný, vloží se na konec

Pro přidání více prvků option najednou lze zavolat metodu addOptions, které předáme pole objektů.

Požadované knihovny:
  • jak.js

Stáhnout widget superselect.

Nápověda

Vytvoření nápovědy ke slovům v textu. Nápověda se otevře v bublině po najetí na daný element.

Připnutí widgetu do stránky:

 <script src="jak.js" type="text/javascript"></script>
 <script src="help.js" type="text/javascript"></script>
	

Vytvoření nápovědy:

Požadované knihovny:
  • jak.js
  • help.js

Stáhnout widget help.

Oddělovač s možností táhnutí

Oddělovač, který umožňuje tažením měnit velikost jednoho z prvků.

Připnutí widgetu do stránky:

 <script src="jak.js" type="text/javascript"></script>
 <script src="separator.js" type="text/javascript"></script>
	

Vytvoření oddělovače:

Požadované knihovny:
  • jak.js
  • separator.js

Stáhnout widget separator.

Tabulka s možností rovnání

Tabulka u které můžeme při kliku do hlavičky řadit vybraný sloupec vzestupně i sestupně.

Připnutí widgetu do stránky:

 <script src="jak.js" type="text/javascript"></script>
 <script src="table.js" type="text/javascript"></script>
	

Použití widgetu na tabulku:

Požadované knihovny:
  • jak.js
  • table.js

Stáhnout widget table.

Tooltip

Tooltip zobrazuje bublinu u prvku v závislosti definovaných na akcích.

Alespoň jeden z vypsaných parametrů musí být zadán (ostatní parametry jsou volitelné):

  • content
  • contentElm
  • contentFromAttribute

Připnutí widgetu do stránky:

 <script src="jak.js" type="text/javascript"></script>
 <script src="tooltip.js" type="text/javascript"></script>
	

Použití widgetu:

Požadované knihovny:
  • jak.js
  • tooltip.js

Stáhnout widget tooltip.

Dvoustavový přepínač

Dvoustavový přepínač ala Apple.

Připnutí widgetu do stránky:

 <script src="jak.js" type="text/javascript"></script>
 <script src="twostateswitch.js" type="text/javascript"></script>
	

Použití widgetu:

Požadované knihovny:
  • jak.js
  • twostateswitch.js

Stáhnout widget twostateswitch.

Uploader

Asynchronní upload souborů, který probíhá pomocí XHR2 případně iframu. Kdy se použije upload pomocí XHR2 a kdy pomocí iframu koresponduje s podorou XHR2 v prohlížeči http://caniuse.com/#feat=xhr2. Vyjímkou je Firefox verze 3.5 a 3.6, kde již je podpora pro XHR2, ale ne podpora pro práci s File API.

Připnutí widgetu do stránky:

<script src="jak.js" type="text/javascript"></script>
<script src="uploader.js" type="text/javascript"></script>
<script src="upload.js" type="text/javascript"></script>
<script src="uploadxhr.js" type="text/javascript"></script>
<script src="uploadiframe.js" type="text/javascript"></script>
	

Příklad použití widgetu:

Adresa "/" pochopitelně nefunguje, takže v případě XHR2 se soubor uploaduje a pak upload selže, zatím co v iframe případě selže rovnou.

Požadované knihovny:
  • jak.js
  • uploader.js
  • upload.js
  • uploadxhr.js
  • uploadiframe.js

Stáhnout widget uploader.

Ukazatel průběhu

Vizualizovat průběhu vykonávaného úkolu. Progress bary známe z operačních systémů, kdy např. při mazání souborů v grafickém rozhraní se nám visuálně ukazuje, kolik procent je z úkolu hotovo. Tento widget si klade za cíl přinést možnost visualizovat průběhy úkolů ve webových aplikacích. Visuálně je sice dosti podobný tagu meter, ale sémanticky správné je použít pro zobrazení průběhu tag progress.

Vychází ze specifikace W3C. Pokud není HTML5 progress dostupný, vytvoří vlastní za pomocí HTML elementů span a em.

Připnutí widgetu do stránky:

<script src="jak.js" type="text/javascript"></script>
<script src="progress.js" type="text/javascript"></script>
	

Příklady použití widgetu:

Požadované knihovny:
  • jak.js
  • progress.js

Stáhnout widget progress.

Meter

Widget má za úkol visualizovat procentuální stav (podílovou hodnotu) mezi aktuálním a maximální hodnotou. Využití najdeme u visualizací stavů, jako jsou např. zaplnění disku, aktuální počet zpráv/maximální počet zpráv, dosažený počet bodů/maximální počet bodů, atd... Vychází ze specifikace W3C. Pokud není HTML5 meter dostupný, vytvoří vlastní za pomocí HTML elementů span a em.

Pro funkci widgetu je potřeba připnout do stránky tyto soubory:

<link type="text/css" rel="stylesheet" href="meter.css" />
<script src="jak.js" type="text/javascript"></script>
<script src="meter.js" type="text/javascript"></script>
		

Nyní můžeme widget inicializovat následujícím způsobem:

var meter = new JAK.Meter({max:100, value:10});
var container = meter.getContainer();
document.querySelector('#meterWrap').appendChild(container);
		

Výsledek bude vypadat takto:

Vlastnosti widgetu lze ovlivnit těmito parametry:

  • max - nastavuje maximum, tedy maximální možnou hodnotu, kterou lze zadat jako value
  • value - nastavuje ukazatel na aktuální hodnotu
  • min - nastavuje minimum, tedy minimální hodnotu, kterou lze zadat jako value
  • low - nastavuje hodnotu, do které je aktuální hodnota považována za příliš malou (v případě ne-HTML5 verze meteru se obalujícímu prvku přiřadí CSS třída value-critical, přes kterou lze tento stav nastylovat)
  • optimal - nastavuje hodnotu, ve které je stav považován za optimální (v případě ne-HTML5 verze meteru se obalujícímu prvku přiřadí CSS třída value-optimal, přes kterou lze tento stav nastylovat)
  • high - nastavuje hodnotu, od které je aktuální hodnota považována za příliš velkou (v případě ne-HTML5 verze meteru se obalujícímu prvku přiřadí CSS třída value-critical, přes kterou lze tento stav nastylovat)

Pro následnou práci s ukazatelem poskytuje vytvořená instance widgetu sadu metod:

  • getContainer - vrací HTML element s vytvořeným meterem
  • setValue - nastavuje hodnotu ukazatele
  • setMax - nastavuje maximální možnou hodnotu
  • setMin - nastavuje minimální možnou hodnotu
  • setOptimum - nastavuje hodnotu, ve které je stav považován za optimální
  • setHigh - nastuje hodnotu, od které je aktuální hodnotu považována za příliš velkou
  • setLow - nastavuje hodnotu, do které je aktuální hodnota považována za příliš malou
  • getValue - vrací aktuální hodnotu
  • getMax - vrací nastavenou max hodnotu
  • getMin - vrací nastavenou min hodnotu
  • getOptimum - vrací nastavenou optimum hodnotu
  • getHigh - vrací nastavenou high hodnotu
  • getLow - vrací nastavenou low hodnotu

Následující ukázka ilustruje chování meteru s nastavením všech dostupných parametrů:

var meter = new JAK.Meter({min:0, max:100, value:10, low:20, optimum:50, high:80});
var container = meter.getContainer();
document.querySelector('#meterWrap').appendChild(container);
	

Požadované knihovny:

  • jak.js
  • meter.js

Stáhnout widget meter.

Čárový a sloupcový graf

Widget pro vyrobení čárového nebo sloupcového grafu.

Konstruktoru grafu se předávají nejméně tři parametry:

  • id - string - id prvku, do kterého se graf vlozi
  • data - object - {data: pole hodnot, label: název datové sady, marker: potomek třídy JAK.Marker, type: bar/line, color: barva (volitelě), style: styl pro čáru (JAK.Vector.STYLE_*) (volitelně)}
  • labels - object - pole popisující osu X. Každá položka je buď jen popisek, nebo objekt {label: popisek, color: barva svislé čáry, width: šířka svislé čáry}
  • options - object - asociativní pole parametrů (volitelné)

Konfigurační parametry (v závorce jsou uvedeny výchozí hodnoty):

  • padding - int - Vycpávka (30)
  • rows - object - {count: přibližný počet vodorovných řádek, color: barva vodorovných řádek}
  • legend - object - {draw: [false|left|top|right|bottom] zda-li a kde kreslit legendu, width: šířka a výška prvků legendy, vertical: mají-li být prvky legendy pod sebou}
  • markerSize - int - Velikost značky (8)
  • barWidth - int - Šířka sloupce (10)
  • barMinSize - int - Minimální výška sloupce v pixelech (0)
  • lineWidth - int - Šířka čáry (1)
  • min - Minimální hodnota, null=auto (null)
  • max - Maximální hodnota, null=auto (null)
  • outlineWidth - int - Šířka orámování sloupce (1)
  • zero - Má-li graf zahrnovat nulu (false)
  • merge - Maji-li se sloupce kreslit pres sebe (false)
  • axes - {draw: bool mají-li se vykreslit osy, color: barva os}
  • format - Formátovač popisků osy Y. Při nezadání se použije identita (null)
  • colors[] - Pole barev
  • pointer=false - Zobrazovat svislou dynamickou čáru?

Veřejné metody:

  • scale() - škálovací funkce
Požadované knihovny:
  • jak.js
  • graphics.js
  • lbchart.js

Stáhnout widget lbchart.

Koláčový graf

Widget pro vykreslení koláčového grafu

Ke své práci potřebuje widget následující soubory:

<script src="jak.js" type="text/javascript"></script>
<script src="geometry.js" type="text/javascript"></script>
<script src="vector.js" type="text/javascript"></script>
<script src="svg.js" type="text/javascript"></script>
<script src="piechart.js" type="text/javascript"></script>
		

Graf můžeme využít například pro zobrazení procentuálního zastoupení jednotlivých prohlížečů na trhu:

V příkladu je vidět nastavení widgetu. Ten přijímá dva povinné a jeden volitelný parametr.

  • id - id prvku, do kterého se má graf vykreslit, tento prvek musí mít nastavené rozměry
  • data - data grafu, pole objektů s vlastnostmi "label" a "data"
  • options - volitelné parametry ovlivňující výsledný vzhled grafu:
    • padding - odsazení od okrajů elementu, do kterého byl graf vykreslen
    • skew - číslo od 0 do 1 udávájící vertikální zešikmení grafu
    • depth - výška koláče
    • legendWidth - velikost čtverečku s legendou
    • legendDistance - vzdálenost legendy od okraje koláče
    • legend - pozice legendy, možné hodnoty jsou left, right, top, bottom a false (nevykreslovat legendu)
    • prefix - řetězec, který se vypíše před každou hodnotou
    • suffix - řetězec, který se vypíše za každou hodnotou (např. Kč, % apod.)
    • outlineColor - barvy rámečků, parametrem je objekt s vlastnostmi graph a legend (obě nutno zadat!)
    • colors - pole barev pro jednotlivé položku v grafu v RBG formátu.

Požadované knihovny:

  • jak.js
  • geometry.js
  • vector.js
  • svg.js
  • piechart.js

Stáhnout widget piechart.