Widgety postavené na knihovně JAK

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

Kalendář

Widget kalendáře je jednoduše připojitelný na libovolný počet textových inputů. Např. 

<input type="text" id="calendar_value" name="calendar_value" />
<script type="text/javascript">
	JAK.Calendar.setup("calendar_icon.gif", "[vybrat datum]", {}, "calendar_value");
</script>

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

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

Pokročilé datum složené z inputu pro datum a čas je možné obsluhovat kalendářem, který je vyvolán takto:

	<input type="text" id="calendar_value" name="calendar_value" />
	<script type="text/javascript">
		JAK.Calendar.setup(	"/img/widgets/calendar/calendar_icon.gif",
							"vybrat datum",
							{ pickTime: true,
							  defaultFormat: ['j.n.Y', 'H:i']
							},
							["cdate", "ctime"]);
	</script>

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ů.

Mějme tři inputy na datum, hodinu a čas: : vytvoříme pro ně kalendář pomocí zmíněné třídy. Ta umožňuje čtení dvou a tří inputů v konfiguraci [datum] a [čas], nebo [datum], [hodina] a [minuta]. Použití výchozí třídy vypadá takto:

	<input type="text" id="calendar_value" name="calendar_value" />
	<script type="text/javascript">
		JAK.Calendar.Setup.setup("calendar_icon.gif", "vybrat datum", {pickTime: true, defaultFormat:["j.n.Y", "H","i"]}, ["cd","ch","cm"]);
	</script>

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

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

Požadované knihovny:

Stáhnout widget calendar.zip.

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:

12345

 <p id="ranker"><a href="/req_rank.txt?1"><span>1</span></a><a href="/req_rank.txt?2"><span>2</span></a><a href="/req_rank.txt?3"><span>3</span></a><a href="/req_rank.txt?4"><span>4</span></a><a href="/req_rank.txt?5"><span>5</span></a></p>
 <script type="text/javascript">
 	new JAK.Rank("ranker", {ajax: true, post: false,selectedClass:"selected"});
 </script>

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

CSS styly k příkladu vypadají takto:

#ranker				{display: block; height: 17px; width: 110px;}
#ranker a			{display: block; width: 17px; height: 17px; border: 1px solid gray; text-decoration: none; float: left; margin-left: 3px;}
#ranker a span			{margin-left: 5px;}

p#ranker a.rank-active		{background-color: #cc33cc;}
p#ranker a.disabled		{color: black; }
p#ranker a.selected		{background-color: gold;}
p.rank-active a			{background-color: #ffccff;}

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:

Stáhnout widget rank.zip.

Editor

V dnešní době se již žádná administrace neobejde bez alespoň jednoduchého vizuálního HTML editoru. Jistě každý zná FCKEditor, nebo Tiny MCE, nebo jiné. Vetšinou se jedná o velké balíky, které se mohou pomalu načítat a navíc nevyužívají žádných knihoven a proto při jejich použití vzniká duplikování funkčního kódu. Proto jsme postavili právě nad knihovnou JAK jednoduchý HTML editor.

Editor využívá funkčnosti prohlížečů a tedy generuje kód ve XHTML 1.0 Transitional. Funguje ve všech prohlížečích podporovaných JAKem (IE, FireFox, Opera) vyjma Konqueroru, který nemá podporu pro editaci.

Pro přidání editoru do stránky je nutné vytvořit jednu textareu s vlastním id a vložit do stránky kód v příkladu:

 <textarea rows="8" cols="50" id="htmlEditor"></textarea>
 <script type="text/javascript">
 var formatOpt = [
 	{innerHTML:"<h1 style='margin:0px;padding:0px;'>Nadpis 1</h1>", value:"h1"},
 	{innerHTML:"<h2 style='margin:0px;padding:0px;'>Nadpis 2</h2>", value:"h2"},
 	{innerHTML:"<p style='margin:0px;padding:0px;'>Odstavec</p>", value:"p"}
 ];

 var controls = [
 	{type:"html",text:"Editovat HTML"},
 	 {type:"bold",text:"Tučné"},
 	{type:"italic",text:"Kurzíva"},
 	{type:"underline",text:"Podtržené"},
 	{type:"strikethrough",text:"Přeškrtnuté"},
 	{type:"format",text:"Formát", options: formatOpt}
 ];

 var opts = { controls:controls, imagePath:"/img/widgets/editor/" };
 var e = new JAK.Editor("htmlEditor",opts);
 </script>

Vlastní přidání editoru do stránky je provedeno posledním řádkem kódu, kde je volán konstruktor editoru. Ten přebírá dva paremetry:

Tento kód přidá jednoduchý editor. Popis pokročilých voleb a pluginů je na samostatné stránce.

Upozornění: Na fóru se množí dotazy na použití editoru v tabulkovém designu, zejména v Internet Exploreru. Internet Explorer renderuje tabulky vždy celé, tedy až dojde ke koncové značce table. Iniciallizační skript editoru tedy musí být vždy až za tabulkou, ve které se nachází textarea, kterou má nahradit! Pokud jsou tabulky zanořené, tak samozřejmě musí být až za vnější tabulkou. V opačném případě není textarea vyrenderovaná, má nulové rozměry a editor ji nemůže nahradit.

Druhou možností jak se tomu vyhnout je volání inicializace editoru obalit do funkce a tu volat pomocí onDomReady události.

Požadované knihovny:

Stáhnout widget editor.zip.

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:

 //vytvoreni okna
 var params = {};
 var w = new JAK.Window(params);
 //nastaveni 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):

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. Vyskakovací okno lze zobrazit po stisknutí .

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:

Stáhnout widget window.zip.

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):

 	var optObj = {imagePath: '/img/imagebrowser/', width: 800, height: 600,thumbWidth: 40, thumbHeight: 40, useShadow: true};
 	var g = new JAK.ImageBrowser('gallery', data, optObj);

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.

