MOOMESSAGEBOX

flexible MessageBox mit dem mooTools Framework

KURZ BESCHREIBUNG:

GRUNDINFORMATION:

Nutzen Sie diese Implementation einer MessageBox, um Meldungen oder Bilder im Stile einer "Lightbox" anzuzeigen. Die einfache Integration macht die Handhabung sehr leicht.

Es stehen verschiedene Parameter zur Verfügung, um das Verhalten und das Aussehen der MessageBox anzupassen. So gibt es z.B. Parameter für die Hintergundfarbe, Hintergrund Bild, Buttons, Button Texte, Höhe, Breite sowie die Verzögerungszeit, mit der die Box ein- und ausgeblendet wird. Natürlich kann die Box auch HTML Code und|oder Bilder anzeigen.

KOMPATIBILITÄT

mooMessageBox wurde mit folgenden Browsern erfolgreich getestet: Internet Explorer 6/7, Firefox 2.0.0.14, Opera 9.2 und Apple Safari für Windows

ERSTE SCHRITTE

Copy moomessagebox12.js ( oder moomessagebox.js für die 1.1er version ) in Ihren Javascript Ordner. Kopieren Sie alle Bilder in Ihr Hauptverzeichnis oder passen Sie die Pfade innerhalb der mooMessageBox. js Datei an. Kopieren Sie die ajax.js Datei ebenfalls in das Javascript Verzeichnis.

HTML SETUP

Öffnen Sie die Seite, in der Sie die MesageBox verwenden möchten, in einem Editor. Fügen Sie folgende Zeilen in den HEAD Bereich der Seite ein:

<head>
<script language="javascript" type="text/ecmascript" src="js/ajax.js"></script>
<script language="javascript" type="text/ecmascript" src="js/moomessagebox12.js"></script>
</head>

Erstellen Sie ein DIV Element, welches den Inhalt der MessageBox enthält. Beispiel:

<div id="myDiv">
<h3>Messagebox with mootools</h3>
<p>This is a messagebox - add content to it. Images, HTML or whatever comes to your mind</p>
</div>

AJAX SETUP STEPS

Direkt vor dem schließenden BODY Tag fügen Sie folgende Zeilen ein:

 var  p  = new  mooSimpleBox ({  width :430,  height :350,  closeBtn :'myBtn',  btnTitle : 'close', boxClass :'myBox',  cid :'myID',  fadeSpeed :500,  opacity :'0.9',  addContentID :'myDiv',  boxTitle :'artViper messageBox',  isDrag :'true'});

Um die Box bedienen zu können, benötigen Sie weiterhin 2 Links, die die Box anzeigen oder ausblenden: Setzen Sie den Link und geben diesem die ID 'showBox'. Fügen Sie den unten stehenden Code in Ihr Dokument ein ( innerhalb eines Javascript Tags ):

$('showBox').addEvent('click',function(e){ e = new Event(e).stop(); p.fadeIn(); })

BOX VARIABLEN

Übersicht über die verschiedenen Parameter:

new mooSimpleBox({ options }); - neue Box
height - Höhe der Box
width - Breite der Box
closeBtn - Definieren eines Schliessen Buttons
btnTitle - Titel des Buttons
boxClass - die CSS Klasse der Box
fadeSpeed - anzeigen|ausblenden in ms
id - ID des Elements mit dem Inhalt
opacity - Transparenz der Box (0-1)
addContentID - Zusätzlicher Inhalt - ID
boxTitle - Titel der Box
isDrag - Box auf Bildschirm verschiebbar

DOWNLOADS

Dieses Script ist für verschiedene Frame- work Versionen | Systeme erhältlich. Bitte wählen Sie entsprechend den Download.

Download versions:

für mootools 1.1
für motools 1.2

FRAGEN?

Sollten Sie Fragen zur Einbindung haben oder einfach weiterführende Informationen benötigen, dann schreiben Sie uns>>

Wir entwickeln AJAX | mySQL | PHP integrierte Systeme, Shop Addons ( XT:Commerce, OSCommerce ), Javascript und AJAX Scripts und noch viel mehr.
Erfragen Sie einfach ein Angebot für Ihr kommendes Projekt.

Interessante Links

Webdesign | PHP | AJAX

2010-02-03 - mootools dropDown menu - ajax menu... Just for all you mootools lovers out there, here's a drop down menu with a broad...
2010-01-30 - Google fighting IE6... Google plans to stop supporting the outdated IE6. Its limited support of modern ...
2010-01-23 - Website Thumbnail Server online... Finally the new system is online. All requests that have been made to artviper.n...
2010-01-19 - Free Website Thumbnails move to another server... Today, we are going to move our free screenshot service to another server, so th...
2010-01-17 - Website color finder produces Photoshop color pa... Our old mooColorFinder has undergone an update, and is now capable of producing ...