Avatar billede eksperten1 Nybegynder
20. oktober 2003 - 13:24 Der er 5 kommentarer

Dynamisk Context menu (højre klik)

Kan det lade sig gøre at lave en "Dynamisk" context menu, set på den måde at selve menuindholdet er live data ?

I en iframe har jeg en hulens masse DIV's som hvert især er et koordinat i et DTP program.

Det er sådan at brugeren kan højreklikke på et DIV og vælge at indsætte et billede. Her skal der så ske en masse ASP hejs i databasen. Men når der højreklikkes, skal jeg bruge navnet på det div der blev klikket på, så jeg kan danne den korrekte menu med ASP.

Kan dette lade sig gøre ?

Se evt. på http://ekspert.bjaergager.dk for at se hvordan den iframe det skal ligge i ser ud.
Avatar billede roenving Novice
20. oktober 2003 - 17:00 #1
I IE5+ findes en oncontextmenu="event.returnValue=false;saetDinVariabel=this.id"
Avatar billede kaptajnb Nybegynder
20. oktober 2003 - 17:07 #2
joeh...

Her er et ex. på en højrekliksmenu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- // RightClickMenu

function showmenuie5(){
        var rightedge=document.body.clientWidth-event.clientX
        var bottomedge=document.body.clientHeight-event.clientY
        if (rightedge<ie5menu.offsetWidth)
            ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
        else
            ie5menu.style.left=document.body.scrollLeft+event.clientX
        if (bottomedge<ie5menu.offsetHeight)
            ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
        else
            ie5menu.style.top=document.body.scrollTop+event.clientY
        ie5menu.style.visibility="visible"
        return false
}
function hidemenuie5(){
        ie5menu.style.visibility="hidden"
}
function highlightie5(){
        if (event.srcElement.className=="menuitems"){
            event.srcElement.style.backgroundColor="highlight"
            event.srcElement.style.color="white"
        }
}
function lowlightie5(){
        if (event.srcElement.className=="menuitems"){
            event.srcElement.style.backgroundColor=""
            event.srcElement.style.color="black"
        }
}
function jumptoie5(){
        if (event.srcElement.className=="menuitems"){
            if (event.srcElement.url != ''){
                if (event.srcElement.getAttribute("target")!=null)
                    window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
                else
                    window.location=event.srcElement.url
            }
        }
}
// -->
</SCRIPT>
<STYLE TYPE='text/css'>
  .cMenu{
  position: absolute;
  visibility:hidden;
  cursor: default;
  font: menutext;
  width: 165px;
  background-color: menu;
  border: 1 solid buttonface;
  border: 2 outset buttonhighlight;
}

.menuitems{
  padding-left:15px;
  padding-right:10px;
}
</STYLE>
</head>

<body>
<RightClick>
<!--[if IE]>
<div id="ie5menu" class="cMenu" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">
<div class="menuitems" url="#">anchor</div>
<div class="menuitems" url="url" target="_blank">Link</div>
<HR>
<![endif]-->
<script language="JavaScript">
<!--
if (document.all&&window.print){
    ie5menu.className="cMenu"
    document.oncontextmenu=showmenuie5
    document.body.onclick=hidemenuie5
}
//-->
</script>
</RightClick>
</body>
</html>


Den indeholder to links der ikke er dynamiske, men med lidt snilde skulle det jo nok kunne lade sig gøre at lokke 'id' ud af div-en... I det hele taget kan du styre hele formatteringen fra stylesheetet der er angivet i headeren...

/KaptajnB
Avatar billede kaptajnb Nybegynder
20. oktober 2003 - 17:09 #3
menuen er lavet på baggrund af en extnsion til dw... er ikke selv den skarpeste til javascript - der er roenving nok lidt mere ovenpå - det er i hvert fald et noget kortere svar der fortæller samme historie - go´ roenving

/KaptajnB
Avatar billede eksperten1 Nybegynder
20. oktober 2003 - 17:57 #4
Jeg ser problemet sådan at alle de DHTML menuer de eksisterer er predefineret ved onload af dokumentet. Denne her menu skal altså før "laves" af ASP på serveren idet brugeren trykker. Alle oplysningerne skal være "friske" idet at siderne ændres hele tiden.

Kan jeg få JS til at hente data fra en dynamisk kilde ? Evt. hente værdierne fra en iframe som bliver opdateret først, så kan den jo altid være usynlig. ?
Så kunne jeg lave en menuInit(divid) funktion, som refresher iframen først ?
Avatar billede roenving Novice
21. oktober 2003 - 00:41 #5
Det er ikke et must, at en dhtml-menu overtager onload, sådan er de bare lavet -- delvist for at spare en bruger for overvejelser om hvordan man skal implementere onload i et dokument ...

-- men hvis du f.eks. har en linje med:

window.onload = menuinit;//eller et andet navn på en menu-funktion ...

-- kunne du ligesågodt skrive:
<body onload="menuinit()">

og også tilføje andre funktioner:

<body onload="menuinit();alert('Menuen er næsten klar !-)');">

-- en oncontextmenu kan så tilføjes hvorsomhelst, du har et element, f.eks. på dine divs, så kunne du skrive noget forskelligt som variabel elller lægge det ind i en submit til din server !-)
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