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
vagybottom
- Az értesítő doboz top vagy bottom pozíciója pixelben
right
vagyleft
- 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}}); } }
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.
Tehát a teendőm ez?
1. a megfelelő lapra beszúrni a scriptet
2. feltölteni ugyanabba a mappába a js fájlokat
@csabosz: Nagyjából igen, hamarosan módosítom a bejegyzést és leírom benne részletesen.
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.
@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.
Pingback:WebMánia » Egy év egy bejegyzésben 2009