Seitenhierarchie

Versionen im Vergleich

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

...

Eine Methode zur Unterstützung von JSON Daten ist als Beispiel vorbereitet. (not implemented).

 

Historie

VersionÄnderungenAnmerkungen
0.0.1 Erstumsetzung
   

Abhängigkeiten

Frameworks  & Plugins
jQuery> 3.1.1
AlvineFramework>= 1.0.0 

Installation

Das Plugin sowie das AlvineFramework kann vom Alvine-CDN geladen werden.

Codeblock
languagebash
//cdn.alvine.io/libs/alvine/mapselection/jquery.alvinemapselection-0.0.1.min.js
//cdn.alvine.io/libs/alvine/framework/alvine.framework-1.0.0.js

Bibliotheken

Codeblock
languagexml
<script src="https://cdn.alvine.io/libs/alvine/framework/alvine.framework-1.0.0.js"></script>
<script src="https://cdn.alvine.io/libs/alvine/mapselection/jquery.alvinemapselection-0.0.1.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.

Codeblock
languagexml
linenumberstrue
<select id="comp1" data-MapSelectionPlugin-target="#output" data-MapSelectionPlugin-buttonSelectedClass="selected" data-MapSelectionPlugin-buttonNotAvailableClass="notavailable" data-MapSelectionPlugin-buttonAvailableClass="available" data-MapSelectionPlugin-buttonTemplate="buttonTemplate" data-MapSelectionPlugin-result="#iidresult" data-MapSelectionPlugin-initValue="12235" data-MapSelectionPlugin-seperator="|"  class="alvinePlugin_MapSelection" >

Parameter

Die Parameter werden idR. über Dataattribute überschrieben (siehe oben). Der Prefix ist immer "data-MapSelectionPlugin-"

SchlüsselTypeBeschreibungStandardwert
seperatorStringTrennzeichen zwichen den definierten Key-Value Werten. Der Key Value ist immer mit einem ":" getrennt und kann nicht überschrieben werden.|
targetStringZiel HTML ID zum Output der MapSelection 
resultStringZiel HTML ID/Klasse zur Ausgabe bzw. setzen den Values für das Ausgewählte Ergebniss der Map 
buttonElementClassStringKlassenname für die "Button" Elemente der MapbuttonMapSelection
buttonTemplateStringHTML Code welches innerhalb eines Template Tags definiert ist um das Basistemplate zum Rendern eines Mapelements zu definieren<button class="col-xs-2"></button>
buttonAvailableClassStringKlassenname welcher gesetzt wird (im buttonElement) wenn die Auswahl in der Map verfügbar istbtn-primary
buttonNotAvailableClassStringKlassenname welcher gesetzt wird (im buttonElement) wenn die Auswahl in der Map nicht verfügbar istbtn-secondary
buttonSelectedClassStringKlassenname welcher gesetzt wird (im buttonElement) wenn die Auswahl in der Map selektiert ist.active
rowHeadlineTemplateStringHTML Code welches innerhalb eines Template Tags definiert ist um das Basistemplate zum Rendern einer MapRow Überschrift zu rendern<h3 class="filter_h3"></h3>
rowClassStringKlassenname für eine Map-RowalvinePluginMapSelectionRow
dataSourceTypeStringdatentyp zur Generierung der Map (HTML ist aktuell an ein <select><option> Tag gebunden). JSON ist vorbereitet aber noch nicht implementiert in Version 0.0.1html
initValueStringInit Wert zum vor-initialisieren einer MapAuswahl 
resultEventStringEvent, welches auf "result" bei erfolgreichem Mapping getriggert wird.change
loaderStringID/Klasse Loader Div. Wird eingeblendet wenn resultEvent getriggert wird. 

Methode

HandlerBeschreibungParameter

HTML-Template

Im folgenden Beispiel wird eine Map entsprechend der Vorgaben aus dem Select-Tag erstellt. Dabei werden einige Defaultwerte aus dem Plugin überschrieben (Siehe oben Parameter)

...