Input mezők értékének törlése egyenként gombbal

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:

Jobb klikk menü (context menu) egyedi megoldása

Az alábbi megoldással lehet egy teljes oldalra érvényes vagy akár egyedi almenük megadásával is jobb kattintásos menüt létrehozni a weboldalon.

A működéshez 3 részre van szükség:

HTML kód (alap):

<body oncontextmenu="return false">
<div onmousedown="HideMenu('contextMenu-<?=id?>');" onmouseup="HideMenu('.cmmenu');" oncontextmenu="ShowMenu('contextMenu-<?=id?>',event);">...</div>

Illetve a menü szerkezete:

<div style="display:none;" class="cmmenu" id="contextMenu-<?=$id?>">
<div class="ContextItem">Menü 1</div>
<div class="ContextItem">Menü 2</div>
</div>

Ehhez a szükséges CSS:

div[id^="contextMenu"] {
 background-color: #ffffff;
 border: 1px solid #cccccc;
 box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
 padding: 10px 0;
 position: absolute;
 top: 0;
 left: 0;
 width: 200px;
 }
.ContextItem {
 cursor: pointer;
 padding: 8px 15px; 
 }
.ContextItem:hover {
 background-color: #f8f8f8; 
 }
.ContextItem a {
 text-decoration:none;
}

És a legfontosabb, maga a script:

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

 

Térkép megnyitása mobil alkalmazásban

Weboldalon elhelyezett térkép esetében a mobil eszközök térnyerése miatt egyre nagyobb jelentőséget kap a linket térkép mobil alkalmazásban való megnyitása. Természetesen a legjobb egy olyan megoldás, amivel szét tudjuk választani, hogy PC-n továbbra is böngészőben lehessen megtekinteni a térképet, míg mobil eszközön a telepített akalmazással nyíljon meg, ezzel is elősegítve, hogy szükség esetén könnyen és gyorsan lehessen navigációhoz használni.

Az alábbi egyszerű script oldalba ágyazásával a feladat jól megoldható:

function mapsSelector() {
 if /* Ha iOS-t használ, Apple Maps-ben nyílik meg */
 ((navigator.platform.indexOf("iPhone") != -1) || 
 (navigator.platform.indexOf("iPad") != -1) || 
 (navigator.platform.indexOf("iPod") != -1))
 window.open("maps:https://goo.gl/maps/7gGV1YgG4spKBmcX7");
else /* ha nem mobil, normál link */
 window.open("https://goo.gl/maps/7gGV1YgG4spKBmcX7");
}

Ezt követően minden szükséges helyen a következő módon linkeljük:

<a href="#" onClick="mapsSelector()">Térkép</a>

Hátránya, hogy a linket a Google nem tudja indexelni, de talán ez a legkevesebb...