DIV id="wrap"
DIV id="content"

Objekt Buttje, Strandweg 4, 12345 Urlaubsort

Erdgeschosswohnung mit ca. 45 qm reiner Wohnfläche, Terrasse(Südseite) mit Gartenmöbeln und Sonnenschirm, Garten, massiver separater Abstellraum für Fahrräder.
Die Wohnung besteht aus einem Wohn-Esszimmer mit einer Küchenzeile, einem Schlafzimmer mit Doppelbett, Kleiderschrank und Kinderbett, einem Bad mit WC und Dusche, einer Garderobe und einem Abstellraum. Das Ausziehsofa der Eckgarnitur im Wohnzimmer bietet zwei weitere Schlafgelegenheiten.
6.8 km vom Meer, an einer Nebenstrasse gelegen. Zur Mitbenutzung: Grundstück, Garten. Im Hause: Zentralheizung. Parkplatz beim Haus. Lebensmittelgeschäft 250 m, Supermarkt 1.4 km, Restaurant 1.3 km, Cafe 1.2 km, Bushaltestelle 600 m, Bahnstation 'Norden' 1.5 km. Freibad 6.8 km, Hallenbad 4 km, Sandstrand, Strandbad 6.8 km, Tennis, Tennishalle 4.7 km, Reitstall 200 m. Im 200 m entfernten Reitstall können nach Absprache und gegen Gebühr eigene Pferde in Gastboxen untergebracht werden.

Weiterer Text ...
Weiterer Text ...
Weiterer Text ...
Weiterer Text ...
Weiterer Text ...
Weiterer Text ...
Weiterer Text ...
Weiterer Text ...

mehr Info...


Um das Online-Buchungssystem OnBuSys in die Seite zu integrieren, wurden im html-Code folgende Änderungen durchgeführt:

Der folgende Anweisungsblock wurde in den DIV-Container mit der id="wrap" (ohne Zeilennummern!) eingefügt:

  1. <script type="text/javascript" src="//onbusys.de/101/OBS/obs_lib.js"></script>
  2. <script type="text/javascript">
  3. var belbuchkal = new belbuchkal(250,20,556,"background-color:#ffffff;border:0px solid #909090",true);
  4. belbuchkal.erstelle();
  5. addLoadEvent(function(){abs_freeOnTop("191px","wrap","einfuegeID","","");});
  6. var belmini1 = new abs_belmini("onbusys.de/101","Buttje",2,1,1,"left:50px","top:320px","de-DE");
  7. belmini1.erstelle();
  8. </script>

Bei einer CMS-Seite müssen Sie beim Bearbeiten der Seite den Editor in den HTML- oder Quellcode-Modus schalten und den
Anweisungsblock an den Anfang des Editbereichs kopieren.

Die Parameter im Anweisungsblock sind an die Gegebenheiten auf der Seite anzupassen.
Beachten Sie hierzu die nachfolgenden Erläuterungen:

Durch die 1. Zeile wird die OnBuSys-Bibliothek 'obs_lib.js' in die Seite eingebunden. Diese Bibliothek ist standardmäßig
im Ordner OBS vorhanden und stellt die für die Integration von OnBuSys notwendigen Klassen und Funktionen zur Verfügung.
Normalerweise ist diese Zeile in den head-Bereich der Seite einzufügen. Da hier eine CMS-Seite simuliert werden soll,
bei der der Zugriff auf den head-Bereich etwas kompliziert sein kann, wurde hier dieser Ort gewählt.
Der Wert bei 'src' muss auf Ihre Verhältnisse angepasst werden.

Mithilfe der 3. und 4. Zeile wird das Buchungsformular erzeugt und unsichtbar in die Seite eingebunden.
Bedeutung der Parameter:
Erläuterungen zu: belbuchkal(250,20,556,"background-color:#ffffff;border:0px solid #909090",true)
250Abstand des Buchungsformulars vom linken Rand in px
20Korrekturwert für die automatisch berechneten vertikale Position des Buchungsformulars in px
556Höhe des Buchungskalenders in px, normalerweise nicht zu ändern
"background-color:#ffffff;border:0px solid #909090;"Hintergrund, Rand und Randfarbe des IFrames
trueVerdunklung des Hintergrundes nach dem Öffnen des Buchungsformulars: ja: true, nein: false

In der 5. Zeile wird mithilfe Funktion 'addLoadEvent(function(){abs_freeOnTop()})' der für den Belegungskalender
notwendigen Freiraum über dem <P>-Element mit der id="einfuegeID" erzeugt.
Bedeutung der Parameter:
addLoadEvent(function(){abs_freeOnTop("191px","wrap","einfuegeID","","");})
"191px"Das <P>-Element mit der id="einfuegeID" wird um 191px nach unten verschoben: margin-top: 191px
"wrap"Der DIV-Container mit dieser ID erhält das CSS-Style-Attribut 'position: relative' (keine Aktion bei einem Leerstring "")
"einfuegeID"Das <P>-Element mit dieser ID wird nach unten verschoben (keine Aktion bei einem Leerstring "")
""Leerstring "", da in der zweiten Spalte kein Freiraum benötigt wird.
""Leerstring "", da es bei diesem Layout nur zwei Spalten gibt

Mithilfe der 6. und 7. Zeile wird der Belegungskalender erzeugt und sichtbar in die Seite eingebunden.
Bedeutung der Parameter:
Erläuterungen zu: abs_belmini("onbusys.de/101","Buttje",2,1,1,"left:50px","top:320px","de-DE")
"onbusys.de/101"Pfad_zum_Ordner_OBS ohne 'http://', aber mit 'www.' falls im Pfad_zum_Ordner_OBS enthalten
"Buttje"Name des Objektes, für das der Belegungskalender dargestellt werden soll
2Darstellungsmöglichkeit für das Buchungsformular: 0: keine Darstellung, 1: im sep. Fenster, 2: im gleichen Fenster
1Anzahl der Minikalender in vertikaler Richtung
1Anzahl der Minikalender in horizontaler Richtung
"left:50px"x-Position des Belegungskalenders bzgl. des übergeordneten Elements*. Stattdessen kann auch z.B. "right:85px" verwendet werden
"top:320px"y-Position des Belegungskalenders bzgl. des übergeordneten Elements*. Stattdessen kann auch z.B. "bottom:10px" verwendet werden
"de-DE"Sprache, in der der Belegungskalender gestartet wird
*
Das übergeordnete Element des Belegungskalenders ist der DIV-Container, der mithilfe der 5. Zeile eingefügt wurden, bei
dieser Seite also der DIV-Container mit der ID "wrap". Bitte beachten Sie, dass als übergeordnetes Element nur ein solcher
DIV-Container gewählt werden kann, dessen Breite sich über die gesamte Breite des Dokuments erstreckt.

Beachten Sie weiter:
left: Abstand vom linken Rand des übergeordneten Elements
right: Abstand vom rechten Rand des übergeordneten Elements
top: Abstand vom oberen Rand des übergeordneten Elements
bottom : Abstand vom unteren Rand des übergeordneten Elements