tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von Quaese
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
1112
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 24.01.11 21:31 #1
    Netzwerkidi Netzwerkidi ist offline Mitglied Gold
    Registriert seit
    Oct 2010
    Beiträge
    237
    Blog-Einträge
    1
    Hallo,

    Frage an die Experten: Ich will mit Hilfe von jQuery bei Klick auf einen Link danach ein anderes Element, das ich mit der Maus auswähle möchte mittels mousedown, ändern. Z. B. soll die Farbe des Backgrounds geändert werden.

    Besser wäre natürlich, das ganze dynamischer zu machen über eine Art Auswahlmenü und/oder über rechte Maustaste statt fest über einen Link oder einen Button und eine festdefinierte Funktion. Aber zuerst will ich das Ganze mal verstehen.

    Weiß einer, wie ich das mache? Oder wo kann ich nachschauen? Ich suche schon die ganze Zeit bei jQuery und über Google, aber irgendwie ist der Groschen noch nicht gefallen.

    Ansatz bisher war:

    Code :
    1
2
3

    $("#MyA").bind('click', function(event) {
  $(ZielElement).css("background-color","red);
});

    Grüße
    Geändert von Netzwerkidi (24.01.11 um 21:34 Uhr)
     
    Zitieren Zitieren
  2. 25.01.11 00:27 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    du könntest einen Bereich, eine Sammlung Elemente mit gleichem Attribut oder alle Elemente im Dokument bei einem Klick auf einen Link mit den notwendigen Event-Handlern versehen. Wird nun ein Element geklickt, wird es wie gewünscht formatiert und die Handler werden von den vorher ausgezeichneten Elementen wieder entfernt.

    Beispiel:
    Code :
    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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

    <html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="../JS-Scripts/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function(){
  $('.startIt').click(function(evt){
    // Neue Farbe aus title-Attribut
    var strCol = $(this).attr('title');
    // Standard-Funktion verhindern
    evt.preventDefault();
 
    // Alle Elemente im Element mit der ID "elemWrapper" mit den gewünschten Event-Handlern auszeichnen
    $('#elemWrapper *').bind('mouseenter.mark_all', function(){
      // Aktuelles Element mit Hintergrundfarbe hinterlegen, wenn der Cursor darüber ist
      $(this).css({
        background: '#ccc'
      });
    }).bind('mouseleave.mark_all', function(){
      // Hintergrundfarbe wieder zurücksetzen, wenn Cursor das Element verlässt
      $(this).css({
        background: ''
      });
    }).bind('click.mark_all', function(evt){
      // Standard-Funktion unterbinden
      evt.preventDefault();
 
      // Event-Handler wieder entfernen
      $('#elemWrapper *').unbind('click.mark_all').trigger('mouseleave.mark_all').unbind('mouseenter.mark_all').unbind('mouseleave.mark_all');
 
      // Neue Farbe zuweisen
      $(this).css({
        color: strCol
      });
 
    });
  });
})
 //-->
</script>
</head>
<body>
<ol>
  <li>Farbe wählen</li>
  <li>Cursor über gewünschtes Element im umrandeten Bereich bewegen</li>
  <li>Farbe durch Klicken an Element zuweisen</li>
</ol>
<a href="#" class="startIt" title="#f00" style="color: #f00;">rot</a>
<a href="#" class="startIt" title="#0f0" style="color: #0f0;">gruen</a>
<a href="#" class="startIt" title="#00f" style="color: #00f;">blau</a>
<a href="#" class="startIt" title="" style="color: #000;">ohne</a>
 
<div id="elemWrapper" style="border: 1px solid #000; background: #efefef; width: 400px; height: 400px;">
  <a href="#">Link</a>
  <p>Absatz</p>
  <div>DIV</div>
  <h1>Überschrift</h1>
</div>
</body>
</html>
    Ciao
    Quaese
    Netzwerkidi bedankt sich. 
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 25.01.11 08:44 #3
    Netzwerkidi Netzwerkidi ist offline Mitglied Gold
    Registriert seit
    Oct 2010
    Beiträge
    237
    Blog-Einträge
    1
    Hai Quaese,

    wie sagte mein früherer Cheffe immer: das unterscheidet den Tüftler vom Proffi!

    Vielen Dank für Deine Mühe zu unchristlicher Zeit.

    Welche Bedeutung hat dieses ".mark_all", weil es ja auch ohne lauffähig ist?


    Grüße

    Netzwerkidi
    Geändert von Netzwerkidi (25.01.11 um 08:52 Uhr) Grund: Ergänzung!
     
    Zitieren Zitieren
  4. 25.01.11 10:45 #4
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    dabei handelt es sich um sogenannte namespaces. Durch sie lassen sich Events besser verwalten und es wird z.B. ermöglicht, den richtigen Handler von einem Element zu nehmen, wenn dieses mehr als einen besitzt.

    Mehr findest du in der jQuery-Doku unter unbind oder hier.

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
« Klick auf Link abfangen und erst Funktion ausführen | Code kürzen mit regulären Ausdrücken »

Ähnliche Themen

  1. jQuery - Slide-Effekt mit einem Link bzw. Button
    Von bj-lover im Forum Javascript & Ajax
    Antworten: 5
    Letzter Beitrag: 28.10.10, 22:31
  2. jquery.click()
    Von Fruitgum im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 12.10.10, 15:05
  3. [jQuery] click() aufrufen
    Von Microhome im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 17.07.10, 22:20
  4. jquery click ausführen
    Von Microhome im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 10.09.09, 12:11
  5. Button --> Optik Ändern (soll aussehen wie ein Link)
    Von LxLehrling im Forum HTML & XHTML
    Antworten: 14
    Letzter Beitrag: 29.03.09, 13:55

Stichworte