Autor | Zpráva | ||
---|---|---|---|
Leo3 Profil |
#1 · Zasláno: 15. 6. 2017, 21:08:27
Potreboval by som poradit ohladom kontextoveho menu.
Ked kliknem pravym tlacidlom mysi kdekolvek na stranke, zobrazi sa kontextove menu. Po kliknuti na niektoru polozku v menu, alebo inde na stranke, tak menu zmizne. Co je dobre. Tu je priklad ako to funguje. Lenze potreboval by som nejak rozlisit, na ktoru polozku menu a ci vobec, bolo kliknute. Nejaka podmienka ak bolo kliknute na "Menu 1" tak, napr. vypis na konzolu console.log("Menu 1"); Ak bolo kliknute mimo toto menu, tak nech len zmizne menu.
html: <!DOCTYPE html> <html> <head> <title>Custom Right Click Context Menu</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body> //This is the menu block <div class="menu"> <ul> <a href="#"><li>Menu 1</li></a> <a href="#"><li>Menu 2</li></a> <a href="#"><li>Menu 3</li></a> <a href="#"><li>Menu 4</li></a> <a href="#"><li>Menu 5</li></a> </ul> </div> </body> </html> css: .menu{ width: 100px; background: #000; color: #fff; position:absolute; z-index: 999999; display: none; box-shadow: 0 0 10px #713C3C; } .menu ul{ list-style: none; padding: 0; margin:0; } .menu ul a{ text-decoration: none; } .menu ul li{ width: 88%; padding: 6%; background-color: #F04D44; color: #fff; } .menu ul li:hover{ background-color: #F7BA4B; color: #444343; } JavaScript / jQuery (Pouzivam jQuery v3.1.1, v tomto priklade je jQuery v1.11.3, funguje to rovnako): $(document).ready(function () { $("html").on("contextmenu",function(e){ //prevent default context menu for right click e.preventDefault(); var menu = $(".menu"); //hide menu if already shown menu.hide(); //get x and y values of the click event var pageX = e.pageX; var pageY = e.pageY; //position menu div near mouse cliked area menu.css({top: pageY , left: pageX}); var mwidth = menu.width(); var mheight = menu.height(); var screenWidth = $(window).width(); var screenHeight = $(window).height(); //if window is scrolled var scrTop = $(window).scrollTop(); //if the menu is close to right edge of the window if(pageX+mwidth > screenWidth){ menu.css({left:pageX-mwidth}); } //if the menu is close to bottom edge of the window if(pageY+mheight > screenHeight+scrTop){ menu.css({top:pageY-mheight}); } //finally show the menu menu.show(); }); $("html").on("click", function(){ $(".menu").hide(); }); }); Zdrojove kody su aj tu. Vie niekto poradit? |
||
Kcko Profil |
Udělej z toho živou ukázku, tak aby se tam snadno dalo něco modifikovat.
|
||
Keeehi Profil |
Například
$(".menu a").on("click", function(){ console.log($(this).text()); }); Důležitý je ten $(this) . V čistém javascriptu (bez jQuery) je this .
|
||
Leo3 Profil |
Kcko:
Prepac, neviem ako spravim zivu ukazku, ktora by sa dala modifikovat. Keeehi: Takze podmienka by mohla vyzerat nasledovne: $(".menu a").on("click", function(){ if ($(this).text() == 'Menu 1') { console.log('Spustam funkciu pre Menu 1'); } else if ($(this).text() == 'Menu 2') { console.log('Spustam funkciu pre Menu 2'); } else { console.log('Klikol si inde'); } }); Este ma napadlo, ked bude stranka v roznych jazykoch a povedzme text pre Menu 1 bude rozdielny, bude namiesto "Menu 1" "Otvorit" alebo "Open", tak nebude vhodne porovnavat s textom ako som to ja spravil. Dala by sa nejak porovnavat premenna? |
||
Keeehi Profil |
Leo3:
Dá se porovnávat cokoli. Proměnná těžko, jelikož HTML element žádnou proměnnou nemá, ale jakýkoli jeho atribut, cokoli v jeho obsahu a tak podobně, to problém nebude. Používáš tam odkazy (i když zbytečně, úplně dostatečné by byly ty li tagy), tak to můžeš rozlišovat na základě href atributu. V něm může být prakticky cokoli, překládat ho nebudeš a stejně se k tomu k čemu je určen nepoužije. |
||
Časová prodleva: 3 dny
|
|||
Kcko Profil |
#6 · Zasláno: 19. 6. 2017, 15:23:36
Leo3:
Třeba tady? Živá ukázka |
||
Časová prodleva: 7 let
|
0