| 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