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

ALEJS-145 - Abrufen der Vorgangsdetails... STATUS

0.1.0  

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/framework/alvine.framework-1.10.0.min.js
//cdn.alvine.io/libs/alvine/mapselection/jquery.alvinemapselection-0.1.0.min.js

Bibliotheken

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

<select id="comp1" data-alvinemapselection-targetselector="#outputSelectionMap" 
data-alvinemapselection-templateselector="#templateSelectionMap" 
data-alvinemapselection-loaderselector=".mapLoader" 
data-alvinemapselection-result="#variantSelect" 
data-alvinemapselection-initValue="#FIELD:IID#"  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.|
targetselectorStringZiel HTML ID zum Output der MapSelection 
buttonelementclassStringKlassenname für die "Button" Elemente der MapbuttonMapSelection
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
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
loaderselectorStringID/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-alvinemapselection-targetselector="#outputSelectionMap" 
data-alvinemapselection-templateselector="#templateSelectionMap" 
data-alvinemapselection-loaderselector=".mapLoader" 
data-alvinemapselection-result="#variantSelect" 
data-alvinemapselection-initValue="#FIELD:IID#"
class="alvineMapSelection" >
	<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="" />

<template id="templateSelectionMap">
            <div class="mapLoader"><span class="fa fa-refresh fa-spin"></span></div>
            <div>
                <div class="row alvineMapSelectionRow" data-repeat="feature dataset:features" data-bind="true">
                    <div class="col-xs-12">
                        <h3 data-replace="dataset:feature | index:name">Name</h3>
                    </div>
                    <div>
                        <div class="col-xs-6 m-y" data-repeat="featuredata dataset:feature | index:list"  >
                            <div data-bind="true" data-attributes="data-alvinemapselection-listid dataset:featuredata|index:listid,data-alvinemapselection-datasetid dataset:featuredata|index:datasetid,class dataset:featuredata|call:getButtonClass, value dataset:featuredata | index:name, data-alvinemapselection-iidmap dataset:featuredata | index:iidcollection" >
                                <span data-replace="dataset:featuredata | index:name" ></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</template>


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