Blue Flower

Bibliothek

Integration - Bibliothek

Mithilfe der OnBuSys Javascript-Bibliothek lassen sich die Elemente von OnBuSys (das Buchungsformular und die verschiedene Arten von Belegungsübersichten) mit maximal acht Programmzeilen in Ihre Homepage einbinden.


Im Menüpunkt Integration/Widgets wird das Verfahren sowohl für normale Homepages als auch für CMS- und Baukasten-Homepages ausführlich mithilfe einfacher Beispiele erläutert.
Spezielle Hinweise zur Verwendung der Bibliothek in WordPress-Homepages finden Sie im Menüpunkt Integriation/WordPress-Demo. Diese Demo gilt in analoger Weise auch für andere CMS wie Joomla, TYPO3, Drupal, ... .

Nachfolgend erhalten Sie eine ausführliche Beschreibung der Bibliothek.

Damit Sie die Bibliothek auf Ihrer Seite verwenden können, müssen Sie zunächst folgende Zeile in den html-Quellcode Ihrer Seite kopieren:

<script type="text/javascript" src="http://Pfad_zum_Ordner_OBS/OBS/obs_lib.js"></script>

Diese Zeile ist normalerweise in den <head>-Bereich Ihrer Seite einzufügen. Falls Sie keinen Zugang zu diesem Bereich haben, sollten Sie diese Zeile als erste Zeile in dem Ihnen zugänglichen Bereich verwenden.

Nachfolgend erhalten Sie eine Übersicht über die Funktionen der Bibliothek, die Sie verwenden können um die Elemente direkt in eine Seite einzubinden. Dabei muss für die Belegungsübersichten eine ausreichende Spaltenbreite zur Verfügung stehen (sonst siehe ab 7.). Ausführliche Erläuterungen zu diesen Funktionen erhalten Sie weiter unten.

1. Funktion zum direkten Einfügen des Buchungsformulars in Ihre Seite
2. Funktion zum Einbinden des unsichtbaren Buchungsformulars, das über die Belegungsübersichten geöffnet wird
3. Funktion zum Einbinden der Belegungsübersicht als Minikalender-Tabelle
4. Funktion zum Einbinden der Belegungsübersicht für mehrere frei wählbare Objekte
5. Funktion zum Einbinden der Belegungsübersicht für mehrere frei wählbare Objekte in einem scrollbaren 
    DIV-Container
6. Funktion zum Einbinden der Jahres-Belegungsübersicht

Die jeweilige Funktion ist auf Ihrere Seite an der Stelle einzubinden, an der das entsprechende Element erscheinen soll und in Script-Tags einzubetten:

<script type="text/javascript">
var meinelement = new funktion_aus_der_Bibliothek(Parameterliste);
meinelement.erstelle();
</script>

Die Funktionen ab 7. müssen verwendet werden, wenn die Elemente absolut positioniert werden sollen. Eine absolute Positionierung ist erforderlich, wenn keine ausreichende Spaltenbreite vorhanden ist oder wenn Sie ein Element außerhalb des Ihnen zugänglichen Bereichs darstellen wollen. Dies ist meistens bei CMS- und Baukasten-Homepages der Fall (siehe hierzu den Menüpunkt Integration/WordPress-Demo). Diese Funktionen erkennen Sie an dem vorangestellten 'abs_':

  7. Funktion zum Einbinden der Belegungsübersicht als Minikalender-Tabelle (absolute Positionierung)
  8. Funktion zum Einbinden der Belegungsübersicht für mehrere frei wählbare Objekte (absolute Positionierung)
  9. Funktion zum Einbinden der Belegungsübersicht für mehrere frei wählbare Objekte in einem scrollbaren
      DIV-Container (absolute Positionierung)
10. Funktion zum Einbinden der Jahres-Belegungsübersicht (absolute Positionierung)
11. Funktion zum Erstellen von Freiraum für absolut positionierte Elemente
12. Funktion zum exakten vertikalen Positionieren von absolute positionierten OnBuSys-Elementen

