Custom Contextmenu (objects)

[ErikBooy007]

Goedemiddag, ik heb even jullie hulp nodig bij een stukje javascript.

Ik ben bezig met een projectje waarbij ik verschillende elementen een eigen contextmenu wil geven.

Nu dacht ik aan zoiets:

[JS]
var contextmenus = {

'#datetime': [ 'Eerste Item', 'Tweede Item', 'Derde Item' ],
'#sf': [ 'Ander Eerste Item', 'Ander Tweede Item' ]

};
[/JS]

Nou goed, het is dus de bedoeling dat de div met ID "datetime" een contextmenu krijgt met "Eerste Item", "Tweede Item" en "Derde Item" erin. Dat contextmenu maken gaat me op zich denk ik wel lukken.

Alleen, hoe kan door het object loopen om zowel de "key" ('#datetime') als de waarden ('Eerste Item', 'Tweede Item', 'Derde Item') te achterhalen.

Met:

[JS]
for ( var i in contextmenus ) {
alert ( contextmenus ); // hier komt natuurlijk wat anders
}
[/JS]

kan ik wel de waarden achterhalen maar niet de "key".

Eigenlijk is dat dus wat ik graag wil weten Hoe kan ik deze "keys" uit een object halen?

 

[That Guy]

Met je i-variabele; deze wordt automatisch de key. Probeer dit maar:
[JS]for ( var i in contextmenus ) {
alert (i + "\n" + contextmenus );
}[/JS]:thumb:

 

[ErikBooy007]

Oh crap, waarom heb ik dat niet gewoon geprobeerd? Het ligt zo voor de hand

Bedankt Niels!

 

[That Guy]

Tsja, ik moet toegeven dat ik het zelf niet wist, maar wel vermoedde. Ik moest t eerst ook even testen

Gebruik (for... in) eigenlijk nooit.

yw :thumb:

 

[ErikBooy007]

Ik had ook al in een ouder topic gekeken, waarin je aan NielsDesmet hetzelfde uitlegde. Alleen dacht ik dat het hem om de waarden ging, dus ging ik ervanuit dat dat hier niet van toepassing was. Maakt het alleen maar gênanter

Maargoed, ik kan nu weer verder

 

[Robbinski12]

Ik moest het een paar keer doorlezen voordat ik doorhad wat je precies wilde bereiken :thumb:.

Maar in ieder geval staat het topic nog op niet beantwoord...

 

[ErikBooy007]

Goed punt, ik heb het aangepast

 

[Robbinski12]

Woow dat was snel...
Ik wilde net terug gaan om te zeggen dat ik het verkeerd gezien had

 

[ErikBooy007]

Nog even een vraagje,

Hoe kan ik bij het gebruik van unobtrusive JavaScript toch argumenten meegeven?

Als ik namelijk dit doe:

[JS]
for ( var i in contextmenus ) {
document.getElementById(i).oncontextmenu = showContextMenu(i);
}
[/JS]

wordt de code direct uitgevoerd. Terwijl ik wel graag aan de functie wil meegeven welk element geklikt is.

Ik heb ook dit geprobeerd:

[JS]
for ( var i in contextmenus ) {
document.getElementById(i).oncontextmenu = showContextMenu;
}


// en


function showContextMenu(E) {
alert(E.target.id);
}
[/JS]

Maar dan krijg ik de id van het element binnen de "container" waarop geklikt is, terwijl ik de functie het ID van de "container" wil laten gebruiken.

 

[Robbinski12]

http://abeautifulsite.net/notebook/80

dan kun je

$("#selector").contextMenu({
    menu: ''myMenu''
},
    function(action, el, pos) {
    alert(
        ''Action: '' + action + ''\n\n'' +
        ''Element ID: '' + $(el).attr(''id'') + ''\n\n'' +
        ''X: '' + pos.x + ''  Y: '' + pos.y + '' (relative to element)\n\n'' +
        ''X: '' + pos.docX + ''  Y: '' + pos.docY+ '' (relative to document)''
        );
});

(Quote van die site)

Of wil je geen jQuery??

ADDITION (ipv edit ): ik hoop dat dat is wat je zoekt (A)

 

[ErikBooy007]

Het is niet dat ik geen jQuery wil gebruiken, maar ik wil de code voor het contextmenu liever helemaal zelf schrijven. Op zich wel een leuke tip die site, ziet er goed uit

Maar de vraag blijft dus, hoe kan ik argumenten meegeven in unobtrusive javascript?

 

[ErikBooy007]

Ik was weer te snel, met wat trial and error ben ik er al uitgekomen

Het was natuurlijk gewoon:

[JS]
for ( var i in contextmenus ) {
document.getElementById(i).oncontextmenu = function(){ showContextMenu(i) };
}
[/JS]

Dus dat is opgelost.

Nu de állerlaatste vraag. Hoe krijg ik het nu voor elkaar, dat zowel dit ID (zoals in de bovenstaande code) als de "e-variabele" (sender) bruikbaar zijn in de code? Want nu wil ik ook nog graag de cursor-positie tijdens de click weten.

 

[That Guy]

Nu de állerlaatste vraag. Hoe krijg ik het nu voor elkaar, dat zowel dit ID (zoals in de bovenstaande code) als de "e-variabele" (sender) bruikbaar zijn in de code? Want nu wil ik ook nog graag de cursor-positie tijdens de click weten.

eh, ik volg je niet helemaal, maar je kan toch en je this en je event in een functie proppen? Zoiets:
[JS]function doStuff(event,elem)
{
alert(elem.id);
alert(event.STUFF);
}[/JS]
en de call:

<something id='x' onmouseover='doStuff(event,this);'></something>

zolang je event maar eerst kwam, geloof ik.

 

[ErikBooy007]

Ja klopt, maar ik wil het niet in m'n HTML hebben. Ik wil dus eigenlijk dit:

-- oh wacht, nu ik dit aan het typen ben zie ik het licht --

Goed, ik wil het dus eigenlijk unobtrusive, ik leg al m'n events dus vast in m'n JS-file.

Eerst had ik dit:

[JS]
document.getElementById('foo').oncontextmenu = showContextMenu(i);
[/JS]

Maar dan werd de functie meteen aangeroepen.

Toen maakte ik er dit van:

[JS]
document.getElementById('foo').oncontextmenu = function() {showContextMenu(i) };
[/JS]

en toen bedacht ik me, dat het event dan natuurlijk aan die anonieme functie kan worden meegegeven:

[JS]
document.getElementById('foo').oncontextmenu = function(e) {showContextMenu(e, i) };
[/JS]

Dus nu is het echt opgelost.

Bedankt!!

 

[That Guy]

Ah, zo, nou, ja, inderdaad, zo dus. p)



:thumb:

 

[ErikBooy007]

Haha, ik ben ook nog niet bepaald een genie met JavaScript, maar ik begin het nu langzamerhand een beetje te leren En vaak kom ik er dan niet uit, dan vraag ik om hulp en een paar minuten later vind ik toch de oplossing (zoals je net gemerkt hebt ).

Maarre, bedankt weer!

 

[Robbinski12]

unobtrusive, ik leg al m'n events dus vast in m'n JS-file

Weer een woord geleerd

EDIT: spel je het niet als unobstructive? Dat lijkt me logischer