Tutorial jQuery PowerTip Box

http://stevenbenner.github.io/jquery-powertip/

Ich beschreibe in diesem Tutorial vom 17.02.2014 die Version 1.2.0 vom 03.04.2013

Bitte ladet Euch zunächst die Beispiel-Dateien oben am Link herunter. Das ist für die Erstellung hilfreich und in einem Verzeichnis “css” findet Ihr auch jede Menge bereits vorbereiteter CSS-Dateien in unterschiedlichen Farbschemen.

Für die Skripte ist eine jQuery-Datei ab Version 1.7 oder höher zu verwenden.

NOF 2013 beinhaltet bereits eine jQuery 1.8 und daher braucht Ihr diese bei NOF 2013 nicht eintragen. Ansonsten könnt Ihr z.B. die jQuery 1.7 als Link in den <Head> der Seite eintragen.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > zweiter Button (von links) “Zwischen Head Tags

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Hier zum besseren Verständnis ein Screenshot meiner Seitenansicht:

Nun benötigt Ihr die Verlinkung zu der CSS-Datei Eurer Wahl, die Ihr im Download der Skripte findet. Diese CSS-Datei habe ich hier in ein Verzeichnis “css” kopiert, das bei mir im Stammverzeichnis liegt und die Style-Anweisungen der einzelnen DIV - IDs, die Ihr wieder in den <Head> der Seite kopiert. Wobei jedes Objekt seine eigene ID benötigt, in meinem Beispiel also eine für die Textbox, der ich noch zusätzliche CSS-Anweisungen gegeben habe und hier je eine für jedes Bild, die in meinem Fall nur zur Gründung der IDs dienen und keine Anweisungen enthalten.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > zweiter Button (von links) “Zwischen Head Tags

<link rel="stylesheet" type="text/css" href="./css/jquery.powertip-light.css" />

<style type="text/css">
   #mouseon-box div {
      background-color: #EAEAEA;
      border: 1px solid;
      border-color: #C0C0C0;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      text-align: left;
      width: 300px;
      padding: 30px;
   }
  
   #mouseon-vogel div {
   }
  
   #mouseon-loewe div {
   }
  
   #mouseon-elefant div {
   }     
  
   #mouseon-logo div {
   }
</style>

Weiterhin fügt Ihr die Verlinkung zu der Datei jquery.powertip.js in die Seiten-HTML ein. Hier am “Beginn des Haupttextes” <BODY>, da es sonst einen Konflikt mit den Javascripts von NOF gibt.

Bitte achtet, wie immer, auf die korrekte relative Pfadangabe zu dieser Datei, die ich bei mir in das Stammverzeichnis kopiert habe.

<script type="text/javascript" src="./jquery.powertip.js"></script>

Für die Textbox, die oben im Style als “#mouseon-box div” eigene CSS-Anweisungen trägt, habe ich ein Textfeld aufgezogen und meinen Text hinein geschrieben.

Dann habe ich in die Objekt-HTML des Textfeldes eingetragen:

> Texteld markieren > Fenster “Text-Eigenschaften” > Button “HTML”

> “vor dem Tag” (“vorher”):

<div id="mouseon-box"><div>

> “nach dem Tag” (“nachher”):

</div></div>
<script type="text/javascript">
   $(function() {
      // mouse-on box
      var mouseOnDiv = $('#mouseon-box div');
      var tipContent = $(
         '<p><b>Die jQuery Box</b></p>' +
         '<p><a href="http://www.nof-tutorials.com/Infobox-Mouseover/" target="_blank">zu meiner Infobox Seite</a></p>' +
         '<p><a href="http://www.tommyherrmanndesign.com/nof/html/mouse-overlib.html" target="_blank">zu meiner Overlib-Seite</a></p>'

      );
      mouseOnDiv.data('powertipjq', tipContent);
      mouseOnDiv.powerTip({
         placement: 'se',
         mouseOnToPopup: true
      });
   });
</script>

Ihr könnt also oben wieder die zu dieser Textbox gehörende ID erkennen. Den Inhalt der jQuery-Box könnt Ihr frei gestalten. Die Option placement: 'se' gibt hier die Richtung der aufgehenden Box an - hier also ‘se’ für “south-east” (Südosten).

Ebenso habe ich es mit den Bildern gemacht. Die Objekt-HTML der “Bild-Eigenschaften” zu meinem Bild vom Löwen sieht dann so aus:

Wie Ihr im Screenshot oben erkennen könnt, habe ich hier die Richtung der aufgehenden Box auf ‘e’ für “east” (Osten) gestellt.

  • Einige Tipps:
     
    • Wollt Ihr, dass die Box der Maus folgt (wie bei meinem Bild vom Vogel), dann verwendet Ihr anstelle von z.B. placement: 'e' die Option
      followMouse: true.
       
    • Wollt Ihr, dass sich die Position “intelligent” anpasst, falls der Bildschirmrand für die Größe der Box keinen Platz bietet, so setzt Ihr noch die Option smartPlacement: true hinzu. Oder Ihr könnt das Schließen der Box z.B. um 2 Sekunden mit der Option closeDelay: 2000 verzögern.
       
    • Wollt Ihr, dass die Box bei Mausüber nicht stehen bleibt, dann setzt die Option mouseOnToPopup: false (unwahr) anstatt auf true (wahr).
       
    • Alle Optionen werden durch Kommata getrennt, die letzte Option darf kein Komma am Ende haben.
       
    • Für einen Link müsst Ihr anstelle der DIV-ID im Style eine Span-ID verwenden, also z.B. #mouseon-cssdatei span { } und dann anstelle der DIVs eben Span-Tags <span> ... </span> in der Objekt-HTML des Link-Fensters angeben.
       
    • Die Anwendung für einen Hotspot ist in NOF nicht möglich, da dem Hotspot die Objekt-HTML für einen Link fehlt.

Hier noch ein Beispiel der möglichen Positionen:



 

Der PowerTip dieser Box erscheint rechts und Du kannst auf das Logo klicken. Weiterhin kann man diese Box unten mit den Buttons öffnen und schließen
 

 

Wetter in Berlin

Hier in einem Inlineframe

Wann wurde diese Seite geladen (API):

 

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen

Counter Statistik