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">
	SZN.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">
		SZN.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ě SZN.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">
		SZN.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 SZN.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 XMLHTTPRequest. 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 SZN.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 SZN.Window(params);
 //nastaveni obsahu
 var txt = SZN.cTxt("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 SZN.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 SZN.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: SZN.LightBox.Strip.Scrollable,
 		navigation: SZN.LightBox.Navigation.Basic,
 		anchorage: SZN.LightBox.Anchorage.Fixed,
 		main: SZN.LightBox.Main.CenteredScaled
 	}
 };

 var g = SZN.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:

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 SZN.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 SZN.Tabs("tabContainer");

Poté stačí zadat jednotlivé záložky tak, že voláme metodu addClass 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:

 tabs.addManyTabs("testTabs", "sources");
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:

 SZN.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 SZN.Color. Ukázka využití:

 SZN.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 SZN.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 SZN.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) {
 	SZN.gEl("galleryReorderRank").innerHTML =arr.toString();

 	var g = SZN.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 SZN.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 SZN.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 SZN.Slider("sliderDiv3",{mainSliderClassName: 'graphicsSlider'});
 var s4 = new SZN.Slider("sliderDiv4",{mainSliderClassName: 'graphicsSlider', mode: 'vertical', width: 15, height: 100, riderW: 22, riderH: 10});
		
 function resizeHorizontal(o) {
 	SZN.gEl('resizableBox').style.width = o.target.actualValue+'px';
 }
 SZN.signals.addListener(window, 'change', 'resizeHorizontal', s3 );

 function resizeVertical(o) {
 	SZN.gEl('resizableBox').style.height = o.target.actualValue+'px';
 }
 SZN.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 SZN.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 SZN.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: SZN.Tree.Node,
	childNodes: [
			{
				id: 'tst1',
				title:'List AAA',
				childNodes: [],
				nodeClass: SZN.Tree.Leaf
			},
			{
				id: 'tst2',
				title:'Kategorie BBB',
				nodeClass: SZN.Tree.Node,
				childNodes: [
					{
						id: 'tst3',
						title:'uzel v kategorii BBB',
						nodeClass: SZN.Tree.Leaf
					}
				]

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

			}
		]
	 };

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

 //vytvoreni HTML struktury a jeji pripnuti do stranky
 var n = rootNode.visualize();
 SZN.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.

Copyright © 1996 - 2010, Seznam.cz, a.s.
Seznam - Fórum - GitHub