Seitenhierarchie
Zum Ende der Metadaten springen
Zum Anfang der Metadaten

 

Das Plugin verarbeitet Daten, welche mit einem Feldtrenner geliefert werden und baut daraus Collections zum Rendern Multipler Filtermöglichkeiten über x Zeilen. In Version 0.0.1 ist die Struktur fest an ein HTML <select> gebunden.

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.

//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

<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.

<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)

<select id="comp1" data-MapSelectionPlugin-target="#output" data-MapSelectionPlugin-buttonSelectedClass="selected" data-MapSelectionPlugin-buttonNotAvailableClass="notavailable" data-MapSelectionPlugin-buttonAvailableClass="available" data-MapSelectionPlugin-result="#iidresult" data-MapSelectionPlugin-initValue="12235" data-MapSelectionPlugin-seperator="|"  class="alvinePlugin_MapSelection" >
	<option value="12231" data-key="Länge:80mm|Gewinde:M8|Spannbereich:15mm-55mm" >12231</option>
    <option value="12232" data-key="Länge:90mm|Gewinde:M8|Spannbereich:15mm-55mm" >12232</option>
    <option value="12233" data-key="Länge:100mm|Gewinde:M8|Spannbereich:30mm-60mm" >12233</option>
    <option value="12234" data-key="Länge:110mm|Gewinde:M8|Spannbereich:30mm-60mm" >12234</option>
    <option value="12235" data-key="Länge:120mm|Gewinde:M12|Spannbereich:30mm-60mm" >12235</option>
    <option value="12236" data-key="Länge:130mm|Gewinde:M12|Spannbereich:70mm-120mm" >12226</option>
</select>
           
<div id="output"></div>
<input id="iidresult" type="text" value="" />



  • Keine Stichwörter
Schreiben Sie einen Kommentar...