WebFX columnlist - mouseover
Munkám során szoros kapcsolatba kerültem a webfx columnlist javascript alkalmazással.
Annyit a dologról, hogy kibõvíti a html táblázatok képességeit. Segítéségvel megoldható, hogy rendezzük a táblázatot, töröljünk cellákat, átméretezzük az oszlopokat stb.
A projekt során felmerült az igény, hogy amikor a kurzor egy sor fölé érkezik, annak megváltozzon a megjelenése.
A dolgot sikerült megoldani a webfx saját függvényeivel, gondoltam visszaküldöm a script gyártóinak, email röppent, de válasz nem jött, lehet, megdöglött a galamb út közben.
Ezért ide kiteszem mindenkinek, hagy boldoguljon a nép.
A columnlist.js fájl WebFXColumnList.prototype._assignEventHandlers
függvényét kell kiegészíteni a következõ pár sorral:
this._eCont.onmouseover = function(e) { oThis._mouseOver(e); } this._eCont.onmouseout = function(e) { oThis._mouseOut(e); }
A következõek ugyancsak a columnlist.js fájlba kerül(het)nek:
WebFXColumnList.prototype._mouseOver = function(e) { var el = (e)?e.target:window.event.srcElement; if ((el.tagName=='TD')&&(el.parentNode.parentNode.parentNode.parentNode.className==webfx-columnlist-body')) { curStyle = el.parentNode.className; if(curStyle != 'selected') { el.parentNode.className = 'over'; } } } WebFXColumnList.prototype._mouseOut = function(e) { var el = (e)?e.target:window.event.srcElement; if ((el.tagName=='TD')&&(el.parentNode.parentNode.parentNode.parentNode.className==webfx-columnlist-body')) { if(curStyle != 'selected') { el.parentNode.className = curStyle; } } }
Css-ben pedig létre kell hozni a következõ mutatót: .webfx-columnlist-body tr.over td
.
Ezzel állítjuk be, hogy milyen legyen a cellák megjelenése mouseover eseménykor.
A függvények a 1.03-as verzióval megjelölt columnlist.js fájlhoz készültek.
A forráskód formázásáért mindenkitõl elnézést kérek, furán mûködik ez a code tag.
Egészségére mindenkinek.
Hozzászóláshoz a Disqus szolgáltatását használom, korábbi vélemények elovlasásához és új hozzászólás írásához engedélyezd a Disqus-tól származó JavaScripteteket.