Požadované knihovny:

Stáhnout widget imagebrowser.zip.

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:

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

 var g = JAK.LightBox.create('gallery3', opt);

Galerie je nastylována tímto kaskádovým stylem:

/*uzivatel musi mit na pameti ze chceme videt scrollbar vzdy, proto je nutne ho mit zapnuty a pocitat s jeho sirkou 17px!!!*/
/*tedy sirka galerie musi byt o 17px vice a sirka thmbus pole take, pokud je vse nalezato tak se jedna o vysku*/

/*rozmery galerie*/
#lightBox 							{background-color: black; width: 920px; height: 462px; padding-top:10px; padding-left: 10px; padding-right: 10px;}
#lightBox .image-browser-image					{width: 800px; height: 450px; border: 1px solid #333; overflow: hidden; padding: 0px; float: left; position: relative;}
/*nahledovy pas*/
#lightBox .image-browser-thumbs					{width: 117px;height: 452px; overflow-y:scroll; float: right;}
#lightBox .image-browser-thumbs table				{border-collapse:separate; border-spacing:3px 3px;}
#lightBox .image-browser-thumbs td				{padding: 0px; border: 1px solid #333;}
#lightBox .image-browser-thumbs .image-browser-thumb-box	{height: 55px; width: 100px; margin: 0px; padding: 0px;}
/*ramecek okolo aktivniho nahledu*/
#lightBox .image-browser-active					{border: 3px solid red;}

