jQuery KontextMenü

M

MsWord

Mitglied
Hallo,

für ein Projekt möchte ich etwas mit einem ContextMenu machen.
Gefunden habe ich viele aber keines welches variable genug ist.
Denn ich habe eine liste die ich mit PHP ausgeben lasse und mit dem
ContextMenu soll jeder Eintrag einzeln dann angeschaut, bearbeitet
und gelöscht werden können. Jedes Element erhält dazu die id aus der DB.

1. Ich bekomme das nur so hin das es nur bei dem obersten Ausgabe funktioniert. :(

2. Wenn ich auf einen Link im KontextMenü klicke dann führt er diesen nicht aus,
sondern es verschwindet nur das KontextMenü.


Dieses Menu gefiel mir nur leider ist es nicht variable (variable bezogen auf 1.) genug:
Context Menu Demo


Weiß jemand wo ich ein gutes finden könnte oder wie man das so umschreiben kann das es so funktioniert?
Ich habe leider nur Anfänger Kenntnisse in Javascript.

Vielen Dank schon mal im Voraus!
 
Hallo MsWord,

also eigentlich ist diese Sache mit den Kontextmenüs relativ einfach: du überwachst, ob jemand versucht ein Kontextmenü zu öffnen, und wenn das passiert, dann ermittelst du die Position der Maus und positionierst dann dort ein Kontextmenü. Und von dem überwachst du einfach Mausklicks. Mit HTML5 sollte das einfacher werden, jedoch werden Kontextmenüs nativ bisher (soweit ich weiß) nur in den Nightly Builds von Firefox unterstützt. Daher habe ich dir mal kurz was zusammen gebastelt und hoffe, dass es dir etwas hilft:

http://jsfiddle.net/MeiKatz/8kUJT/
 
Ja, vielen Dank!
Helfen tut es mir schonmal ;)
ich habe auch schon etwas damit rum probiert...
aber irgendwie bekomme ich das nicht hin wenn ich jetzt da mehre divs hinein packe,
das das context menu die id (die in dem div eingetragen ist) von dem Div benutzt und daraus dann die links zum (öffnen, z.B. "?a=open&id=1", beabeiten und löschen) generiert.

Ich hoffe das war jetzt nicht zu blöd beschrieben?
 
Ja, cool... :D
Danke dir, sowas habe ich gesucht!
Wenn ich das als Link benutzen möchte muss ich doch nur statt alert() das so schreiben: location.href='' oder?

Funktioniert :D
http://marlight-music.de/test3/test2

Vielen vielen vielen Dank!
In keinem anderen Forum war keiner fähig mir eine so passende Antwort zugeben.
 
Das liegt daran, dass du das Framework jQuery nicht einbindest. Konkret müsste der Skriptteil so aussehen:
HTML: 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
  var $current = null;
  
  $("[contextmenu] tr").on("contextmenu", function (e) {
    $current     = $(this);
    var contextmenu  = $(this).parents("table").attr("contextmenu");
    var $contextmenu = $("#" + contextmenu);
    
    if ($contextmenu.length == 0) {
      return;
    }
    
    e.preventDefault();
    e.stopPropagation();
    
    $contextmenu.show();
    $contextmenu.css({
      "top" : (e.pageY - 18) + "px",
      "left": e.pageX + "px"
    });
    
    return false;
  });
  
  $(".contextmenu li").on("click", function () {
    alert("action=" + $(this).data("type") + "&id=" + $current.data("id"));
  });
  
  $("body").on("click", function () {
    $(".contextmenu").hide(); 
  });
});
</script>
 
Hallo,

ich habe das Script etwas angepasst.
Nur habe ich dabei etwas kaputt gemacht, aber leider weiß ich net wie ich das im geänderten zustand zum laufen bekomme?!
Hier ist das Veränderte Script:
Code: 
$(function(){
var $current = null;

$("[contextmenu2]").on("contextmenu", function (e) {
    $current     = $(this);
    var contextmenu  = $(this).attr("contextmenu2");
    var $contextmenu = $("#" + contextmenu);
    
    if ($contextmenu.length == 0) {
        return;
    }
    
    console.log(this);
    
    e.preventDefault();
    e.stopPropagation();
    
    $contextmenu.show();

        
    $contextmenu.css({
        "top" : e.pageY + "px",
        "left" : e.pageX + "px",
        "bottom" : "",
        "right" : ""
    });
    
    if(e.pageY > (window.innerHeight-200)){
     $contextmenu.css({
        "bottom" : (window.innerHeight-e.pageY) + "px",
        "top" : ""
     });
    }
    
    if(e.pageX > (window.innerWidth-200)){
     $contextmenu.css({
        "right": (window.innerWidth-e.pageX) + "px",
        "left" : ""
     });
    }
    
    
    return false;
});

$(".contextmenu li").on("click", function () {
  location.href=("?action=" + $(this).data("type") + "&id=" + $current.data("id"));
});

$("body").on("click", function () {
   $(".contextmenu").hide(); 
});
});

Hier bei funktioniert die Location funktion nicht mehr. :(
Das Menü wird noch richtig angezeigt nur wenn ich auf ein menü klicke gehts nur weg
und führt nicht mehr diesen Link aus.

Meine Ausgabe sieht so aus:
HTML: 
<div id="log"></div>
<table  class="[...]" width="100%" border="0" cellpadding="0" cellspacing="0">	 
<tr contextmenu2="standart" data-id="153" class="verhindert">
	 	<td width="40.5%" class="gign"><strong>test</strong><br></td>
	 	<td width="25.3%" class="gign">13.05.2013 um 20:00</td>
	 	<td class="gign">sasa</td>
	 	<td width="12%" class="[cl4]">[buttons]</td>
	 </tr>
	 <tr contextmenu2="public" data-id="157" class="gig">
	 	<td width="40.5%" class="gign">test</td>
	 	<td width="25.3%" class="gign">19.05.2013 um 20:00</td>
	 	<td class="gign">assa</td>
	 	<td width="12%" class="[cl4]">[buttons]</td>
	 </tr>
</table>
<ul class="contextmenu" id="standart">
    <li data-type="open" class="folder">&ouml;ffnen</li>
    <li data-type="edit" class="edit">bearbeiten</li>
    <li data-type="delete" class="delete">l&ouml;schen</li>
</ul>
<ul class="contextmenu" id="public">
    <li data-type="open" class="folder">&ouml;ffnen</li>
    <li data-type="edit" class="edit">bearbeiten</li>
    <li data-type="public" class="public">ver&ouml;ffentlichen</li>
    <li data-type="delete" class="delete">l&ouml;schen</li>
</ul>
<ul class="contextmenu" id="gig">
    <li data-type="open" class="folder">&ouml;ffnen</li>
    <li data-type="edit" class="edit">bearbeiten</li>
    <li data-type="change" class="change">Zum Gig umwandeln</li>
    <li data-type="delete" class="delete">l&ouml;schen</li>
</ul>

Wie muss ich das jetzt in diesem Teil ändern damit das funktioniert?
Code: 
$(".contextmenu li").on("click", function () {
  location.href=("?action=" + $(this).data("type") + "&id=" + $current.data("id"));
});

$("body").on("click", function () {
   $(".contextmenu").hide(); 
});
 
fehler habe ich gefunden... :D
Aber noch etwas anderes...
Wenn ich jetzt an zwei verschiedenen punkten rechtsklick mache, habe ich auch zwei menü's.
Natürlich 2 verschiedene menü's aber was muss ich ändern damit er mir immer alle anderen offenen menüs schließt wenn ich rechtsklicke?
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück