Entwickler-Ecke
Off Topic - [JavaScript] Kontextmenü mit eigenem Design
ConditionZero - Fr 07.05.10 21:24
Titel: [JavaScript] Kontextmenü mit eigenem Design
Moin,
ich hoffe, dass ich mit meinem Anliegen im OT-Bereich richtig bin, falls nicht sorry. ;)
Vorweg muss ich anmerken, dass ich so gut wie keine Kenntnisse in Javascript habe. Ich habe es bisher auch nie gebraucht.
Ich arbeite im Moment an einer Homepage, einer Fanpage für ein MMORPG. Das Design soll aber etwas besonderes sein, was sich allein mit HTML kaum realisieren lässt. Also habe ich mir überlegt, statt der normalen Menüführung in einem Frame oder einer Tabelle an der Seite diese über das Kontextmenü der Page zu führen.
Jetzt sieht das Design des Windows-Kontextmenü ziemlich langweilig aus und es wäre auch kein Unikat, also habe ich ein eigenes Menü entworfen. Momentan als animiertes GIF + pro Button ein eigenes Bitmap, in dem dessen Farben als Hervorhebung invertiert sind. Beide GIF's und alle Bitmaps haben die einheitliche Größe von 87*288 Pixel.
Folgende Funktion möchte ich erreichen:
Bei Rechtsklick geht das Kontextmenü (GIF-Animation) auf. Während der circa 0,5 Sekunden langen Animation sollte das Menü und die Buttonhervorhebung noch nicht funktionieren, da die Animation das Menü erst "aufbaut". Wenn das Menü aufgebaut ist, sprich die Animation fertig ist, soll die Hervorhebung - und natürlich die Links der Buttons - funktionieren.
Hervorhebung heißt, dass sobald man mit der Maus über ein Button fährt, das jeweilige Bitmap mit dem Menü, indem der Button hervorgehoben ist, über das GIF gelegt werden soll. Wenn das Kontextmenü schließt soll eine weitere GIF-Animation darüber gelegt werden, welche das Menü wieder "einklappt".
So nun ein paar Fragen zu dem langen Text:
1. Wäre es denn einfacher das alles als modifiziertes Kontextmenü zu realisieren, oder dieses bei Aufruf blockieren und einfach die Animation an entsprechender Stelle abzuspielen?
2. Wie kann ich dann herausfinden, welcher Button auf der Animation geklickt wurde? Einfach beim erstellen des Menüs die Positionen berechnen und überprüfen, ob auf einen der Bereiche geklickt wird?
3. Ist das ganze Vorhaben überhaupt realistisch? Wenn nein, wie dann?
Da ich - wie erwähnt - kaum JavaScript-Kenntnisse habe, sind Codeschnipsel sehr willkommen. Natürlich auch eine Komplettlösung ;)
Das ganze ist schwierig zu erklären, deshalb schreibe ich es bei Bedarf nochmals als Pseudo-Code.
Dankend und grüßend
Marc
ALF - Fr 07.05.10 23:13
Hi, :welcome: hier im Forum. Java hat zwar wenig mit Delphi gemein, aber
Ich versuch mal ein bisschen zu Antworten.
 ConditionZero hat folgendes geschrieben  : |
Folgende Funktion möchte ich erreichen:
Bei Rechtsklick geht das Kontextmenü (GIF-Animation) auf. |
Wirst Du Probleme bekommen, da in Windows z.B. der rechtklick, wie Du sicher selbst schon festgestellt hast für das interne Popupmenu belegt ist.
Ein Mousehover effekt würde da sicherlich reichen zum starten des Menuegifs!
Wenn Du dan mit dem Mouszeiger über die Menuepunkte fährst, verändern sie sich durch hervorheben z.B.
Mit klick dann auf den MenueButton, wird der jeweilige link aufgerufen!
Währe so mein Vorschlag um es umzusetzen.
Ein simples Beispiel findest Du
hier [
http://www.on-mouseover.de/script1.htm]
und auch überall im Inet, so für den Anfang.
Mit Java mh..., nicht jeder hat java aktiv. CSS währe da sicherer!
Gruss Alf
jaenicke - Fr 07.05.10 23:29
| ALF hat folgendes geschrieben : |
| Wirst Du Probleme bekommen, da in Windows z.B. der rechtklick, wie Du sicher selbst schon festgestellt hast für das interne Popupmenu belegt ist. |
Trotzdem kann man den blockieren oder umfunktionieren.
Das ist auch sehr sehr einfach, hab ich auch schon gemacht, Beispiel hier:
http://www.flexdirectory.com/sandbox/rightclickmenu.html
| ALF hat folgendes geschrieben : |
| Mit Java mh..., nicht jeder hat java aktiv. CSS währe da sicherer! |
Damit geht das aber nicht. Wer JavaScript deaktiviert, der muss eben damit leben, dass nicht alles geht. Vieles lässt sich ohne eben nicht umsetzen. :nixweiss:
ALF - Fr 07.05.10 23:48
| jaenicke hat folgendes geschrieben : |
| Damit geht das aber nicht. Wer JavaScript deaktiviert, der muss eben damit leben, dass nicht alles geht. Vieles lässt sich ohne eben nicht umsetzen. :nixweiss: |
Och nö :shock: ich zitiere mal aus meinem link.
| Zitat: |
Der CSS-Mouseover funktioniert ohne Javascript und erscheint damit auch ausnahmslos in allen Browsern, also auch solchen, die Javascript deaktiviert, d.h. bewusst oder vielleicht unbewusst (bei Anfängern) ausgeschaltet haben
Jedes Menü ist mit Textlinks erstellt. Das erleichtert Ihre Arbeit, denn Sie sind flexibler.
Der CSS-Mouseover kann ganz ohne Grafik auskommen ( dann Mouseover per Hintergrundfarbe, Rahmenfarbe, Schriftfarbe oder ähnliches )
Wenn beim CSS Mouseover Grafiken verwendet werden- was die Optik steigert, so kommt er nur mit den selben 2 Grafiken ( eine für den Ausgang und eine für den Mouseover ) für ein komplettes Menü aus - egal wie viele Links ! )
|
:gruebel:
@BenBe - Sorry ich meine ja auch JS :wink:
Gruss Alf
BenBE - Fr 07.05.10 23:49
1. Java <> JavaScript
2. Vieles geht auch ohne JS zu einem guten Stück umzusetzen (CSS und :hover ;-))
3. Bei mir ist im FF auch bei aktiviertem JS das deaktivieren der rechten Maustaste für JavaScripts tabu (viele Scripte, die das nutzen, nerven einfach, weil sie glauben, mich vom Ansehen des Quelltextes abhalten zu wollen).
4. Barrierefreiheit
ALF - Sa 08.05.10 09:46
| jaenicke hat folgendes geschrieben : |
| Dafür ist es ohnehin sinnvoll einen Bedienweg ganz ohne Hover oder Rechtsklick zu haben. |
Ich glaube, da sind wir uns alle einig.
Eine gut gepflegte Seite (aktuelle Informationen), mit solidem und übersichtlichen Style ist ansprechender als eine wo,
beim ersten Besuch ein "Wow" effekt entsteht
beim zweiten "naja" kommt und
beim dritten Besuch "es nervt" entsteht.
Weil nun mal die letzte aktuelle Information schon 3-4 Wochen alt ist :shock:
@ConditionZero: Solltest Du vielleicht in Deinem Konzept mit berücksichtigen, nur so als Vorschlag :wink:
Gruss Alf
ConditionZero - Sa 08.05.10 15:26
Wow, da kam ja schon eine ganze Menge. :)
| ALF hat folgendes geschrieben: |
| @ConditionZero: Solltest Du vielleicht in Deinem Konzept mit berücksichtigen, nur so als Vorschlag |
Ja, es ist ja nichts aufzwingendes, um das der Besucher nicht drum herum kommt. Einmal gibts eine Navigation im oberem Frame und dann eben als kleines Highlight die Kontextmenü-Variante. Will der Besucher nichts von der Funktion wissen, benutzt er eben das normale Menü.
Habe auch schon meine Ansätze, wie was funktionieren wird, muss dann eben die entsprechenden Befehle googeln. Nur eine Sache macht mir zu schaffen, und zwar eben dieses erkennen, wann die Maus auf welchem Button im GIF ist. Da habe ich momentan im Kopf, dass man die Position der Maus auslesen könnte, wenn geklickt wird und Anhand dieses Wertes und den (bekannten) Abmessungen des GIFs für jeden Button einen Pixelbereich festlegen, in dem dieser beim jeweiligen Menüaufruf ist. So könnte man dann sobald der Bereich mit der Maus berührt wird das passende Bild aufrufen.
Aber geht das nicht eleganter?
| ALF hat folgendes geschrieben: |
Hi, :welcome: hier im Forum. Java hat zwar wenig mit Delphi gemein, aber
Ich versuch mal ein bisschen zu Antworten |
Bin schon eine Weile hier angemeldet, war nur länger inaktiv ;)
Grüße
ConditionZero
ALF - Sa 08.05.10 15:35
oops, als ich den Thread las,stand nix auf der linken Seite bei mir :gruebel:
Ob Du das mit JS oder CSS machst, schau mal den link von mir an!
Nen kleinen Tip so am Rande :wink: . Ich habe mir früher immer den InetTemp Ordner durchgesucht um zu sehen wie es die anderen machen. Ist zwar nicht die feine englische Art, aber beflügelt ein ungemein.
Gruss Alf
ConditionZero - Sa 08.05.10 16:56
| ALF hat folgendes geschrieben : |
oops, als ich den Thread las,stand nix auf der linken Seite bei mir :gruebel:
Ob Du das mit JS oder CSS machst, schau mal den link von mir an!
Nen kleinen Tip so am Rande :wink: . Ich habe mir früher immer den InetTemp Ordner durchgesucht um zu sehen wie es die anderen machen. Ist zwar nicht die feine englische Art, aber beflügelt ein ungemein.
Gruss Alf |
Ich werds mit JS machen. Ich habe mir den Link schon angeschaut, hab auch lange das www durchforstet, bevor ich hier gepostet habe. Leider habe ich aber auch nichts vergleichbares gefunden, auch mit dem klauen fremder Scripts. ;)
Also hier jetzt doch mal ein Pseudo-Code, vielleicht kann mir jemand das ja übersetzen :).
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
| <script
language="JavaScript">
<!--
$MenuOpen=0;
if Rightclick
{ Kontextmenü.Abfangen;
MenuOpen=1;
Load['MenuOpen.gif',MousePos];
Wait(500); /* Zeit bis Animation fertig ist warten */
MenuOpen=1; }
if (Leftclick) and not (MousePos in 'MenuOpen.gif')
{ Load['MenuClose.gif','MenuOpen.gif'.Pos]
Wait(500);
MenuOpen=0; }
/* Button 1 */
if (MenuOpen=1) and (MousePos[Pixelbereich[Btn2]])
{ Load['HighlightBtn1.bmp','MenuOpen.gif'.Pos]
OnClick=LadeLinkVonBtn1; }
/* Button 2 */
if (MenuOpen=1) and (MousePos[Pixelbereich[Btn2]])
{ Load['HighlightBtn2.bmp','MenuOpen.gif'.Pos]
OnClick=LadeLinkVonBtn2; }
/* Button 3 */
if (MenuOpen=1) and (MousePos[Pixelbereich[Btn3]])
{ Load['HighlightBtn2.bmp','MenuOpen.gif'.Pos]
OnClick=LadeLinkVonBtn3; }
/* ... */
//-->
</script> |
Das hat jetzt wenig mit JS oder was auch immer zu tun, aber stellt mein Ansatz gut dar.
Was haltet ihr davon?
Grüße
ConditionZero
jaenicke - Sa 08.05.10 17:36
Für Animationen und sowas gibt es
JQuery [
http://www.jquery.com/]. Da arbeite ich jetzt seit ein paar Tagen auch damit, allzuviel JavaScript kann ich auch noch nicht. Aber damit kommt man schon sehr schnell klar.
Da gibt es dann auch Callback-Funktionen um nach erfolgreichem Abschluss einer Animation eine andere Aktion durchzuführen. Eben zum Beispiel Menüeinträge freizuschalten oder sowas.
ConditionZero - Sa 08.05.10 17:51
| jaenicke hat folgendes geschrieben : |
Für Animationen und sowas gibt es JQuery [http://www.jquery.com/]. Da arbeite ich jetzt seit ein paar Tagen auch damit, allzuviel JavaScript kann ich auch noch nicht. Aber damit kommt man schon sehr schnell klar.
Da gibt es dann auch Callback-Funktionen um nach erfolgreichem Abschluss einer Animation eine andere Aktion durchzuführen. Eben zum Beispiel Menüeinträge freizuschalten oder sowas. |
Das hört sich ja mal nicht schlecht an. Letzteres hat mir nämlich auch schon Kopfschmerzen bereitet.
Werde ich mir mal anschauen.
Ja solche Seiten habe ich zu genüge gefunden (aber für JS, an CSS hatte ich davor noch nicht gedacht). Das Problem dabei ist, dass man da eine riesige Portion Codeschnipsel vorgesetzt bekommt und diese dann nach kurzer Erläuterung zu seiner Funktion zusammenflicken kann. Wie eine Art Baukasten eben. Allerdings habe ich keine Codes gefunden, die die Funktionen, die ich brauche beinhalten. Das Anpassen ist durch meine JS-Kenntnisse -jetzt noch- eben sowieso ziemlich schwierig.
Grüße
ConditionZero
ConditionZero - Sa 08.05.10 21:30
Wie binde ich denn JQuery ein? Den Script in den HTML Code als JS einfügen? Oder die *.js Datei als Ressource irgendwie ablegen? :oops:
Sorry für den Doppel-Post, aber ein Edit hätte den Thread nicht gepusht.
Grüße
ConditionZero
jaenicke - Sa 08.05.10 21:36
Die jquery.js irgendwo speichern und normal einbinden.
Quelltext
1:
| <script language="javascript" type="text/javascript" src="jquery.js"></script> |
Schon kannst du nach diesem Code (der normalerweise im Head steht) die Befehle usw. nutzen.
ConditionZero - Sa 08.05.10 21:48
| jaenicke hat folgendes geschrieben : |
Die jquery.js irgendwo speichern und normal einbinden.
Quelltext 1:
| <script language="javascript" type="text/javascript" src="jquery.js"></script> | Schon kannst du nach diesem Code (der normalerweise im Head steht) die Befehle usw. nutzen. |
Ok, habe gerade gesehen, dass ich mich im Pfad vertan habe, habe den gedankenlos absolut angegeben... :roll:
Danke.
Ich probier mich heute abend mal daran, arbeite mich in JQuery ein bisschen ein, aber lass den Thread mal noch offen falls noch eine Frage aufkommen sollte.
Danke @all für die schnelle Hilfe :)
Grüße
ConditionZero
jaenicke - Sa 08.05.10 22:10
Klitzekleines Beispiel (aus dem Kopf geschrieben):
Quelltext
1:
2:
| <a href="#" onclick="$('#example').show('normal')">Klick einmal</a>
<div id="example" style="display: none">Test Test usw.</div> |
;-)
// EDIT: Tippfehler korrigiert
ConditionZero - Sa 08.05.10 23:24
So, also ich bin daran mein Pseudo-Code in JS zu übersetzen. Mühevoll ist aber mir die ganzen Befehle raus zu suchen und über jeden einzelnen zu recherchieren.
Wäre mir eine ganz große Hilfe und vor allem Zeitersparnis, wenn mir jemand die passenden Befehle für folgende Stichwörter geben kann:
- Mausklicks (wurde rechte Maustaste geklickt?)
- Grafiken an bestimmte Position laden (oberer linker Punkt der Grafik an Mausposition)
- Kontextmenü blockieren/ausblenden (document.oncontextmenu ...?)
- Grafik ausblenden (Visible, nicht freigeben)
- Mausposition auslesen
- Variable um Bereich festzulegen (vielleicht ein Array mit den Eckpunkten?)
- Warten bis Gif-Animation fertig abgespielt ist
Ich bin zwar nicht zu faul um das alles nachzuschlagen oder JS allgemein zu lernen, aber stehe ein wenig unter Zeitdruck, da das Grundgerüst demnächst fertig sein sollte, damit mir mein Helfer der die Inhalte übernimmt nicht flöten geht. Bin auch ziemlich mit dem JQuery-Kram gefordert. :?
Grüße
ConditionZero
ConditionZero - So 09.05.10 01:43
| jaenicke hat folgendes geschrieben : |
| ConditionZero hat folgendes geschrieben : | | [*] Mausklicks (wurde rechte Maustaste geklickt?) |
Das und die weiteren Punkte bezüglich des Menüs passieren doch alle schon in dem Beispiel. |
Oh, dein Post habe ich komplett übersehen. :shock: Danke. Ja das deckt schonmal die ersten Punkte ab. Anhand deiner Erläuterungen müsste auch das weitere kein Problem sein. Wenn mir mein Job morgen genug Zeit lässt (Selbstständig - da weiß man nie, wann Feierabend ist ;)) werd ich den Script mal posten.
Grüße
ConditionZero
jaenicke - So 09.05.10 10:19
Zu der Gif-Animation: Ich selbst verzichte auf so etwas, weil das je nach Rechnerauslastung usw. evtl. nicht ganz sauber läuft. Es kann dann ja sein, dass sich die Anzeige verzögert und du denkst diese sei bereits beendet usw., so dass du die bereits vorher wieder ausblendest.
Deshalb ist die Frage ob nicht normale Fading-, Farb- oder Scroll-Effekte oder andere CSS-Änderungen ausreichen. Denn die lassen sich viel besser steuern mit JQuery und da weißt du auch immer, dass diese wirklich abgeschlossen sind wegen dem erfolgten Callback.
jaenicke - So 09.05.10 10:47
Ob auch für Gif-Animationen weiß ich zwar nicht, aber ich vermute nicht. Ich meinte die internen Animationen, die JQuery bietet. Und die sind meistens schon mehr als ausreichend für Webseiten.
Deshalb ja auch der Hinweis auf SetTimeout:
| jaenicke hat folgendes geschrieben : |
| ConditionZero hat folgendes geschrieben : | | [*] Warten bis Gif-Animation fertig abgespielt ist |
Bei einer Gif-Animation musst du denke ich SetTimeout nehmen und einfach die Laufzeit der Animation angeben. |
Möglich ist aber nach erfolgreichem Laden der Gif-Animations-Datei aus dem Internet in der Callback-Funktion SetTimeout zu nutzen, so sollte das relativ gut hinkommen. Aber eben vermutlich nicht immer 100%ig.
ALF - So 09.05.10 12:25
Hi, Ich melde mich noch mal dazu :wink:
@ConditionZero, diesen Effekt wie Du sie in den Gif's drin hast closemenu/openmenu kannst Du auch ohne Bilderchen machen, wie @jaenicke es schon gesagt hat! Zumal Du dann keine weiteren gifs benötigst für das selekten des jeweiligen link. Du müsstest ja für jede Zeile im Menu ein neues Gif Laden usw.
Gruss Alf
jaenicke - So 09.05.10 12:50
Man kann mit einem Gif natürlich schon mehr machen. Allerdings wird dadurch auch die Seite träger. Während bei den JQuery Animationen die Animation vielleicht mal nicht so gut zu sehen ist, aber dafür hängt die Seite nicht, wenn der PC gerade ausgelastet ist.
Deshalb ist eben die Frage wie die Gifs aussehen, ob das tatsächlich irgendwelche aufwendigen Effekte sind oder nur einfache wie sie JQuery auch kann. Und wenn die Gif-Animation aufwendiger ist, ist die Frage ob dies dann sein muss oder eine normale Animation auch reicht.
Leider sehen die Skriptanimationen beim IE 8 noch nicht so gut aus und ruckeln beim Firefox manchmal leicht, aber in Chrome, Opera und Safari laufen die sehr gut. Und mit dem IE 9 sehen die auch da super und flüssig aus.
ALF - So 09.05.10 13:08
Die Gifs befinden sich in seinem DL.
die open/close Gifs, müsste er sowieso noch schneller machen!
Wie schon gesagt, er bräucht ja auch noch jedemenge gifs für den selektierten link(Buttons), hat er ja schon,
aber 76KB gifs nachladen ich weiss nicht mh....!
Gruss Alf
jaenicke - So 09.05.10 13:55
Der Download wurde hier gar nicht angezeigt. Erst nach einmal F5 habe ich den jetzt gesehen.
Ja, diese Animationen kann man auch komplett mit JQuery machen, sogar fast 1:1. Wobei es am einfachsten wäre nur in eine Richtung zu bewegen (einfach show/hide), aber ich denke es geht auch exakt wie in der Gif-Animation. (Ich weiß nur noch nicht wie, vermute aber mit animate geht das. :mrgreen:)
ConditionZero - So 09.05.10 15:06
| ALF hat folgendes geschrieben : |
@ConditionZero, diesen Effekt wie Du sie in den Gif's drin hast closemenu/openmenu kannst Du auch ohne Bilderchen machen, wie @jaenicke es schon gesagt hat! Zumal Du dann keine weiteren gifs benötigst für das selekten des jeweiligen link. Du müsstest ja für jede Zeile im Menu ein neues Gif Laden usw.
|
Wie soll das ungefähr ablaufen? Das komplette Menü ist nur ein einziges Gif und nicht zusammengewürfelt. D.h. JS weiß nicht wo welcher Button sitzt, außer wenn man es berechnen würde. Genau solche Berechnungen sind zwar schon in Planung mit drinnen, aber die versuche ich noch zu umgehen, da das ja alles andere als Fail-Safe ist. Allein wenn jemand mit anderer Auflösung auf die Page geht stimmen die Berechnungen schon nicht mehr und falsche Bereiche würden hervorgehoben werden. Die Auflösung beim Besuch der Page zu ändern, wäre ziemlich unverschämt und wohl kein Besuchermagnet :lol: .
Aber so wie du sagst, dass für jede Zeile ein neues Bild geladen werden muss, habe ich das bis jetzt immer gemacht. Hat performancetechnisch auch nie Probleme gegeben.
| ALF hat folgendes geschrieben : |
| die open/close Gifs, müsste er sowieso noch schneller machen! |
Hast du sie mit der normalen WinXP Bildanzeige angeschaut? Wenn ja kann es sein, dass du sie langsamer siehst als sie sind, so ist es zumindest bei mir. Deshalb habe ich des Zeitabstände zwischen den Frames in den Namen mit reingeschrieben. Alle vier Animationen laufen bei mir gleich schnell ab :? .
| ALF hat folgendes geschrieben : |
Wie schon gesagt, er bräucht ja auch noch jedemenge gifs für den selektierten link(Buttons), hat er ja schon,
aber 76KB gifs nachladen ich weiss nicht mh....! |
Momentan sind das auch noch 24-Bit-BitMaps, die aktuellen Farben funktionieren auch mit einem 256-Farben-BitMap. Womöglich sogar nur mit 16 Farben, müsst ich mal testen. Also da kann man noch einiges ohne wirklichen Qualitätsverlust verkleinern.
| jaenicke hat folgendes geschrieben : |
Ja, diese Animationen kann man auch komplett mit JQuery machen, sogar fast 1:1. Wobei es am einfachsten wäre nur in eine Richtung zu bewegen (einfach show/hide), aber ich denke es geht auch exakt wie in der Gif-Animation. (Ich weiß nur noch nicht wie, vermute aber mit animate geht das. :mrgreen:) |
Meinst du damit, dass man das Design komplett ohne Bilder nur durch JQuery-Funktionen (Shapes, etc?) zusammenbastelt?
Das wäre nicht schlecht dann hätte ich für jede noch so kleine Kante die exakte Position und Abmessung. Da werd ich mich mal in JQuery durch die Materie lesen.
Grüße
ConditionZero
//Edit: Ok, mit meinen letzten Zeilen habe ich mir die Frage am Anfang schon selbst beantwortet... Wo bin ich heute nur mit dem Kopf :nixweiss:
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!