Mit diesem Beispiel möchte ich Ihnen eine Möglichkeit zeigen, wie Sie DIV-Kontainer oder Textarea-Elemente auf Ihrer Seite mit Fenstereigenschaften wie Drag & Drop, Schließen und Größenänderung erzeugen können.

Ein Beispiel mit zwei verschiedenen Fenstertypen können Sie sich hier ansehen.

Sie brauchen dazu erstmal eine Seite, die das oder die Fenster anzeigen soll.

Im Head-Bereich tragen Sie folgendes ein:

<script language="javascript" type="text/javascript">
//===== diese globalen Parameter können vom User geändert werden ============
var border = "solid 1px #000000";      //Rahmen des Fensters
var leer_farbe = "#DEE8F3";            //Farbe der Leerzeile (Zieh-Ecke)
var eck_icon_url = "img/ecke.png";     //Pfad der Bilddatei für Zieh-Ecke
var eck_icon_width = 20;               //Breite der Bilddatei für Zieh-Ecke in Pixel
var eck_icon_height = 20;              //Höhe der Bilddatei für Zieh-Ecke in Pixel
var box_kopf_farbe = "#DEE8F3";        //Farbe des Fenster-Kopfes
var box_kopf_close = "<b>X</b>";       //Bild oder Text zum Schließen der Box
var box_kopf_hoehe = 20;               //Höhe des Fenster-Kopfes in Pixel
</script>

Mit diesen Parametern können diverse globale Eigenschaften der/des Fenster(s) beeinflusst werden.

Als nächstes wird die JavaScript-Datei mit allen nötigen Funktionen eingebunden:

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

Diese externe Datei sollte ggf. nur verändert werden, wenn man weiß, was man tut .

Zum Schluss brauchen Sie nur noch den Funktionsaufruf für das jeweilige Fenster im Body-Bereich Ihrer Seite einzubinden:

<script language="javascript"type="text/javascript">
write_box(id,typ,style,left,top,width,height,padding,bgcol,inhalt)
</script>

Kurze Erklärung der Parameter:
id (Integer):
ID des Fensters, alle Fenster müssen natürlich unterschiedliche IDs haben

typ (String):
z.B. div, textarea, p

style (String):
r = Resizebox
b = normale Scrollbox
h = Box mit Kopf
d = Drag & Drop
Werte sind kombinierbar

left (Integer):
horizontale Position der Box (nur bei d=Drag & Drop)

top (Integer):
vertikale Position der Box (nur bei d=Drag & Drop)

width (Integer)
Breite des Fensters in Pixel

height (Integer)
Höhe des Fensters in Pixel

padding (String)
Padding des Fenster-Inhalts

bgcol (String)
Hintergrundfarbe des Fensters

inhalt (String):
Inhalt, der in der Box angezeigt werden soll. Sonderzeichen müssen ggf. maskiert werden.

Beispiel:
Der Funktionsaufruf write_box(1,”div”,”rhd”,100,100,400,250,”5px”,”#ffffff”,”Hallo Welt”) erstellt auf Ihrer Seite an der Position Left=100, Top=100 ein Fenster auf Basis eines Div-Kontainers mit der Größe 400px X 250px, das geschlossen (falls box_kopf_close nicht leer ist), verschoben und in der Größe verändert werden kann. Die Hintergrundfarbe ist weiß, und der Inhaltstext “Hallo Welt” hat 5px Abstand zum äußeren Rand.

Hier noch ein paar Infos zu Klassen bzw. Element-IDs, die ggf. per CSS geändert werden können:
.box
Klasse für Fenster-Basis-Tabelle.

.content
Klasse für Div, Textarea etc., das den eigentlichen Content beinhaltet.

.leer
Klasse für die Leerzelle im Fensterfuß.

#BoxID_x
ID der jeweiligen Fenster-Basis-Tabelle, x Steht für die Zahl, die Sie beim Funktionsaufruf als ersten Parameter übergeben haben.

#DivID_x
ID des jeweiligen Div-Containers / Textareas etc., x Steht für die Zahl, die Sie beim Funktionsaufruf als ersten Parameter übergeben haben.

Hier können Sie sich mein Beispiel runterladen.

Dieser Beitrag wurde am Samstag, Dezember 20th, 2008 um 20:49 geschrieben und unter der Kategorie HTML,CSS & Co. eingeordnet. Durch RSS 2.0 feed sind alle Antworten und Kommentare zu beobachten. You can leave a response, or trackback from your own site.