Gästebuch   Impressum

 

>> Startseite    >> Scripting    >> jquery Newsbox **  
 

Jquery Popup-box für Netobjects Fusion

Auf der Startseite ist dem einen oder anderen möglicherweise das kleine Fenster aufgefallen, in dem ich die neuen Kurse im NOF-Camp ankündige. Die Box ist eine kleine und recht einfache jquery-Anwendung, die sich auch in Netobjects Fusion einbauen lässt.

Da die Box kein echtes Popup wird sie nicht via Popup-Blocker geblockt. Der Einbau ist dank der Online-Apis von Google (wie wir sie auch für den Datepicker nutzen) recht simple und für den Look lässt sich aus einer Fülle verschiedener Online-Styles wählen.

Auch prima: Da der Text ein div ist, wird er auch von google gefunden und indiziert.

das kommt zwischen die Headtags der Seite

Alle js-Dateien und CSS-Dateien verlinken wir mit einer Online-Version die Google zur Verfügung stellt. So müssen wir keine Dateien downloaden und als Asset einfügen. Auch die gefürchtete Referenzierung des Pfads entfällt. Achtet auf die fette Markierung: das ist der genutzte Style - dieser Name kann geändert werden (siehe unten).

<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" />

Das kommt ans Ende des Body

Bitte aufmerksam lesen: hier versteckt sich der Teil, in dem Ihr euren eigenen Text einfügen könnt ;-)

<script type="text/javascript">
   $.ui.dialog.defaults.bgiframe = true;
   $(function() {
      $("#dialog").dialog();
   });
   </script>
<!-- hier kommt überschrift und Fließtext-->
<div id="dialog" title="RappZapp - das ist mal flott!!">
<p>und hier der wichtige fließtext</p>
</div>

Wem die Farbe nicht gefällt...

Statt redmond kann man aus Unmengen an fertigen Farbkombinationen wählen - hier eine kleine Auswahl

  1. blitzer
  2. start
  3. vader
  4. redmond
  5. und viele mehr

Eine Übersicht (und das sind wirklich viele ) findet ihr hier (Leerzeichen im Namen durch Bindestrich ersetzen... ;-)

http://jqueryui.com/themeroller/

Das wars - viel Spaß damit

 


dieses tutorial

version: alle versionen
Schwierigkeitsgrad: leicht

Neue Tutorials

Suchfunktion einbauen
MLR kopieren
SuMa-Optimierung
Alle Filme wieder online
Weicher Bildwechsler mit Text
Die 2-Minuten-Newsbox
Das erste eigene Buttonset
Datepicker für Formulare
Includieren in NOF
Bildkomprimierung
Publizierungseinstellungen
Assetverwaltung

Content Management für Netobjects Fusion

Inhalte und Bilder ohne NOF aktualisieren
Fusion Content 3

Shop für Netobjects Fusion

Der kleine nahtlose Shop für eure NOF-Projekte
dank php und einer Datenbank ist eure NOF-Datei schlank und alle Daten bleiben bei eventuellen Crashes oder Layoutumstellungen unberührt
NOF-Shop 1.1

Haste mal nen Euro?

Die NOF-Tips sind werbefrei
Wenn die Tutorials geholfen haben, freuen wir uns auf deine kleine Spende via PayPal an paby@paby.de

Online-Support

Werktags: 9.00 - 14.00h
0160 37 87 652
WE oder Abends nach Absprache möglich
Schnelle Hilfe via Online-Tool 1,00 euro/min

Schulungen & Seminare

Online-Schulungen ab 35,00 Euro/Std.

Friendship (suma-hilfe)

Burlesque Korsetts und mehr
Triumed
Lebensfreude-konzept
Sportfotos
Fliegenruten
 

yeah - ich bin das Objekt der Begierde!! Wer das Tutorial durchgearbeitet hat, kann anschließend eine solche Box erstellen

Gratulation!

-
Fatal error: Uncaught Error: Call to undefined function ereg_replace() in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/jquery-netobjects-fusion/jquery__newsbox.php:321 Stack trace: #0 {main} thrown in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/jquery-netobjects-fusion/jquery__newsbox.php on line 321