Seitenhierarchie
Zum Ende der Metadaten springen
Zum Anfang der Metadaten

cdn.alvine.io/libs/alvine/cookieinfo/jquery.alvinecookieinfo-0.1.0.min.js

 

 

Plugin, dass einen Banner mit der Cookie-Richtlinie einblendet. Nach dem Click wird die Entscheidung im loacalStorage gespeichert. Ist der localStorage nicht verfügbar, so dient als Fallback ein Cookie. 

Themes

Themedesktopmobile
top
bottom
floating

 

Historie

VersionÄnderungenAnmerkungen
0.0.1
ALEJS-44 - Abrufen der Vorgangsdetails... STATUS
Erste Version
0.1.0
ALEJS-76 - Abrufen der Vorgangsdetails... STATUS
  • Umstellung auf neue Struktur
  • Auswahl von 3 verschiedenen Themes
  • Plugin alvineI18nLocale ist Pflicht
  • Bugfix :
    Plugin darf erst initialisiert werden wenn die Locale geladen wurde.
    erst wenn alvine.i18n.initalways getriggert wurde, wird der Banner angezeigt 

Abhängigkeiten

Frameworks  & Plugins
jQuery>= 1.6
Bootstrap >= 3 
jquery.i18n.locale
>=0.0.3

Installation

Javascript- und CSS-Dateien können vom Alvine-CDN geladen werden.

//cdn.alvine.io/libs/alvine/cookieinfo/bootstrap.alavinecookieinfo-0.1.0.min.css

//cdn.alvine.io/libs/alvine/cookieinfo/jquery.alvinecookieinfo-0.1.0.min.js

Bibliotheken

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdn.alvine.io/libs/alvine/i18n/jquery.i18n.locale-0.0.3.min.js"></script>
<script src="//cdn.alvine.io/libs/alvine/cookieinfo/jquery.alvinecookieinfo-0.1.0.min.js"></script>

 

Konfigurieren

Über die angebenen Parameter kann das Plugin konfiguriert werden. Die Werte können entweder per Script, als Json im Tag oder als einzelne data-Attribute (data-) im Tag notiert werden. Weitere Details siehe  die Seite Javascript.

<body data-alvinecookieinfo-theme="top">
 
</body>

Das Template kann über den Parameter template oder über ein Tempalate Tag im Html geändert werden.
Das Template Tag muss die Klasse "alvineCookieInfoTemplate" und ein Data Attribute theme definiert haben.

<template class="alvineCookieInfoTemplate" data-theme="top" >
            <div class="alvinecookieinfo top">
                <div class="alvinecookieinfo-container">
                    <a href="#commit" target="_blank" class="alvinecookieinfo-btn btn btn-primary">i18n{cookieinfo_button}</a>
                    <p class="message">
                        i18n{cookieinfo_message} 
                        <a target="_self" href="i18n{cookieinfo_url}">i18n{cookieinfo_moreinfo}</a>
                    </p>
                </div>
            </div>
</template>

Im Template werden die folgenden Platzhalter gesetzt: i18n{cookieinfo_message}, i18n{cookieinfo_url}, i18n{cookieinfo_moreinfo} und i18n{cookieinfo_button}

 

Parameter

SchlüsselTypeBeschreibungStandardwert
data-alvinecookieinfo-themestringTheme Auswahltop
data-alvinecookieinfo-template_topstringHTML-Template mit dem Banner - Anzeige obensiehe oben
data-alvinecookieinfo-template_bottomstringHTML-Template mit dem Banner - Anzeige unten 
data-alvinecookieinfo-template_floatingstringHTML-Template mit dem Banner - Anzeige unten Rechts 
selectorstringSelector des Objektes dem der Banner hinzugefügt wirdbody
    

Methode

HandlerBeschreibungParameter
internal.initLocaleLokale initialisieren
internal.checkAcceptation

Prüft ob der Banner bestätigt wurde
wenn nein, wird die Methode internal.showBanner aufgerufen

 
internal.showBannerBanner anzeigen 
internal.getTemplateLiefert das Cookie Template zurück 
internal.storeCommitspeichert den Status des Banners im Local Storage oder im Cookie 
internal.isCommmitedLiest den Status des Banners 
   
accessible.initInitialisierne des Plugins 

Eventlistener

HandlerBeschreibungDaten
alvine.i18n.initalwaysWenn body dieses Event triggert wird der Banner angezeigt 

Events

HandlerBeschreibungDaten
alvine.alvinecookieinfo.commitWird gesendet, sobald der Besucher dem Cookie zugestimmt hat.[]

CSS-Klassen

KlasseTagFunktion
alvinecookieinfo.top*alvinecookieinfo in verbindung mit top wird der Banner oben im Body angezeigt
alvinecookieinfo.bottom*alvinecookieinfo in verbindung mit bottom wird der Banner unten im Body angezeigt
Die Position ist fixed 
alvinecookieinfo.floating*

alvinecookieinfo in verbindung mit floatingwird der Banner unten rechts im Body angezeigt
Die Position ist fixed 

alvinecookieinfo-container*Banner Container
alvinecookieinfo-btn. btn-primary*OK Button
p.messagepNachrichten Text

Lokalisierung

SchlüsselStandardwert

cookieinfo_message

we uses cookies to ensure you get the best experience on our website.
cookieinfo_buttonGot it!
cookieinfo_moreinfoMore info ...
cookieinfo_url/en/cookies

HTML-Template

Im folgenden Beispiel ist ...

Html-Template kopieren 

 

 

  • Keine Stichwörter