Effect.Notify

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

5 thoughts on “Effect.Notify

  1. hogyan lehetne azt megoldani, hogy vertikálisan és/vagy horizontálisan középen legyen a doboz? nem sikerült rájönnöm, pedig próbálkoztam nem is keveset.

  2. @sunyisanyi jelen verzióban csak a jobb / bal és fent / lent pozíciókat lehet megadni pixelben. Tehát ha a layoutod és a notify box szélessége pixelben meghatározott akkor ki tudod számolni, hogy milyen bal pozíciót kell megadni. Pl a layout 900 pixel, a notify 200px akkor (900-200)/2=350-et kell adni bal értéknek. Persze itt az IE okozhat meglepetéseket, illetve figyelni kell a margin és padding értékekre.

    Mivel egy weblap magassága általában nem értelmezhető külön kis JS-sel számíthatod ki, hogy mekkora a böngésző ablaka és innentől kezdve hasonló számítással tudsz neki adni egy top értéket.

    Gondolkozom a dolgon, lehet, hogy a következő verzióba beépítem ezeket is.

  3. Pingback: WebMánia » Egy év egy bejegyzésben 2009

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.