Effect.Notify

A felhasználók értesítése általános része bármilyen webes és asztali alkalmazásnak. Sajnos az alkalmazások döntő többsége valami durva, ronda, és a folyamatosságot megszakító módon tudatja a felhasználóval, hoyg mi történt. A kis felugró ablakok többé-kevésbé de facto sztenderdé váltak ennek a feladatnak a kezelésére. De a felugró ablakok büdösek. Nekünk valami jobb kell!

Értesítők

A webalkalmazások általában érdekesebben oldják meg amit akarunk mint az asztali alkalmazások. Most nem akarok belemenni ennek a részleteibe, csak tegyük fel, hogy igaz.

A Script.aculo.us egy jó JavaScript keretrendszer sok szép és kellemes effektussal de nincs benne értesítésre szolgáló effektus. Szerencsénkre a script.aculo.us-t könnyű kiterjeszteni és nyitva áll azelőtt, hogy új effektusokat hozzunk létre a meglévőkre támaszkodva. Itt az én Effect.Notify script.aculo.us effektus plugin-em.

Effect.Notify

Az Effect.Notify elő fog hozni egy értesítő dobozt ami tartalmazhat bármilyen szöveget, majd a megadott idő után eltünteti azt. Ha a felhasználó scrollozik akkor az értesítő doboz a helyén marad.

Tesztelve: Firefox 3, Opera 9, Internet Explorer 7.

Az értesítő doboznak rendelkeznie kell a style="display:none" tulajdonsággal ha nem akarod, hogy az oldal betöltésekor megjelenjen.

<div id="notify" style="display:none;">Notification box</div>

Egy új értesítőt a következő sorok – vagy valami hasonló – meghívásával hozhatsz létre. Amint itt láthatod ha szükséged van rá, akkor megadhatod az appear és a fade effektusok kívánt paramétereit is. Egyszerű és nagyszerű.

 new Effect.Notify(element);
 new Effect.Notify(element, {notify : {bottom : 50, right : 100}, appear: {}, fade : {}});

Ha szeretnéd az értesítőt bezárhatóvá tenni a megadott idő lejárta előtt, akkor nem kell mást tenned, csak az értesítőn belül elhelyezni egy html elemet notifyClose css osztálynévvel.

<div id="notify" style="display:none;">
	<div class="notifyClose">x</div>
	<span class="notifyContent">Ez az értesítő doboz amit bármikor becsukhatsz.</span>
</div>

Notify kulcsok

Az Effect.Notify-nak átadott notify objektum a következő kulcsokat tartalmazhatja:

top vagy bottom

Az értesítő doboz top vagy bottom pozíciója pixelben

right vagy left

Az értesítő doboz right vagy left pozíciója pixelben

delay

mennyi ideig látszódjon az értesítő doboz másodpercben megadva

Üzenet szöveg

Ha szeretnéd, hogy különböző alkalmakkor más-más szöveg jelenjen meg az értesítő dobozban, akkor használhatsz valami ehhez hasonló függvényt. Ez a függvény két paramétert vár, elsőként magát a megjelenítendő üzenetet, másodikként pedig egy css osztály nevet, ami megléte esetén az értesítő boxon belül létrehoz egy új div elemet a megadott css osztálynévvel, és ebben jeleníti meg az üzenetet. Főleg akkor hasznos, ha mondjuk más stílussal szeretnél megjeleníteni általános értesítéseket és fontos üzeneteket. (Ehhez a függvényhez be kell töltened a Scriptaculous builder modulját is.)

function uzenetmutat(uzenet, css){
	//usernak szóló üzenetek kiíratása
	if(uzenet.length){	//jött üzenet
		var elem =$('notify');
		if(css){
			elem.insert(Builder.node('div', {className : css}, uzenet));
		}
		else{
			elem.update(uzenet);
		}
		new Effect.Notify(elem, {notify : {top : 15, right : 50}});
	}
}

Effect.Notify minta demó

Updates

• 2009.03.28 – v0.3 Box bezárhatóvá tétele.
• 2009.03.26 – Sajnos első körben egy korábbi verziót töltöttem fel mintaként, szóval ha scroll közben fura villogást látsz akkor próbáld meg újra letölteni a demót.

Bármilyen hozzászólást, kérdést és hibajelentést szívesen veszek.