Avatar billede weiland Nybegynder
21. juli 2004 - 20:04 Der er 20 kommentarer og
1 løsning

kontekstafhængig højrekliksmenu

Jeg har en række links på en side. Mit ønske er, at man kan højreklikke på et tilfældigt link og vælge mellem en række muligheder.
Fx "Rediger link", "Gå til url" etc.

Har kigget lidt rundt og har fundet fx:
http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm
www.milonic.com/menusample27.php+right+click+menu+html&hl=da" target="_blank">http://www.google.dk/search?q=cache:v-8_Uq6vHkoJ:www.milonic.com/menusample27.php+right+click+menu+html&hl=da

- men ingen af de to er kontekstafhængige.

Jeg har endnu ikke dykket dybere ned i problemet. Før jeg gør det, ville jeg da lige høre, om nogen har et godt forslag eller eventuelt allerede nu kan afvise, at det overhovedet kan lade sig gøre :-)

Har prøvet at søge her på eksperten, men fandt ikke noget.
Avatar billede Slettet bruger
22. juli 2004 - 14:25 #1
Det kan i teorien lade sig gøre, i hvert fald i IE. Men præcis hvordan skal en funktion som "Rediger link" virke? Hvilke oplysninger skal sendes videre til en given PHP/ASP-rutine?
Avatar billede weiland Nybegynder
22. juli 2004 - 15:14 #2
Rækken af links er resultatet af et databaseopslag. Det er således ID-nummeret som skal sendes videre.

Linkene kan fx være:

<a href=www.google.dk>Link med ID 9</a>
<a href=www.eksperter.dk>Link med ID 10</a>

Og mulighederne ved højreklik på disse links kan så fx være
<a href=Links.asp?ID=9&Action=Order>Lav om på rækkefølge</a>
<a href=Links.asp?ID=9&Action=Edit>Rediger</a>
<a href=Links.asp?ID=9&Action=SubLink>Nyt underlink</a>

.. og så videre
Så det er jo ID-nummeret, der varierer i højrekliksmenuen....

Do I make myself clear? :-)
Avatar billede weiland Nybegynder
22. juli 2004 - 15:21 #3
Kunne selvfølgelig sagtens droppe ideen om højrekliksmenu, og placere tre knapper ud for hvert link, men så bliver det meget uoverskueligt.
Højrekliksmenu er den "lækre" løsning, som sikkert også kan bruges i andre sammenhænge....
Avatar billede roenving Novice
23. juli 2004 - 10:31 #4
Men så vil du jo fjerne de muligheder, som ellers er i højreklikket ...
Avatar billede weiland Nybegynder
23. juli 2004 - 12:03 #5
Ja, men det er kun en funktion, som skal anvendes på bestemte sider, hvor den manipulerede højekliksmenu er mere relevant end den sædvanlige :-)
Det er altså ikke et forsøg på at disable højreklikket, som jeg skam også er modstander af :-)
Avatar billede Slettet bruger
23. juli 2004 - 12:14 #6
Dette ser ud til at virke:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Højreklikmenu</title>
<script type="text/javascript">
muligheder = new Array();
muligheder[0] = new Array("Order", "Lav om på rækkefølge"); //Mulighed nr. 1
muligheder[1] = new Array("Edit", "Rediger"); //Mulighed nr. 2
muligheder[2] = new Array("SubLink", "Nyt underlink"); //Mulighed nr. 3

function linkmenu(lnk) {
  pop = window.createPopup();
  pb = pop.document.body;
  pb.style.border = "1px solid black";
  pb.style.backgroundColor = "#CCCCCC";
  pb.style.fontFamily = "Verdana";
  html = '<table style="width: 100%; height: 100%; display: inline;" id="menuTable">';
  lnkid = lnk.id.replace(/\D/g, "");
  for (i = 0; i < muligheder.length; i++)
    html += '<tr><td style="font-size: 10px; cursor: pointer; cursor: hand;" onclick="parent.location.href = \'Links.asp?ID=' + lnkid + '&action=' + muligheder[i][0] + '\';" onmouseover="this.style.backgroundColor = \'#EEEEEE\';" onmouseout="this.style.backgroundColor = \'#CCCCCC\';">' + muligheder[i][1] + '</td></tr>';
  html += '</table>';
  pb.innerHTML = html;
  pop.show(5, 5, 140, 50, lnk); //Afstand fra linket i x, y - derefter bredde og højde på menuen
}
</script>
</head>
<body>
<a href="http://www.google.dk" id="link1" oncontextmenu="linkmenu(this); return false;">Google (#1)</a><br />
<a href="http://www.eksperten.dk" id="link2" oncontextmenu="linkmenu(this); return false;">Eksperten (#2)</a><br />
<a href="http://www.phoenixv.dk" id="link3" oncontextmenu="linkmenu(this); return false;">PhoenixV.dk (#3)</a>
</body>
</html>

Læg mærke til, at du selv skal definere menuen bredde og højde i en af scriptets linjer; det kan ikke gres automatisk.
Avatar billede Slettet bruger
23. juli 2004 - 12:15 #7
gres = gøres
Avatar billede weiland Nybegynder
23. juli 2004 - 12:20 #8
hold da op.... jeg prøver lige! :-)
Avatar billede weiland Nybegynder
23. juli 2004 - 12:31 #9
I'm loving it........!
Det virker jo perfekt.

Send promte et svar :-)
Avatar billede Slettet bruger
23. juli 2004 - 12:35 #10
Det vil jeg gøre så. Er du forresten interesseret i en funktion til at slå den specielle kontekstmenu fra? På den måde bliver brugeren formentlig mindre generet, jf. roenvings kommentar.
Avatar billede Slettet bruger
23. juli 2004 - 12:36 #11
Mit forslag virker kun i IE, hvis du skulle være i tvivl. :)
Avatar billede Slettet bruger
23. juli 2004 - 12:36 #12
Og endda kun IE5.5+, for at det ikke skal være løgn.
Avatar billede weiland Nybegynder
23. juli 2004 - 12:47 #13
Intet problem med IE 5.5+

