Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<p oncontextmenu="return nabidka(event, [ {innerHTML: 'Zpět', href: 'http://jecas.cz'}, {innerHTML: 'Bafnout', onclick: function() {alert('Baf')}} ])">Text s <b>kontextovou nabídkou</b></p> <p oncontextmenu="return nabidka(event, [ {innerHTML: 'Saints Row IV', href: 'http://saintsrow.cz'}, {innerHTML: 'Živé ukázky', href: 'http://kod.djpw.cz'} ])">Text s jinou <b>kontextovou nabídkou</b></p>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.nabidka {border: 1px solid #ccc; width: 150px; position: absolute; z-index: 10; background: #fff;} .nabidka a {text-decoration: none; display: block; cursor: pointer; padding: .1em .5em;} .nabidka a:hover {background: #efefef;}
CSS
Autoformát
CSS reset
Až na konci
function zavritNabidku() { if (document.getElementById("nabidka")) { document.body.removeChild(document.getElementById("nabidka")); } } function getPosition(e) { e = e || window.event; var cursor = {x:0, y:0}; if (e.pageX || e.pageY) { cursor.x = e.pageX; cursor.y = e.pageY; } else { cursor.x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft; cursor.y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop; } return cursor; } function nabidka(e, polozky) { zavritNabidku(); var nabidka = document.createElement("div"); nabidka.className = "nabidka"; nabidka.id = "nabidka"; nabidka.onclick = function(e) { e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); } var cursorPos = getPosition(e); // zjištění posice kursoru nabidka.style.left = 5 + cursorPos.x + "px"; nabidka.style.top = 5 + cursorPos.y + "px"; for (var i = 0; i < polozky.length; i++) { var polozka = document.createElement("a"); var atributy = polozky[i]; for (vlastnost in atributy) { polozka[vlastnost] = atributy[vlastnost]; } nabidka.appendChild(polozka); } document.body.appendChild(nabidka); return false; } document.documentElement.onclick = zavritNabidku;
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>