/*zasednuti pod galerii*/
div.image-browser-root 						{ _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/bg.png', sizingMethod='scale' );}
div[class~="image-browser-root"] 				{ background: url(/img/widgets/lightbox/bg.png); }

/*ovladaci tlacitka*/
#lightBox .image-browser-prev 					{ position: absolute; top: 20px; left: 20px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(/img/widgets/lightbox/lb-previous-active.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-previous-active.png'));}
#lightBox .image-browser-prev:hover				{ background: url(/img/widgets/lightbox/lb-previous-hover.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-previous-hover.png')); }
#lightBox .image-browser-next 					{ position: absolute; top: 20px; left: 66px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(/img/widgets/lightbox/lb-next-active.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-next-active.png')); }
#lightBox .image-browser-next:hover				{ background: url(/img/widgets/lightbox/lb-next-hover.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-next-hover.png')); }
#lightBox .image-browser-prev-disabled				{ position: absolute; top: 20px; left: 20px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(/img/widgets/lightbox/lb-previous-inactive.png); _background: none;  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-previous-inactive.png')); }
#lightBox .image-browser-next-disabled				{ position: absolute; top: 20px; left: 66px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(/img/widgets/lightbox/lb-next-inactive.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-next-inactive.png')); }
#lightBox .image-browser-close					{ position: absolute; top: 20px; left: 760px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(/img/widgets/lightbox/lb-close-active.png); _background:none ;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-close-active.png'));}
#lightBox .image-browser-close:hover				{ background: url(/img/widgets/lightbox/lb-close-hover.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/widgets/lightbox/lb-close-hover.png'));}

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:

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

Tato knihovna je dostupná v interpolators.zip

Stáhnout widget lightbox.zip.

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.

Například souřadnice žlutého boxu předávané do skrytého pole:

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

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

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:

Požadované knihovny:

Stáhnout widget imagecropper.zip.

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.

Pro vytvoření objektu obsluhující záložky stačí zavolat:

 var tabs = new JAK.Tabs("tabContainer");

Poté stačí zadat jednotlivé záložky tak, že voláme metodu addTab které předáme ID záložky a ID obsahu divu:

 tabs.addTab("sourceHTMLTab", "sourceHTML");
 tabs.addTab("sourceJSTab", "sourceJS");
 //jaky tab bude zobrazen
 tabs.go(0);

Voláním metody go() určujeme pořadové číslo záložky, která bude zobrazena. Číslujeme od 0.

V HTML je nutné vytvořit seznam (UL), který bude tvořit ouška záložek:

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

a pak obsah nejlépe umístěný v DIVech:

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

Poslední věc, kterou musíme udělat, je přidat do stránky kontejner, ve kterém budeme zobrazovat obsahové DIVy.

 <div id="tabContainer"></div>

Další záložky lze přidávat do stránky i po načtení stránky. Po kliknutí na bude přidána třetí záložka se vzorovým CSS.

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:

Stáhnout widget tabs.zip.

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.

Na textové formulářové pole je aplikován widget výběru barvy jednoduchým JavaScriptem:

 JAK.ColorPicker.setup("/img/colorpicker.gif", "[vybrat barvu]", {imagePath: "/img/widgets/colorpicker/"}, "mojeUnikatniId");

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

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:

Stáhnout widget colorpicker.zip.

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.

Vyberte svůj

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:

Stáhnout widget betterselect.zip.

Ř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í.

Pořadí obrázků po jejich přehození je: .

Při přetažení obrázků změní polohu i odpovídající DIVy.

1
2
3
4

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

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

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

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:

Stáhnout widget reorder.zip.

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>

Jelikož je konzole napsána tak, aby automaticky startovala po načtení stránky, můžete si ji prohlédnout na vlastní stránce. 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.

Požadované knihovny:

Stáhnout widget console.zip.

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:

Příklad výše byl vytvořen jednoduchým voláním konstruktoru s těmito parametry:

 var s = new JAK.Slider("sliderDiv",{
   	input: 'sliderOutput'
 });

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:

 var s2 = new JAK.Slider("sliderDiv2",{
   	input: 'sliderOutput2',
   	min: 1,
   	max: 12,
   	step: 0.5,
   	separator: ',',
 	decimal: 1
 });

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:

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

A výsledek:

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

DIV, jehož velikost je ovládána dvěmi slidery
 var s3 = new JAK.Slider("sliderDiv3",{mainSliderClassName: 'graphicsSlider'});
 var s4 = new JAK.Slider("sliderDiv4",{mainSliderClassName: 'graphicsSlider', mode: 'vertical', width: 15, height: 100, riderW: 22, riderH: 10});
		
 function resizeHorizontal(o) {
 	JAK.gel('resizableBox').style.width = o.target.actualValue+'px';
 }
 JAK.signals.addListener(window, 'change', 'resizeHorizontal', s3 );

 function resizeVertical(o) {
 	JAK.gel('resizableBox').style.height = o.target.actualValue+'px';
 }
 JAK.signals.addListener(window, 'change', 'resizeVertical', s4 );

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.

 var s5 = new JAK.Slider("sliderDiv5",{mainSliderClassName: 'buttonSlider'});

Obě třídy jdou samozřejmě kombinovat, tudíž můžeme mít tlačítka plus a mínus a obrázkového jezdce zároveň.


 var s6 = new JAK.Slider("sliderDiv6",{mainSliderClassName: 'buttonSlider graphicsSlider', mode: 'vertical', width: 15, height: 100, riderW: 22, riderH: 10});
Požadované knihovny:

Stáhnout widget slider.zip.

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ů:

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>

Vytvoření stromu ze zdrojových dat:

 //data pro vytvoreni stromu
 var treedata = {
	title:'Kořen kategorií',
	id: 'root',
	visualizer: 'Lines',
	nodeClass: JAK.Tree.Node,
	childNodes: [
			{
				id: 'tst1',
				title:'List AAA',
				childNodes: [],
				nodeClass: JAK.Tree.Leaf
			},
			{
				id: 'tst2',
				title:'Kategorie BBB',
				nodeClass: JAK.Tree.Node,
				childNodes: [
					{
						id: 'tst3',
						title:'uzel v kategorii BBB',
						nodeClass: JAK.Tree.Leaf
					}
				]

			},
			{
				id: 'tst4',
				title:'Kategorie CCC',
				nodeClass: JAK.Tree.Node,
				childNodes: [
					{
						id: 'tst5',
						title:'Uzel 1',
						nodeClass: JAK.Tree.Leaf
					},
					{
						id: 'tst6',
						title:'Uzel 2',
						nodeClass: JAK.Tree.Leaf
					}
				]

			}
		]
	 };

 //vytvoření struktury stromu
 var treeBuilder = new JAK.Tree.Builder(treedata);
 var rootNode = treeBuilder.build();

 //vytvoreni HTML struktury a jeji pripnuti do stranky
 var n = rootNode.visualize();
 JAK.gel("strom").appendChild(n);

 //rozevreni korenove kategorie
 rootNode.expand();

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:

Stáhnout widget tree.zip.

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:

Widget také vysílá signály:

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

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

Nákupní košík:

contrastcolorpicker

Celá funkčnost je aplikována na toto HTML a CSS:

 <style type="text/css">
 .zbozi			{display: block;}
 .zbozi li		{display: block; border: 1px solid #1B3663; background-color: #D0DFF9; width: 80px; height: 18px; padding: 3px; cursor: move;}

 li.draggable	{display: block; border: 1px solid #D0DFF9; background-color: white; width: 80px; height: 18px; padding: 3px; cursor: move;}

 .kosik			{width: 100px; height: 100px; border: 1px solid black; overflow: auto;}
 </style>

	<ul id="zbozi" class="zboz">
		<li id="jablko">Jablko</li>
		<li id="hruska">Hruška</li>
		<li id="pomeranc">Pomeranč</li>
	</ul>


	<p><strong>Nákupní košík:</strong></p>
	<ul id="kosik" class="kosik"></ul>

tímto Javascriptem:

 //vytvoreni instance DragDrop
 var dd = new JAK.DragDrop({revert:true, callbackObject: window, callbackMethod: '_basketDrop'});

 //pridani elementu, ktere jdou pretahovat
 var draggables = JAK.query('#zbozi li');
 for (var i = 0; i < draggables.length; i++) {
 	dd.addDraggable(draggables[i]);
 }

 //pridani elementu, do ktereho jde poustet (kosik)
 dd.addDroppable(JAK.gel('kosik'));

 /**
  * funkce zavolana pri pridani zbozi do kosiku
  * @param draggedElm
  * @param cloneElm
  * @param drops
  */
 function _basketDrop(draggedElm, cloneElm, drops) {
	//pouzivame klon, pod kurzorem, je nutne ho zrusit
	cloneElm.parentNode.removeChild(cloneElm);

	//kosiky se neprekryvaji, tudiz mame vzdy jen jeden
	var basket  = drops[0];

	//podle tazeneho elementu si vytvorime novy, ktery pripneme do kosiku
	var zbozi = JAK.mel('li', {innerHTML: '1× ' + draggedElm.innerHTML});
	basket.appendChild(zbozi);
 }

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.

Nákupní košík:

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:

Stáhnout widget dragdrop.zip.

Contrast Control

Jelikož jsme na našich službách museli několikrát použít kontrolu kontrastů různých barev, rozhodli jsme se poskytnout toto řešení jako widget.

Jednoduchou kontrolu kontrastu dvou barev lze použít zavoláním jedné metody "JAK.ContrastControl.check()", které se předají 3.parametry.

Příklad jednoduchého použití kontroly dvou barev: 

 JAK.ContrastControl.check('000000', '000000', 3);

Po kliknutí na se porovnají dvě černé barvy s tolerancí 3. Výstupem je boolean hodnota. Pokud jsou barvy dostatečně kontrastní, je hodnota true, jinak false.

"ContrastControl" má nasledující konfiguraci:

Použit "ContrastControl" jako samotný widget lze jednoduše. Zde je ukázka jeho použití:

	<!--- Inputy pro zadávání barev skrz ColorPicker --->
	<div id="inputs1">
		<div><input type="text" name="maslo1" id="bgcolor1" /> - pozadi</div>
		<div><input type="text" name="maslo2" id="txtcolor1" /> - text</div>
	</div>
	<!--- Element pro vkladani chybových hlášek --->
	<div id="contrastErrorMsgs1"></div>
	<script type="text/javascript">
		/*- vybrání inputu pro zadávání barev -*/
		var cInputs = JAK.gel('inputs1').getElementsByTagName('input');
		/*- configurace -*/
		var contrastOpt1 = {
			inputs : cInputs,
			errorsElm : 'contrastErrorMsgs1',
			tolerance : 3,
			contrastDepends : { 'txtcolor1' : ['bgcolor1'] },
			dict : {
				'txtcolor1' : 'Barva pozadí není dostatečně kontrastní s barvou textu.',
				'ok' : 'Všechny barvy jsou dostatečně kontrastní mezi sebou.'
			},
			specialColors : [ { color : '#999999', depend : ['bgcolor1'], dict : 'Speciální barva není dostatečně kontrastní s barvou pozadí.' } ]
		};
		/*- vytvoření instance -*/
		new JAK.ContrastControl(contrastOpt1);
	</script>
#999999 (tuto barvu nelze uživatelem měnit, je nastavena v konstruktoru)
Požadované knihovny:

Stáhnout widget contrast.zip.

Pro komplexnější použití můžeme využít i další widget "ColorPicker" ve spolupráci s "ContrastControlem".

	<!--- Inputy pro zadávání barev skrz ColorPicker --->
	<div id="inputs">
		<div>
			<input type="text" class="cp_getter" name="maslo1" id="bgcolor" />
			<img src="./colorpicker.gif" class="cp_launcher" /> - pozadi
		</div>
		<div>
			<input type="text" class="cp_getter" name="maslo2" id="txtcolor" />
			<img src="./colorpicker.gif" class="cp_launcher" /> - text
		</div>
	</div>
	<!--- Element pro vkladani chybových hlášek --->
	<div id="contrastErrorMsgs"></div>

	<script type="text/javascript">
		/*- instance colorpickeru -*/
		var colorpicker = new JAK.ColorPicker({imagePath: "./colorpicker/"});
		/*- vybrání obrázků pro spouštění colorpickeru -*/
		var cpImgs = JAK.DOM.getElementsByClass('cp_launcher',null,'img');
		/*- vybrání inputu pro zadávání barev -*/
		var cpInputs = JAK.DOM.getElementsByClass('cp_getter',null,'input');
		/*- propojení colorpickeru s inputy a obrázky -*/
		for(var i=0;i<cpImgs.length;i++){
			JAK.ColorPicker.manage(colorpicker,cpImgs[i],cpInputs[i]);
		}
		/*- configurace -*/
		var contrastOpt = {
			catchSignal : 'colorselect', /*- signál který se chytá -*/
			inputs : cInputs, /*- inputy pro porovnávání jejich hodnot barev -*/
			errorsElm : 'contrastErrorMsgs', /*- element pro chybové hlášky -*/
			tolerance : 3, /*- tolerance porovnávání -*/
			contrastDepends : { 'txtcolor' : ['bgcolor'] }, /*- závislosti barev při porovnávání -*/
			dict : {
				'txtcolor' : 'Barva pozadí není dostatečně kontrastní s barvou textu.',
				'ok' : 'Všechny barvy jsou dostatečně kontrastní mezi sebou.'
			}, /*- slovník chybových hlášek pro jednotlivé závislosti -*/
			specialColors : [ { color : '#999999', depend : ['bgcolor'], dict : 'Speciální barva není dostatečně kontrastní s barvou pozadí.' } ] /*- speciální barvy pro porovnávání se všemi barvami -*/
		};
		/*- vytvoření instance -*/
		new JAK.ContrastControl(contrastOpt);
	</script>

Ukázka použití:

#999999 (tuto barvu nelze uživatelem měnit, je nastavena v konstruktoru)
Požadované knihovny:

Stáhnout widget contrastcolorpicker.zip.

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>

Ukázka použití:

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

	/*- element pro vlozeni superSelectu -*/
	<div id="ssPlace1"></div>
	/*- vytvoreni nove instance superSelectu s daty -*/
	<script type="text/javascript">
		var ss = new JAK.SuperSelect(
			{
				data: [
					[{elm: '<span><img src="/img/gallery/tn04.jpg"><span class="imgName">f32d036bf2fa34e6fb1c403549de601a</span></span>', value:'test'}],
					[{elm: '<span><img src="/img/gallery/tn03.jpg"><span class="imgName">asdasdllklasjldiopuio312948</span></span>', value:'test'}],
					[{elm: '<span><img src="/img/gallery/tn02.jpg"><span class="imgName">6354236454wf234asdf65asdf2</span></span>', value:'test'}],
					[{elm: '<span><img src="/img/gallery/tn01.jpg"><span class="imgName">87987qwer889qwer89qw7erasdf</span></span>', value:'test'}],
					[{elm: JAK.ctext('best'), value: 'best', selected : true}]
				],
				place: JAK.gel('ssPlace1'),
				classNames : {
					select : 'superSelect',
					focus  : 'superSelFocus',
					options: 'superSelOptions',
					option : 'superSelOption',
					active : 'optActive'
				}
			}
		);
	</script>

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:

	/*- element pro vlozeni superSelectu -*/
	<div id="ssPlace2"></div>
	/*- vytvoreni nove instance superSelectu s daty -*/
	<script type="text/javascript">
		var ss = new JAK.SuperSelect(
			{
				data: [
					[{elm: '<span><img src="/img/gallery/tn04.jpg"><span class="imgName">f32d036bf2fa34e6fb1c403549de601a</span></span>', value:'test'}],
					[{elm: '<span><img src="/img/gallery/tn03.jpg"><span class="imgName">asdasdllklasjldiopuio312948</span></span>', value:'test'}],
					[{elm: '<span><img src="/img/gallery/tn02.jpg"><span class="imgName">6354236454wf234asdf65asdf2</span></span>', value:'test'}],
					[{elm: '<span><img src="/img/gallery/tn01.jpg"><span class="imgName">87987qwer889qwer89qw7erasdf</span></span>', value:'test'}],
					[{elm: JAK.ctext('best'), value: 'best', selected : true}]
				],
				place: JAK.gel('ssPlace2'),
				classNames : {
					select : 'superSelect',
					focus  : 'superSelFocus',
					options: 'superSelOptions',
					option : 'superSelOption',
					active : 'optActive'
				}
			}
		);
		/*- pridani jednoho optionu -*/
		ss.addOption({ elm : '<p><img src="http://www.seznam.cz/st/img/logo-2.gif" alt="" title="" height="60" /> Seznam.cz</p>', value : 33}, 2);
	</script>

Pro přidání více prvků option najednou lze zavolat metodu addOptions, které předáme pole objektů stejných jako u předchozí metody.

	/*- element pro vlozeni superSelectu -*/
	<div id="ssPlace3"></div>
	/*- vytvoreni nove instance superSelectu s daty -*/
	<script type="text/javascript">
		var ss = new JAK.SuperSelect(
			{
				data: [
					[{elm: '<span><img src="/img/gallery/tn04.jpg"><span class="imgName">f32d036bf2fa34e6fb1c403549de601a</span></span>', value:'test'}],
					[{elm: '<span><img src="/img/gallery/tn03.jpg"><span class="imgName">asdasdllklasjldiopuio312948</span></span>', value:'test'}],
					[{elm: '<span><img src="/img/gallery/tn02.jpg"><span class="imgName">6354236454wf234asdf65asdf2</span></span>', value:'test'}],
					[{elm: '<span><img src="/img/gallery/tn01.jpg"><span class="imgName">87987qwer889qwer89qw7erasdf</span></span>', value:'test'}],
					[{elm: JAK.ctext('best'), value: 'best', selected : true}]
				],
				place: JAK.gel('ssPlace3'),
				classNames : {
					select : 'superSelect',
					focus  : 'superSelFocus',
					options: 'superSelOptions',
					option : 'superSelOption',
					active : 'optActive'
				}
			}
		);
		/*- pridani vice optionu -*/
		ss.addOptions([[{ elm : '<p><img src="http://www.seznam.cz/st/img/logo-2.gif" alt="" title="" height="60" /> Seznam.cz</p>', value : 33}, 3], [{ elm : '<p><img src="http://login.szn.cz/img/sklik-logo.png" alt="" title="" height="60" /> Seznam.cz</p>', value : 333}, 4]]);
	</script>
Požadované knihovny:

Stáhnout widget superselect.zip.

Copyright © 1996–2012, Seznam.cz, a.s.
Seznam – Fórum – GitHub