A fenti példa egy szürke gombot tesz ki, ami hoverre az azt követő span tartalmát megjeleníti (opacity + transition). A fenti megoldásban rejlő lehetőségek egyik példája megtalálható itt: Rádió gomb egyedi átalakítása 1. verzió
Olyan feladatba futottam bele, ahol input mezők értékét kellett törölni egy űrlapon, ahol több dátum mező volt, amihez jquery dátumválasztó volt rendelve, azonban a kiválasztott értéket manuálisan módosítni nem lehet (disabled).
A legkézenfekvőbbnek egy javascript megírása tűnt. A következő kód az oldalon fellelhető összes dátumválasztó esetén megoldást jelentett:
<script language="javascript" type="text/javascript">
function ShowMenu(control, e) {
var posx = e.clientX +window.pageXOffset +'px'; //Left Position of Mouse Pointer
var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer
document.getElementById(control).style.position = 'absolute';
document.getElementById(control).style.display = 'inline';
document.getElementById(control).style.left = posx;
document.getElementById(control).style.top = posy;
}
function HideMenu(control) {
document.querySelectorAll(control).forEach(a=>a.style.display = "none");
}
</script>
Néhány szó a működésről:
A fenti kód eredetijét a codeproject.com-on találtam, de az igényeknek és a szélesebb körű felhasználhatóságnak mefgelelően módosítottam.
A "body"-ban elhelyezett "oncontextmenu " paraméter letiltja az oldalon a böngésző saját jobb klikke menüjét.
Ahogyan látható, a context menüt indító hívásokat a legfelső részben kell elhelyezni ahol szeretnénk használni. Ha a teljes oldal, lehet a body vagy valamely "container", ha php-ből foreach-el vagy valamilyen más ciklussal lérehozott soroknál van rá szükség, akkor az adott sor vezérlőjébe kell betenni az első kódblokkot. Itt jelezve is van, pl. hogyan lehet egyedivé tenni az ID-t, hogy a menü és a vezérlés csak rá vonatkozzon.
A "cmenu" osztály bejegyzésre való váltás azért szükséges, hogy bármely más sorra kattintva be lehessen zárni a megnyitott menüt.
A script maga pedig lekéri az egér aktuális pozícióját, majd a paraméterben átadott ID (control) stílusát módosítja. Hogy ne legyen összeakadás, hogy mikor melyik funkciót indítsa, erről gondoskodik az "onmousedown" és az "onmouseup" esemény kezelők. Nyitáshoz pedig az "oncontextmenu" paraméter van használva. Ez direktben a context menü megnyitási szándékra indítja a függvényt.
Design igényként merülhet fel, hogy egy kép megmozduljon. Azonban még az egyszerűbb nagyítás esetén is alap probléma, hogy a kép méret növekedésével a körülötte lévő tartalmak elmozdulnak a helyükről. Az alábbi egyszerű megoldással ez kiküszöbölhető. Az egyetlen feltétel, hogy működhessen, hogy a képnek egy önálló div-ben kell lennie.
Előforsult, hogy egy weboldalhoz kapott anyagban sok kép volt, amik különféle oldalaránnyal rendelkeztek. Ezekkel lehet játszani, hogy szépen, begízítva egységesre vágja az ember, de ha az adott téma ezt nem követeli meg feltétlen, van egy gyorsabb és egyszerűbb megoldás, amihez elég néhány sor az oldal sablonba.
Előfordul, hogy a dizájn úgy épül fel, egy kattintható képre (pl. termék fotó) valamilyen kiemelési vagy információs célból kis kép kerül (magasabb z-index értékkel felsőbb rétegnek helyezve), pl. akciós plecsni, vagy valamilyen szélen futó szalag, stb. Ezek az átlátszó hátterű png (gif) fájlok esetében azonban a kép akkor is négyzetes, ha a megjelenő forma bármilyen más alakzatot vesz fel. Ilyenkor az eredetileg teljes mértékben kattintható képet nagy részt lefedi a dekoráció. Azonban van egy egyszerű lehetőség arra, hogy az íly módon felső rétegbe helyezett, csak képi információt tartalmazó elemet a működés szempontjából transparensé tegyük.
A felső, takaró rétegnek a css-éhez adjuk hozzá:
pointer-events:none
(Kék keret a linkelt, zöld keret a sarok szalag képe által kitakart rész)
Egyik parnernek volt olyan kérése, hogy weboldalán található űrlapot kitöltve, az azon szereplő mezők közt a tab gombbal lehessen lépkedni és a lépések megadott sorrendben kövesség egymást, hogy az egymás után szereplő információk felvitele gördülékenyebb legyen.
Erre a problémára nyújt megoldást a tabindexattribútum.
A funkció HTML4-től elérhető, azonban azon oldalakon, ahol ez van hasznhálva (illetve régebbi böngészők esetében) csak <a>, <button>, <input type="text" />, <object> és <textarea> típusú tagekkel működik, HTML5-től viszont már szélessebb körben válik elérhetővé.
A használatához az űrlap (vagy HTML oldal) elemeihez be kell tenni a tabindex="<sorszám>" attribútumot. A sorszám 0-tól egész számokkal növekedve adandó meg.
Ha a fókuszt egyéb kóddal szeretnénk programozhatóvá tenni (pl. JS-Ajax ellenőrzés vigyen egy kitöltetlen mezőre) akkor értéknek tabindex="-1" kell lenni. Ebben az esetben persze a normál léptetés nem működik.
Ha tabindex-et használsz mindenképp minden érintett taget jelölni kell vele!
Több oldalas űrlap esetében a használat nem ajánlott, mivel vegyes navigációnál (egér katt - tabulátor) a sorrend összezavarodhat és az űrlap használata nehézkessé válhat.
Nem rég találkoztam egy olyan problémával, ami miatt a Joomla - VirtueMart (custom field) kiválasztó rádiógombt kellett átdizájnolni... tekintve, hogy a kód elég kötött megpróbáltam leginkább CSS-ből megoldani a problémát.
A minap volt olyan problémám, hogy egy adminban választó mező értékéhez kellett egyedi class-t adni, hogy frontenden a megjelenésnél lehessen a színnel "játszani".
A legegyszerűbbnek az tűnt, ha a kódot kiegészítem és a választott értéknek megfelelő elnevezésű class-t adom hozzá. Igen ám, de az érték elnevezése tartalmazhat ékezetet, szünetet és speciális írásjeleket is, ezért át kellett alakítani, hogy ezek a karakterek ne kerüljenek bele.
Számos megoldást lehet találni, ahol pl. preg_replace vagy foreach megadással mennek végig a tartalmakon, ami feltehetően itt is működne, de ha a Joomla alapból tudja miért ne azt használjam?
Párszor belefutottam a problémába, hogy videomegosztóról be kell ágyazni a tartalmat, amihez vagy valamilyen shortcode kiegészítőt, vagy egyéb szerkesztő kiegészítőt használatam. Azonban előfordul, hogy 1-1 video miatt nincs kedvem feltenni egy komplett kiegészítőt (pláne azt is frissítgetni...)
Erre itt egy gyorsabb, egyszerűbb megoldás.
Az alábbi CSS-t helyezzük el a sablon CSS felülírásába (vagy template.css-be, vagy máshova, ahonnan a rendszer képes azt betölteni):