Da absolut positionierte Elemente über dem Inhalt der Seite liegen, stellt die Bibliothek die Funktion 'abs_freeOnTop()'
bereit (siehe 11.), mit der an den entsprechenden Stellen Freiraum geschaffen werden kann, damit Ihre Inhalte nicht verdeckt und unzugänglich werden. Diese Funktion ist in einer besonderen Form zusammen mit der Funktion (den Funktionen) zur Darstellung des (der) Elements (Elemente) in Script-Tags einzubetten und in dem DIV-Container zu platzieren, der die DIV-Container enthält, in denen die Elemente dargestellt werden sollen (statt der üblichen DIV-Container können auch andere html-Elemente verwendet werden). Beachten Sie die Besonderheit bei CMS- und Baukasten-Homepages im Menüpunkt Integration/WordPress-Demo.

Beispiel für die Einbindung des unsichtbaren Buchungsformulars (2. und 3. Zeile), das über die Belegungsübersicht mit den Objekten Elfer, Wald, Buttje, Berg sichtbar gemacht werden kann (5. und 6. Zeile). Mit der 4. Zeile wird der für die Belegungsübersicht notwendige Freiraum geschaffen.

<script type="text/javascript">
var buchformular = new belbuchkal(250,-10,556,"background-color:#ffffff;border:0px solid #909090",true);
buchformular.erstelle();
addLoadEvent(function(){abs_freeOnTop("191px","main","primary","secondary","");});
var multibel1 = new abs_multibel("onbusys.de/101","Elfer,Wald,Buttje,Berg",4,2,10,800,"left:70px","top:0px","de-DE");
multibel1.erstelle();
</script>


