21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
Witus
Profil *
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 *
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 *
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 *
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
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 *
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 :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0