Script.aculo.us Effect.Tooltip - lehet jobbat?
Ajaxian-on majdnem megtaláltuk, ami mindig is hiányzott a Script.aculo.us-ból: Effect.Tooltip. Elsőre jónak tűnt, de aztán elgondolkodtunk, hogy talán lehetne ezt jobban is.
Az egyetlen, de számunkra annál zavaróbb baja az, hogy window.onload-kor egyenként inicializálja az egyes tooltipeket. Ez sok elem esetén elég kényelmetlenné teheti a használatát. Nem beszélve arról, ha szerveroldalon automatikusan generálunk egyedi formokat, akkor külön kell foglalkoznunk a tooltip init-ek előállításával is, ami viszont ugye csak inline JavaScriptként történhet, bele a HTML kódba.
Sokkal jobb lenne egy olyan megoldás, amire már több példát láttunk, kifejezetten Script.aculo.us-ra kihegyezve viszont még senki sem készítette el:
- legyen 1 darab inicializáló sor, amely akár lehet a tooltip osztály konstruktorában is
- jelöljük meg a HTML-elemeinket valamilyen egyedi class-szal, pl ‘tooltip’
- a tip szövegét helyezzük el az elemek ‘title’ attribútumában, hiszen ezzel a legtöbb HTML tag amúgy is rendelkezik, és pont ezt a célt szolgálja
- az inicializálás során egyszerűen szaladjunk végig a lapunk ‘tooltip’ classnevű elemein, vegyük a ‘title’ attribútumukat, és jelenítsük meg ahogy tetszik
A logika alapján jól látható az egyszerűség és a rugalmaság:
- a tooltip-szöveg ott van, ahol szükség van rá: közvetlenül a HTML-elemnél - szerveroldalon már eleve így generáljuk majd a formot, vagy így készítjük el a templatet
- az inicializálás központi, egyszeri, és a mérete sem növekszik a tooltipek számával
Az elmélet tehát nagyjából ennyi, de valószínűleg egyszer majd a gyakorlatban is összerakjuk itt a dev2-n.
szia
ebbe a problemaba kerultem en is, ezert irtam magamnak egy tooltip function-t. a megvalositas nem tul szep (uj vagyok), de mar hasznalhato. javitsatok, hasznaljatok egeszseggel.
// forma: szoveg
function tooltip_init(_where){
if (!$(”tooltip”)){
var tooltipObj = document.createElement(’div’);
tooltipObj.id=”tooltip”;
document.body.appendChild(tooltipObj);
$(”tooltip”).hide();
$(”tooltip”).setOpacity(0.8);
}
$$(((_where)?_where:”")+” a[tooltip]“).each(
function(_obj){
Event.observe(_obj,”mouseover”,function(_eve){
$(”tooltip”).update(Event.findElement(_eve,”a”).getAttribute(”tooltip”));
$(”tooltip”).show();
});
Event.observe(_obj,”mousemove”,function(_eve){
$(”tooltip”).style.left=Event.pointerX(_eve)+10+”px”;
$(”tooltip”).style.top=Event.pointerY(_eve)-$(”tooltip”).getHeight()-10+”px”;
});
Event.observe(_obj,”mouseout”,function(_eve){
$(”tooltip”).hide();
});
}
);
}
Van egy ilyen:
http://www.nickstakenburg.com/projects/prototip/
Imádom
na. na! kössz!