Nachfolgend erhalten Sie die ausführlichen Beschreibungen der Funktionen der Bibliothek:

  1. Funktion zum direkten Einfügen des Buchungsformulars in Ihre Seite

    buchkal(obspfad,objekt,h,css_style,ifrcol,lan)

    Bedeutung der Parameter:
    obspfad (String) Pfad_zum_Ordner_OBS OHNE 'http://', aber ggf. mit 'www.'
    objekt (String) Objektname
    h (int) Höhe des Formulars in px, normalerweise immer 556
    css_style (String) Folge von CSS-Anweisungen zur Festlegung der Lage des Formulars im Dokument
    z.B.: "float: left;" oder "margin-top: 20px; margin-left: 50px;" oder "margin: 20px auto;"
    ifrcol (String) Hintergrundfarbe und Rand des IFrames, z.B. "background-color:#ffffff;border:1px solid #909090;"
    lan (String) Sprache, in der das Formular geöffnet wird, z.B. "en-GB"
  2. Funktion zum Einbinden des unsichtbaren Buchungsformulars, das über die Belegungsübersichten geöffnet wird

    belbuchkal(x,yoffset,h,ifrcol,verdunkeln)

    Bedeutung der Parameter:
    x (int) Abstand des Formulars vom linken Rand in px, z.B. 250
    yoffset (int) Korrekturwert in px für die automatisch berechnete vertikale Position des Formulars, z.B. -20
    h (int) Höhe des Buchungskalenders in px, normalerweise immer 556
    ifrcol (String) Hintergrundfarbe und Rand des IFrames, z.B. "background-color:#ffffff;border:1px solid #909090;"
    verdunkeln (bool) Hintergrund verdunkeln? ja: true, nein: false
  3. Funktion zum Einbinden der Belegungsübersicht als Minikalender-Tabelle

    belmini(obspfad,objekt,links,zeilen,spalten,css_style,lan,groesse)

    Bedeutung der Parameter:
    obspfad (String) Pfad_zum_Ordner_OBS OHNE 'http://', aber ggf. mit 'www.'
    objekt (String) Objektname
    links (int) 0 -> kein Buchungslink, 1 -> Buchungslink für separates Fenster,
    2 -> Buchungslink für gleiches Fenster
    zeilen (int) Anzahl der Minikalender in vertikaler Richtung
    spalten (int) Anzahl der Minikalender in horizontaler Richtung
    css_style (String) Folge von CSS-Anweisungen zur Festlegung der Lage der Belegungsübersicht im Dokument
    z.B.: "float: left;" oder "margin-top: 20px; margin-left: 50px;" oder "margin: 20px auto;"
    lan (String) Sprache, in der die Minikalender geöffnet werden, z.B. "en-GB"
    groesse (int) Anzahl der Pixel, um die jede Spalte und jede Zeile in Bezug auf groesse=0 vergrößert wird.
    Dieser Parameter ist optional, ohne ihn wird groesse=0 verwendet.
  4. Funktion zum Einbinden der Belegungsübersicht für mehrere frei wählbare Objekte
    - nur verwendbar, falls eine ausreichende Spaltenbreite zur Verfügung steht, sonst siehe 8. -

    multibel(obspfad,ofeld,anzahl,links,marg,br,css_style,lan)

    Bedeutung der Parameter:
    obspfad (String) Pfad_zum_Ordner_OBS OHNE 'http://', aber ggf. mit 'www.'
    ofeld (String) Durch Kommas getrennte Objektnamen (ohne Leerzeichen), Leerstring "" für alle Objekte
    anzahl (int) Anzahl der Objektnamen in 'ofeld' oder Anzahl aller Objekte
    links (int) 0 -> kein Buchungslink, 1 -> Buchungslink für sep. Fenster,
    2 -> Buchungslink für gleiches Fenster
    marg (int) Breite des internen Randes in px
    br (int) Breite der Belegungsübersicht in px
    Wert um 800, der genaue Wert hängt vom längsten Objektnamen ab
    css_style (String) Folge von CSS-Anweisungen zur Festlegung der Lage der Belegungsübersicht im Dokument
    z.B.: "float: left;" oder "margin-top: 20px; margin-left: 50px;" oder "margin: 20px auto;"
    lan (String) Sprache, in der die Belegungsübersicht geöffnet wird, z.B. "en-GB"
  5. Funktion zum Einbinden der Belegungsübersicht für mehrere frei wählbare Objekte in einem scrollbaren DIV-Container
    - nur verwendbar, falls eine ausreichende Spaltenbreite zur Verfügung steht, sonst siehe 9. -

    multibeldiv(obspfad,ofeld,anzahl,links,br,css_style,lan)

    Bedeutung der Parameter:
    obspfad (String) Pfad_zum_Ordner_OBS OHNE 'http://', aber ggf. mit 'www.'
    ofeld (String) Durch Kommas getrennte Objektnamen (ohne Leerzeichen), Leerstring "" für alle Objekte
    anzahl (int) Anzahl der sichtbaren Tabellenzeilen, die restlichen werden durch Scrollen sichtbar
    links (int) 0 -> kein Buchungslink, 1 -> Buchungslink für sep. Fenster,
    2 -> Buchungslink für gleiches Fenster
    br (int) Breite der Belegungsübersicht
    Wert um 850, der genaue Wert hängt vom längsten Objektnamen ab
    css_style (String) Folge von CSS-Anweisungen zur Festlegung der Lage der Belegungsübersicht im Dokument
    z.B.: "float: left;" oder "margin-top: 20px; margin-left: 50px;" oder "margin: 20px auto;"
    lan (String) Sprache, in der die Belegungsübersicht geöffnet wird, z.B. "en-GB"
  6. Funktion zum Einbinden der Jahres-Belegungsübersicht
    - nur verwendbar, falls eine ausreichende Spaltenbreite zur Verfügung steht, sonst siehe weiter unten -

    beljahr(obspfad,objekt,anzahl,top,left,umsatzmod,links,date,br,css_style,lan)

    Bedeutung der Parameter:
    obspfad (String) Pfad_zum_Ordner_OBS OHNE 'http://', aber ggf. mit 'www.'
    objekt (String) Objektname
    anzahl (int) Anzahl der sichtbaren Tabellenzeilen (Monate), die restlichen werden durch Scrollen sichtbar
    top (int) Abstand der Jahresübersicht vom oberen Rand des internen DIV-Containers in px
    left (int) Abstand der Jahresübersicht vom linken Rand des internen DIV-Containers in px
    top=10 und left=10 ergibt einen 10px breiten Rahmen in der selben Hintergrundfarbe wie die Jahresübersicht
    umsatzmod (String) nicht relevant außerhalb des Adminbereichs, verwenden Sie den Leerstring ""
    links (int) 0 -> kein Buchungslink, 1 -> Buchungslink für sep. Fenster,
    2 -> Buchungslink für gleiches Fenster
    date (String) "date=1-2014" bewirkt, dass der Kalender mit diesem Datum gestartet wird, beim Leerstring "" werden Ihre Einstellungen auf der Adminseite verwendet
    br (int) Breite der Jahres-Belegungsübersicht in px, normalerweise 770
    css_style (String) Folge von CSS-Anweisungen zur Festlegung der Lage der Jahresübersicht im Dokument
    z.B.: "float: left;" oder "margin-top: 20px; margin-left: 50px;" oder "margin: 20px auto;"
    lan (String) Sprache, in der die Jahres-Belegungsübersicht geöffnet wird, z.B. "en-GB"
  7. Funktion zum Einbinden der Belegungsübersicht als Minikalender-Tabelle (absolute Positionierung)

    abs_belmini(obspfad,objekt,links,zeilen,spalten,rd_x,rd_y,lan,groesse)

    Bedeutung der Parameter:
    obspfad (String) Pfad_zum_Ordner_OBS OHNE 'http://', aber ggf. mit 'www.'
    objekt (String) Objektname
    links (int) 0 -> kein Buchungslink, 1 -> Buchungslink für separates Fenster,
    2 -> Buchungslink für gleiches Fenster
    zeilen (int) Anzahl der Minikalender in vertikaler Richtung
    spalten (int) Anzahl der Minikalender in horizontaler Richtung
    rd_x (String) Horizontale Lage des Belegungskalenders bzgl. des Eltern-Elements,
    z.B. "left:5px" oder "right:20px"
    rd_y (String) Vertikale Lage des Belegungskalenders bzgl. des Eltern-Elements,
    z.B. "top:50px" oder "bottom:10px"
    lan (String) Sprache, in der die Minikalender geöffnet werden, z.B. "en-GB"
    groesse (int) Anzahl der Pixel, um die jede Spalte und jede Zeile in Bezug auf groesse=0 vergrößert wird.
    Dieser Parameter ist optional, ohne ihn wird groesse=0 verwendet.
  8. Funktion zum Einbinden der Belegungsübersicht für mehrere frei wählbare Objekte (absolute Positionierung)

    abs_multibel(obspfad,ofeld,anzahl,links,marg,br,rd_x,rd_y,lan)

    Bedeutung der Parameter:
    obspfad (String) Pfad_zum_Ordner_OBS OHNE 'http://', aber ggf. mit 'www.'
    ofeld (String) Durch Kommas getrennte Objektnamen (ohne Leerzeichen), Leerstring "" für alle Objekte
    anzahl (int) Anzahl der Objektnamen in 'ofeld' oder Anzahl aller Objekte
    links (int) 0 -> kein Buchungslink, 1 -> Buchungslink für sep. Fenster,
    2 -> Buchungslink für gleiches Fenster
    marg (int) Breite des internen Randes in px
    br (int) Breite der Belegungsübersicht in px
    Wert um 800, der genaue Wert hängt vom längsten Objektnamen ab
    rd_x (String) Horizontale Lage des Belegungskalenders bzgl. des Eltern-Elements,
    z.B. "left:5px" oder "right:20px"
    rd_y (String) Vertikale Lage des Belegungskalenders bzgl. des Eltern-Elements,
    z.B. "top:50px" oder "bottom:10px"
    lan (String) Sprache, in der die Belegungsübersicht geöffnet wird, z.B. "en-GB"
  9. Funktion zum Einbinden der Belegungsübersicht für mehrere frei wählbare Objekte in einem scrollbaren DIV-Container (absolute Positionierung)

    abs_multibeldiv(obspfad,ofeld,anzahl,links,br,rd_x,rd_y,lan)

    Bedeutung der Parameter:
    obspfad (String) Pfad_zum_Ordner_OBS OHNE 'http://', aber ggf. mit 'www.'
    ofeld (String) Durch Kommas getrennte Objektnamen (ohne Leerzeichen), Leerstring "" für alle Objekte
    anzahl (int) Anzahl der sichtbaren Tabellenzeilen, die restlichen werden durch Scrollen sichtbar
    links (int) 0 -> kein Buchungslink, 1 -> Buchungslink für sep. Fenster,
    2 -> Buchungslink für gleiches Fenster
    br (int) Breite der Belegungsübersicht in px
    Wert um 850, der genaue Wert hängt vom längsten Objektnamen ab
    rd_x (String) Horizontale Lage des Belegungskalenders bzgl. des Eltern-Elements,
    z.B. "left:5px" oder "right:20px"
    rd_y (String) Vertikale Lage des Belegungskalenders bzgl. des Eltern-Elements,
    z.B. "top:50px" oder "bottom:10px"
    lan (String) Sprache, in der die Belegungsübersicht geöffnet wird, z.B. "en-GB"
  10. Funktion zum Einbinden der Jahres-Belegungsübersicht (absolute Positionierung)

    abs_beljahr(obspfad,objekt,anzahl,top,left,umsatzmod,links,date,br,rd_x,rd_y,lan)

    Bedeutung der Parameter:
    obspfad (String) Pfad_zum_Ordner_OBS OHNE 'http://', aber ggf. mit 'www.'
    objekt (String) Objektname
    anzahl (int) Anzahl der sichtbaren Tabellenzeilen (Monate), die restlichen werden durch Scrollen sichtbar
    top (int) Abstand der Jahresübersicht vom oberen Rand des internen DIV-Containers in px
    left (int) Abstand der Jahresübersicht vom linken Rand des internen DIV-Containers in px
    top=10 und left=10 ergibt einen 10px breiten Rahmen in der selben Hintergrundfarbe wie die Jahresübersicht
    umsatzmod (String) nicht relevant außerhalb des Adminbereichs, verwenden Sie den Leerstring ""
    links (int) 0 -> kein Buchungslink, 1 -> Buchungslink für sep. Fenster,
    2 -> Buchungslink für gleiches Fenster
    date (String) "date=1-2014" bewirkt, dass der Kalender mit diesem Datum gestartet wird, beim Leerstring "" werden Ihre Einstellungen auf der Adminseite verwendet
    br (int) Breite der Jahres-Belegungsübersicht in px, normalerweise 770
    rd_x (String) Horizontale Lage des Belegungskalenders bzgl. des Eltern-Elements,
    z.B. "left:5px" oder "right:20px"
    rd_y (String) Vertikale Lage des Belegungskalenders bzgl. des Eltern-Elements,
    z.B. "top:50px" oder "bottom:10px"
    lan (String) Sprache, in der die Jahres-Belegungsübersicht geöffnet wird, z.B. "en-GB"
  11. Funktion zum Erstellen von Freiraum für absolut positionierte Elemente

    abs_freeOnTop(margintop,mainid,primid,secid,thirdid)

    Bedeutung der Parameter:
    margintop (String) Default-Höhe des zu schaffenden Freiraums für ein absolut positioniertes Element,
    z.B. "150px". Diese wird verwendet, wenn bei den Elementen mit den IDs primid, secid und thirdid keine andere Höhe festgelegt wird
    mainid (String) ID eines html-Block-Elements (Container <div>, Textabsätze <p>, ...), über dem Freiraum geschaffen werden soll. Dieses erhält die CSS-Eigenschaft: 'position: relative'.
    Üblicherweise ist das der DIV-Container, der die Spalten des Seitenlayouts enthält.
    primid (String) ID eines Spalten-Block-Elements, über dem Freiraum (margin-top) geschaffen werden soll, z.B.
    "primary" (Höhe des Freiraums: Default-Höhe) oder "ID^Höhe", z.B
    "primary^150px" (Höhe der Freiraums: 150px)
    secid (String) ID eines Spalten-Block-Elements, über dem Freiraum (margin-top) geschaffen werden soll, z.B.
    "secondary" (Höhe des Freiraums: Default-Höhe) oder "ID^Höhe", z.B
    "secondary^110px" (Höhe der Freiraums: 110px)
    thirdid (String) ID eines Spalten-Block-Elements, über dem Freiraum (margin-top) geschaffen werden soll, z.B.
    "text-1" (Höhe des Freiraums: Default-Höhe) oder "ID^Höhe", z.B
    "text1^40px" (Höhe der Freiraums: 40px)
    Wenn eine ID nicht benötigt wird, muss dafür der Leerstring "" eingegeben werden.
    Bei einem fest vorgegebenen Seitenlayout finden Sie die IDs über ein entsprechendes Browsertool, z.B. beim
    Firefox: klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie 'Element untersuchen'.

  12. Funktion zum exakten vertikalen Positionieren von absolute positionierten OnBuSys-Elementen

    Absolut positionierte OnBuSys-Elemente sollen bei den verschiedenen Betriebssystemen und Schriftgrößen immer die gleiche vorgesehene Lage haben. Am Beispiel des Einfügens einer Jahres-Belegungsübersicht in den Text einer vorhandenen Seite wird nachfolgend erläutert, wie man mithilfe der Funktion getPos(), die von der Bibliothek bereitgestellt wird, ein OnBuSys-Element einfügt.
    Platzieren Sie den folgenden html-Code an der Stelle (z.B. in einem Text) an dem das absolut positionierte Element erscheinen soll:

    <div id="ypos1" style="height:0px; overflow:hidden;">&nbsp;</div>
    <div>
    <script type="text/javascript">
    addLoadEvent(function(){abs_freeOnTop("330px","main","lorem-1","text-3^850px","search-3^110px");});
    var yrel=getPos(document.getElementById('main'))[1];
    var y1=getPos(document.getElementById('ypos1'))[1]-yrel+16;
    var y1top="top:"+y1+"px";
    var beljahrkal = new abs_beljahr("onbusys.de/101","Berg",12,10,10,"ums_taggenau",2,"1-2013",770,"left:70px",y1top,"de-DE");
    beljahrkal.erstelle();
    </script>
    </div>

    Erläuterungen:
    Mit der 1. Zeile, wird ein Hilfs-DIV-Container, der nur das Leerzeichen enthält, eingefügt. Die frei wählbare ID ypos1 wird benötigt, damit in der 6. Zeile die y-Position y1 des     Hilfs-DIV-Containers bestimmt werden kann.
    Mit der Funktion abs_freeOnTop() in der 4. Zeile wird der notwendige Freiraum für die Jahres-Belegungsübersicht erzeugt. Beachten Sie, dass der 2. Parameter main in der nächsten Zeile verwendet werden muss.
    In der nächsten Zeile wird die Position yrel des DIV-Containers mit der ID main bestimmt und damit in der folgenden Zeile die Position für die Jahresbelegungsübersicht berechnet.
    Der Wert +16 dient der Korrektur der Lage der Jahres-Belegungsübersicht und kann beliebig angepasst werden.
    In der 7. Zeile wird eine CSS-Formatierung für die Lage y1top vorgenommen und
    in der 8. und 9. Zeile mit der folgenden Funktion die Belegungsübersicht eingebunden:

    abs_beljahr("onbusys.de/101","Berg",12,10,10,"ums_taggenau",2,"1-2013",770,"left:70px",y1top,"de-DE")   

    Bitte halten Sie diese Reihenfolge genau ein und beachten Sie die Erläuterungen zur Funktion abs_freeOnTop() unter Punkt 11. .

    Demoseite mit Quellcode und weiteren Erläuterungen

 

  • Aktuelle Seite:  
  • Startseite
  • Integration
  • Bibliothek