Funktion til at slå kontekstmenuen fra? Hmm, jeg kan ikke forestille mig, at jeg vil bruge en slå-fra-knap på netop den side, jeg har i tankerne, men løsningen bliver jo klart mere fleksibel og brugervenlig, så det ville da være blæret.... :-)
Avatar billede Slettet bruger
24. juli 2004 - 14:40 #14
Nu har du begge muligheder:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Højreklikmenu</title>
<script type="text/javascript">
muligheder = new Array();
muligheder[0] = new Array("Order", "Lav om på rækkefølge"); //Mulighed nr. 1
muligheder[1] = new Array("Edit", "Rediger"); //Mulighed nr. 2
muligheder[2] = new Array("SubLink", "Nyt underlink"); //Mulighed nr. 3

var pop;
menuBool = true;

function linkmenu(lnk) {
  if (!menuBool)
    return true;
  pop = window.createPopup();
  pb = pop.document.body;
  pb.style.border = "1px solid black";
  pb.style.backgroundColor = "#CCCCCC";
  pb.style.fontFamily = "Verdana";
  html = '<table style="width: 100%; height: 100%; display: inline;" id="menuTable">';
  lnkid = lnk.id.replace(/\D/g, "");
  for (i = 0; i < muligheder.length; i++)
    html += '<tr><td style="font-size: 10px; cursor: pointer; cursor: hand;" onclick="parent.location.href = \'Links.asp?ID=' + lnkid + '&action=' + muligheder[i][0] + '\';" onmouseover="this.style.backgroundColor = \'#EEEEEE\';" onmouseout="this.style.backgroundColor = \'#CCCCCC\';">' + muligheder[i][1] + '</td></tr>';
  html += '<tr><td style="font-size: 10px; cursor: pointer; cursor: hand;" onclick="parent.menuBool = false; alert(\'Menufunktionaliteten er nu slået fra.\'); parent.pop.hide();" onmouseover="this.style.backgroundColor = \'#EEEEEE\';" onmouseout="this.style.backgroundColor = \'#CCCCCC\';">[slå menu fra]</td></tr></table>';
  pb.innerHTML = html;
  pop.show(5, 5, 140, 70, lnk); //Afstand fra linket i x, y - derefter bredde og højde på menuen
  return false;
}
</script>
</head>
<body>
<a href="http://www.google.dk" id="link1" oncontextmenu="return linkmenu(this);">Google (#1)</a><br />
<a href="http://www.eksperten.dk" id="link2" oncontextmenu="return linkmenu(this);">Eksperten (#2)</a><br />
<a href="http://www.phoenixv.dk" id="link3" oncontextmenu="return linkmenu(this);">PhoenixV.dk (#3)</a>
<br /><br />
<a href="#" onclick="menuBool = true; alert('Menufunktionaliteten er nu slået til.'); return false;">[slå menu til]</a>
</body>
</html>
Avatar billede weiland Nybegynder
24. juli 2004 - 15:01 #15
Jeg vil gerne have links i højrekliksmenuen til at åbne i en anden frame (kaldet "main"). Jeg vil altså ændre onclick="parent.location.href = \'Links.asp?ID=' + lnkid + '&action=' + muligheder[i][0] + '\';"

Jeg har fået det bedste resultat ud af:

onclick="top.main.location=....

Her åbner siden i den main-framen, men browseren kommer stadig med en javascript-fejl: "Main" er ikke defineret.

Kender I den rigtige syntaks?
Avatar billede weiland Nybegynder
24. juli 2004 - 15:02 #16
I øvrigt tak begge muligheder, phoenix. Det er først lige nu, jeg ser det!
Lad mig lige kigge nærmere på det....
Avatar billede weiland Nybegynder
24. juli 2004 - 15:29 #17
Hmmm.... jeg tror såmænd, at jeg havde glemt et href

med onclick="top.main.location.href=.... virker det! :-)
Avatar billede roenving Novice
24. juli 2004 - 15:33 #18
onclick="parent.top.main.location.href ...
Avatar billede weiland Nybegynder
24. juli 2004 - 15:36 #19
Mange tak!
Avatar billede kapoou Nybegynder
04. marts 2005 - 11:27 #20
Jeg har nu også inplementeret dit script phoenixv men har ændret lidt i det så det ikke er en henvisning men en javascript funktion som aktiveres ved klik i menuen. Dog reagerer den slet ikke når jeg klikker. Er der nogle af jer der kan gennemskue hvorfor?

Jeg har ændret linien til følgende

    html += '<tr><td style="font-size: 10px; cursor: hand;" onClick="selectFile(\'test\');" onmouseover="this.style.backgroundColor = \'#EEEEEE\';" onmouseout="this.style.backgroundColor = \'#CCCCCC\';">' + muligheder[i][0] + '</td></tr>';
Avatar billede Slettet bruger
04. marts 2005 - 16:54 #21
Prøv:

html += '<tr><td style="font-size: 10px; cursor: hand;" onclick="parent.selectFile(\'test\');" onmouseover="this.style.backgroundColor = \'#eeeeee\';" onmouseout="this.style.backgroundColor = \'#cccccc\';">' + muligheder[i][0] + '</td></tr>';
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester