Diskuse JPW: Nový "input element" loader

	Autor	Zpráva
	Witus Profil *	#1 · Zasláno: 11. 5. 2008, 15:26:55 Odpovědět Citovat Protože celkem často si pohrávám s tvorbou DHTML aplikací, celkem mi chybí cokoliv co připomíná loader. A tak jsem si napsal takový s nadsázkou "engine" který umožňuje použít grafický loader jako buď ukazatel postupu, nebo jako vstupní zařízení, kdy klikáte na loader a on předává info o změně voláním funkce, která se dá nejlépe přirovnat k listeneru v javě. Rád bych věděl co si o tom myslíte :) V akci to můžete vidět tady: http://doodoo.wz.cz/loader , změny můžete vidět po klikání na loadery v statusbaru. Jak to funguje? Na začátku je třeba definovat několik proměnných, které se vážou k loaderu. Pokud se bude loader jmenovat pepa, tak se musí zadat něco takového: pepa_startvalue=0; //počáteční hodnota ukazatele pepa_readonly=true; //určuje, je-li možné měnit hodnotu ukazatele - tuto vlastnost můžete měnit i za běhu programu. pepa_style="0"; //určuje sadu obrázků, která se použije (v příkladu používám sadu obrázků 0.gif, 0_konec.gif, 0_konec_plne.gif, 0_plne.gif, 0_zacatek.gif, 0_zacatek_plne.gif) pepa_run=false; //nutné zadat vždy, je možné podle hodnoty true/false zistit, jestli byl loader inicializován pepa_width=1; //určuje šířku jednoho segmentu loaderu pepa_height=23; //určuje výšku jednoho segmentu loaderu poté je nutné vytvořit funkci listeneru: function OnValueChange(name,value) { alert("Právě byla změněna hodnota loaderu '" + name + "' na " + value + "%"); } a samozřejmě je třeba nahrát do dokumentu knihovnu funkcí: <script type="text/javascript" src="library.js"></script> function StartLoader(name) { try{ if(!window[name + "_run"]){ count=1; while(count<=100){ document.getElementById(name + "_" + count).src=window[name + "_style"] + ".gif"; document.getElementById(name + "_" + count).width=window[name + "_width"]; document.getElementById(name + "_" + count).height=window[name + "_height"]; count++; } document.getElementById(name + "_zacatek").src=window[name + "_style"] + "_zacatek.gif"; document.getElementById(name + "_konec").src=window[name + "_style"] + "_konec.gif"; document.getElementById(name + "_zacatek").height=window[name + "_height"]; document.getElementById(name + "_konec").height=window[name + "_height"]; window[name + "_current"]=0; SetLoaderValue(name,window[name + "_startvalue"]); window[name + "_run"]=true; } } catch(e) {alert("Došlo k chybě při načítání loaderu '" + name + "'!\n\nInfo o chybě:\n" + e);} return window[name + "_run"]; } function SetLoaderValue(name,value) { try{ value=Math.round(Number(value)); if(value>100){value=100;} if(value<0){value=0;} window[name + "_current"]=Number(window[name + "_current"]); if(window[name + "_current"]>value){window[name + "_rozmezi"]=window[name + "_current"]-value;window[name + "_change"]="odmazavani";} if(window[name + "_current"]<value){window[name + "_rozmezi"]=value-window[name + "_current"];window[name + "_change"]="pridavani";} if(window[name + "_current"]==value)window[name + "_rozmezi"]=0; if(window[name + "_rozmezi"]!=0){ if(window[name + "_change"]=="odmazavani"){ while(window[name + "_current"]>value){ document.getElementById(name + "_" + window[name + "_current"]).src=window[name + "_style"] + ".gif"; window[name + "_current"]=window[name + "_current"]-1; } } if(window[name + "_change"]=="pridavani"){ if(window[name + "_current"]==0)window[name + "_current"]++; while(window[name + "_current"]<=value){ document.getElementById(name + "_" + window[name + "_current"]).src=window[name + "_style"] + "_plne.gif"; window[name + "_current"]++; } window[name + "_current"]=window[name + "_current"]-1; } if(window[name + "_current"]==0){document.getElementById(name + "_zacatek").src=window[name + "_style"] + "_zacatek.gif";document.getElementById(name + "_konec").src=window[name + "_style"] + "_konec.gif";} if(window[name + "_current"]>0){document.getElementById(name + "_zacatek").src=window[name + "_style"] + "_zacatek_plne.gif";document.getElementById(name + "_konec").src=window[name + "_style"] + "_konec.gif";} if(window[name + "_current"]==100){document.getElementById(name + "_zacatek").src=window[name + "_style"] + "_zacatek_plne.gif";document.getElementById(name + "_konec").src=window[name + "_style"] + "_konec_plne.gif";} } } catch(e) {alert("Došlo k chybě při změně hodnoty loaderu '" + name + "'!\n\nInfo o chybě:\n" + e);} return window[name + "_current"]; } function GetLoaderValue(name) { return window[name + "_current"]; } do těla je nutné vložitsamotný loader v html a id všech obrázků předělat na pepa_číslo. Většina textových editorů obsahuje funkci tohoto ražení. Html kód vypadá nepřehledně, protože aby mezi obrázky nevznikaly mezery, je nutné vynechat entery: <img src="0_zacatek.gif" id="pepa_zacatek" onclick="if(!window[this.id.replace('zacatek','')+'readonly']){SetLoad erValue(this.id.replace('_zacatek',''),0);OnValueChange(this.id.replac e('_zacatek',''),0);}" alt='0'><img src="0.gif" id="pepa_1" name="1" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='1'><img src="0.gif" id="pepa_2" name="2" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='2'><img src="0.gif" id="pepa_3" name="3" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='3'><img src="0.gif" id="pepa_4" name="4" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='4'><img src="0.gif" id="pepa_5" name="5" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='5'><img src="0.gif" id="pepa_6" name="6" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='6'><img src="0.gif" id="pepa_7" name="7" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='7'><img src="0.gif" id="pepa_8" name="8" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='8'><img src="0.gif" id="pepa_9" name="9" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='9'><img src="0.gif" id="pepa_10" name="10" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='10'><img src="0.gif" id="pepa_11" name="11" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='11'><img src="0.gif" id="pepa_12" name="12" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetL
	Witus Profil *	#2 · Zasláno: 11. 5. 2008, 15:27:32 Odpovědět Citovat Do těla je nutné vložit samotný loader v html a id všech obrázků předělat na pepa_číslo. Většina textových editorů obsahuje funkci tohoto ražení. Html kód vypadá nepřehledně, protože aby mezi obrázky nevznikaly mezery, je nutné vynechat entery: <img src="0_zacatek.gif" id="pepa_zacatek" onclick="if(!window[this.id.replace('zacatek','')+'readonly']){SetLoad erValue(this.id.replace('_zacatek',''),0);OnValueChange(this.id.replac e('_zacatek',''),0);}" alt='0'><img src="0.gif" id="pepa_1" name="1" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='1'><img src="0.gif" id="pepa_2" name="2" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='2'><img src="0.gif" id="pepa_3" name="3" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='3'><img src="0.gif" id="pepa_4" name="4" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='4'><img src="0.gif" id="pepa_5" name="5" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='5'><img src="0.gif" id="pepa_6" name="6" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='6'><img src="0.gif" id="pepa_7" name="7" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='7'><img src="0.gif" id="pepa_8" name="8" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='8'><img src="0.gif" id="pepa_9" name="9" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='9'><img src="0.gif" id="pepa_10" name="10" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='10'><img src="0.gif" id="pepa_11" name="11" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='11'><img src="0.gif" id="pepa_12" name="12" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='12'><img src="0.gif" id="pepa_13" name="13" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='13'><img src="0.gif" id="pepa_14" name="14" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='14'><img src="0.gif" id="pepa_15" name="15" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='15'><img src="0.gif" id="pepa_16" name="16" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='16'><img src="0.gif" id="pepa_17" name="17" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='17'><img src="0.gif" id="pepa_18" name="18" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='18'><img src="0.gif" id="pepa_19" name="19" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='19'><img src="0.gif" id="pepa_20" name="20" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='20'><img src="0.gif" id="pepa_21" name="21" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='21'><img src="0.gif" id="pepa_22" name="22" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='22'><img src="0.gif" id="pepa_23" name="23" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='23'><img src="0.gif" id="pepa_24" name="24" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='24'><img src="0.gif" id="pepa_25" name="25" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='25'><img src="0.gif" id="pepa_26" name="26" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='26'><img src="0.gif" id="pepa_27" name="27" onclick="if(!window[this.id.replace(this.name,'')+'readonly']){SetLoad erValue(this.id.replace('_' + this.name,''),this.name);OnValueChange(this.id.replace('_' + this.name,''),this.name);}" alt='27'><img src="0.gif" id="pepa_28" name="28" onclick
	Witus Profil *	#3 · Zasláno: 11. 5. 2008, 15:28:51 Odpovědět Citovat Bohužel jak vidíte, celý html kód se sem nevejde, celý balíček je ke stažení tady: http://doodoo.wz.cz/loader.zip -------------------------------------------- Na konec je nutné loadery před používáním inicializovat (nejlépe přes body - onload): StartLoader('pepa'); a poté je možné už používat funkce na ovládání loaderu: // změna hodnoty // SetLoaderValue('loader',56); // získání hodnoty // GetLoaderValue('loader'); Kód vypadá složitě, ale vytvořil jsem ho za jedno odpoledne a myslím, že to vypadá celkem dobře :)
	Witus Profil *	#4 · Zasláno: 11. 5. 2008, 15:34:59 Odpovědět Citovat Změnu html souboru je nutné udělat např. v notepadu tímto způsobem: Nahradit: loader_ -> pepa_ - Nahradit vše... --------------------------------------------------------------- Obávám se, že tu stejně nebude nikdo, kdo by to zkoušel, takže všichni stejně budou hodnotit jenom ten přiklad na http://doodoo.wz.cz/loader , ale stejně jsem zajímavý co si o tom kdo bude myslet :)
	panther Profil	#5 · Zasláno: 11. 5. 2008, 16:15:20 Odpovědět Citovat Witus přiznám se, že jsem byl líný číst celé ty tvoje příspěvky výše i cokoliv zkoušet :o) Každopádně mě napadá otázka: Víš, k čemu by to mohlo být dobré/užitečné? (pokud je odpověď někde výše, tak se omlouvám)
	Witus Profil *	#6 · Zasláno: 11. 5. 2008, 16:46:45 Odpovědět Citovat Např. na zobrazování postupu uploadu přes ajax? Nebo proste ukazatel nacteni, nebo jako input element k zadávání hodnot? :-D Já sám tvořím často z nudy dhtml aplikace místo v nějakém desktopovém jazyku a tam to hojně využívám :)
		Časová prodleva: 16 let

Vaše odpověď

Mohlo by se hodit