Tutorials von Thomas Frei-Herrmann

JQuery Popup-Box - meine Box in der Größe “normal” schließt automatisch nach 8 Sekunden. Box in Größe “groß” bleibt stehen.

Bitte guckt Euch auch die neueren jQuery-Skripte zu dieser Box an, die ich so eingebaut habe, dass sie auch im Doctype “XHTML” und “HTML5” mit NOF funktionieren.

Diese Verlinkungen gehören in die Layout-HTML “Zwischen Head-Tags”:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" media="all" />

... dabei könnt Ihr in der 3. Code-Zeile das oben in der Auswahlbox dargestellte Farbschemata wählen. Ich habe hier als Standard redmond gewählt. Sucht Euch eines der Farbschemata oben in meiner Auswahlbox aus und schreibt dann, anstelle von “redmond”, den Namen des Schemas hin das Euch gefällt, also z.B.: ui-darkness

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />

Bitte verwendet eine valide HTML-Ausgabe wie z.B. den Doctype “Loose”.

> Textfeld aufziehen > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code in den HTML-Code Editor

Ich lasse die kleine Box hier automatisch nach 8 Sekunden schließen. Wollt Ihr das nicht, dann lasst die rot markierte Zeile unten im Skript weg.

<script type="text/javascript">
   $.ui.dialog.defaults.bgiframe = true;
   $(function() {
      $("#dialog").dialog();
      setTimeout(function(){$("#dialog").dialog("close")}, 8000);
   });
</script>
<div id="dialog" title="Box">
   <p align="center">
   <br><br>
   <font color='#0000FF'>
   Diese <b>Box</b> ist sehr einfach
   <br>
   einzubauen
   </font>
   <br><br>
   <font color='#FF0000'>
   Hier ein <i>roter</i> Text
   </font>
   <br><br>
   <a href="http://www.nof-schule.de/forum/" target="_blank">Bei Fragen wendet Euch an <i>unser Forum</i></a>
   <br><br>
   <img src="./assets/images/NOF-Hilfe-Tommy.png" title="Herzlich willkommen">
  </p>
</div>

Wollt Ihr die Box in einer anderen Göße aufgehen lassen (hier: Breite 600px, Höhe 400px) , dann müsst Ihr die oben blau markierte Zeile ändern in z.B.:

      $("#dialog").dialog({width: 600, height: 400});

... für weitere Optionen und Einstellungen guckt bitte auch hier:

http://jqueryui.com/demos/dialog/

... hier habe ich einige HTML-Befehle eingebaut, wie:

• <p align="center">was zwischen diesen Tags steht ist zentriert</p>
• <br> = bewirkt einen Zeilenumbruch
• <font color='#0000FF'>was zwischen diesen Tags steht ist, bei diesem Farbcode #0000FF, blau</font>
• <b>was zwischen diesen Tags steht wird fett dargestellt</b>
• <i>was zwischen diesen Tags steht wird kursiv dargestellt</i>
• <a href="http://www.Domain.de/Verzeichnis(se)/seite.html" target="_Ziel">Link-Text</a> = so sieht ein Hyperlink aus
• <img scr="absolute oder relative Verzeichnisangabe/Bildname" title="Titel des Bildes"> = so sieht ein Link zu einem Bild aus