Autor Zpráva
Leo3
Profil
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');
            }
        });
To som chcel. Dakujem.

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.
Kcko
Profil
Leo3:
Třeba tady? Živá ukázka

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: