Jana Fauck: Frage zum Wiki-Artikel ‚Kontextmenü‘

Beitrag lesen

Zeig bitte das abgeänderte Beispiel.

Hallo Matthias,

hier kommt der HTML-Teil:

<html>
<head>
	<title>Kontextmen&uuml;</title>
	<style>
</head>
<body> 

<h1>Kontext-Men&uuml;</h1>
<main>
	<table id="contexttable" class="system"></table>
	<div id="show" class="system" style="padding: 1px;"></div>
	<select id='ks'>
		<option id='mue'>M&uuml;ller</option>
		<option id='mei'>Meier</option>
		<option id='leh'>Lehmann</option>
		<option id='schm'>Schmidt</option>
		<option id='schu'>Schulze</option>
	</select> 
	<p>Hier eine andere Select-Box:</p>
	
	<select id='ls'>
		<option id='de'>DE</option>
		<option id='fr'>FR</option>
		<option id='pl'>PL</option>
	</select>
</main>

<script type="text/javascript">

var cursorx, cursory, cmenu;
cmenu = true;
cursorx = cursory = 0;

function create_id(element) {
	if (typeof element != "object" || element == null) return false;
	if (typeof element.id != "string" || !element.id) {
		var no = 0;
		while (document.getElementById("el_" + no)) no++;
		element.id = "el_" + no;
	}
	return element.id;
}

function handle_cursor(e) {
	if (!e) e = event;
	try {
		cursorx = e.clientX;
		cursory = e.clientY;
	} catch (e) {
		try {
			cursorx = e.screenX;
			cursory = e.screenY;
		} catch (e) {}
	}
	return true;
}
document.onmousemove = onmousemove = onmousedown = document.onmousedown =
	handle_cursor;
onload = function () {
	document.body.onmousemove = document.body.onmousedown = handle_cursor;
};

**HIER die angepasste Kontext-Menü-Funktion:
**function contextmenu() {
	if (!cmenu || cmenu == null) return true;
	hide("show");
	var element = get_focused_element();
	if (typeof element != "object" || !element) {
		hide_context();
		return true;
	}
	create_id(element);
	var output = '';
	 	 	
	output = '<tr><th>Kostenschl&uuml;ssel: ' + element.id + '<\/th><\/tr>'; 
	output +=
	//	'<tr><td onclick="cmenu = false;">Kostenschl&uuml;ssel zu Favoriten hinzuf&uuml;gen<\/td><\/tr>';
		'<tr><td onclick="hinzufuegen(id)">Kostenschl&uuml;ssel zu Favoriten hinzuf&uuml;gen<\/td><\/tr>';

	output +=
		'<tr><td onclick="entfernen(id)">Kostenschl&uuml;ssel aus Favoriten entfernen<\/td><\/tr>';

if (get_opacity(element) < 1) {
		output += '<tr><td onclick="transparent(\'' + element.id +
			'\', \'+\');">Weniger Transparent<\/td><\/tr>';
	}

	var contexttable = document.getElementById("contexttable");
	
	contexttable.innerHTML = output;
	contexttable.style.display = "block";
	var cl = contexttable.getBoundingClientRect();
	if (cursory + cl.height < innerHeight) {
		contexttable.style.top = cursory + "px";
	} else {
		contexttable.style.top = (cursory - cl.height) + "px";
	}
	if (cursorx + cl.width < innerWidth) {
		contexttable.style.left = cursorx + "px";
	} else {
		contexttable.style.left = (cursorx - cl.width) + "px";
	}
	return false;
}
function show(text) {
	var div = document.getElementById("show");
	div.style.display = "block";
	div.innerHTML = text +
		'<br><div align="center"><input type="button" onclick="hide(\'show\');" value="OK"><\/div>';
	var cl = div.getBoundingClientRect();
	var x = (innerWidth - cl.width) / 2;
	var y = (innerHeight - cl.height) / 2;
	div.style.top = y + "px";
	div.style.left = x + "px";
}

function get_focused_element() {
	var elements = document.getElementsByTagName("*");
	var focused_element = null;
	var body_came = false;
	var cl;
	
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].tagName.toLowerCase() == "body") {
			body_came = true;
			continue;
		}
		
		if (!body_came) continue;
		cl = elements[i].getBoundingClientRect();
		var height, width, x, y;
		height = cl.height;
		width = cl.width;
		x = cl.left;
		y = cl.top;
		if (cursorx > x && cursory > y && cursorx < x + width && cursory < y +
			height) {
				focused_element = elements[i];
		}
	}
	
	return focused_element;
}

function show_img(img) {
	img = document.getElementById(img);
	show('<a href="' + img.src + '"><img src="' + img.src + '"><\/a>');
}

function hide(element) {
	if (typeof element == "string") element = document.getElementById(element);
	if (typeof element != "object") return false;
	element.style.display = "none";
}

function show_attr(element, attr) {
	if (typeof element == "string") element = document.getElementById(element);
	show(element[attr]);
}

function hide_context() {
	hide("contexttable");
}
onclick = function (e) {
	if (e.which == 3) {
		return contextmenu();
	}
	hide_context();
	if (cmenu === null) cmenu = true;
}

function transparent(obj, dir) {
	if (typeof obj == "string") obj = document.getElementById(obj);
	if (typeof obj != "object") {
		throw "transparent: first arg not found!";
		return false;
	}
	var op = get_opacity(obj);
	eval("op " + dir + "= 0.5");
	if (op > 1) op = 1;
	if (op < 0) op = 0;
	obj.style.opacity = op;
}

function get_opacity(obj) {
	if (!obj.style.opacity) return 1;
	return Number(obj.style.opacity);
}

function entfernen(id){
	alert("KS entfernen" + id);
}
	
function hinzufuegen(id){
	alert("KS hinzufügen" + id);
}

</script>
</body>
</html>

Ich hoffe, das hilft weiter. Vielen Dank.