Unser Script "Checkbox Selection Limiter" für BreezingForms dient dazu die Anzahl der wählbaren Optionen in einer oder auch mehrerer Checkboxlisten auf einen vorgegebenen Wert zu begrenzen.
Bei den BreezingForms Checkbox Gruppen können Sie eine oder bis zu alle Optionen wählen. Was aber wenn die Anzahl der Optionen für den User begrenzt werden soll. Oder noch komplizierter, Sie haben mehrere Listen mit verschiedenen Optionen und aus allen dürfen nur eine bestimmte Zahl insgesamt gewählt werden.
Mit dem "Checkbox Selection Limiter" kein Problem. Sehen Sie es sich an, unten im Testformular haben wir die Software eingebaut. Legen Sie selber eine maximales Limit fest und probieren Sie was passiert wenn es überschritten wird.
Die Felder im Background werden hier als Textboxen dargestellt, damit Sie die Ergebnisse erkennen können. In Ihrem Formular wären dies jedoch "versteckte Felder".
[Form Testform_Limiter not found!]
Download und Installation
Nach dem Kauf können Sie das Script herunterladen. Das oben dargestellte Beispielformular ist ebenfalls im Paket enthalten.
Bitte entpacken Sie dieses zuerst das Zip-Archiv. Dann installieren Sie das Script mit Hilfe des BreezingForms Paket Installers unter BreezingForms Konfiguration.
PREIS
Der Preis für die Software inklusive Updates für 12 Monate beträgt 5 €
Die Software funktioniert auch nach 12 Monaten weiter. Lediglich Updates werden nicht weiter kostenlos zur Verfügung gestellt.
Benutzer Manual
- Erzeugen Sie 2 versteckte Elemente (hidden fields) deren Bezeichnungen Sie folgendermaßen festlegen: MeinVersstecktesElement_selected und MeinVerstecktesElement_total
- Der Inhalt des Elements MeinVerstecktesElement_total MUSS die Ziffer "0" enthalten.
- Erzeugen Sie in Ihrer Checkboxgruppe oder bei mehreren Checkboxgruppen die zusammen ausgewertet werden sollen in jeder einzelnen ein ActionScript und fügen Sie den Funktionsaufruf des Checkbox Limiter Scripts ein:
wst_selectionlimiter(element,action,max,"MeinVerstecktesElement",separator (optional - default = "-"), marked (optional - default = false))
Dabei lassen Sie "element" und "action" so stehen und ersetzen "max" durch die maximale wählbare Anzahl der Optionen.
Beispiel mit maximal 3 wählbaren Optionen:
function ff_mylist_action(element, action)
{
switch (action) {
case 'change':
wst_selectionlimiter(element,action,3,'MeinVerstecktesElement');
break;
default:;
} // switch
} // ff_mylist_action
Optionaler Separator
Da der Standard Separator der die gewählten Optionen im Element "MeinVerstecktesElement_selected" voneinander trennt ein "-" ist, darf dieses Minuszeichen nicht in Ihren Values der Checkboxgruppe vorkommen.
Wenn Ihre Gruppe also z.B. diese Werte hätte...
0;Option A-C;A-C
0;Option D-H;D-H
0;Option I-Q;I-Q
... müssten Sie den Standard Separator so abändern (hier eine Pipe | ) -> wst_selectionlimiter(element,action,3,'MeinVerstecktesElement','|');
Optionaler Markierungsrahmen
Falls Sie <DIV> oder <IMG> in Ihrer Optionsliste verwenden, können Sie die gewählten Objekte automatisch mit einem farblichen Markierungsrahmen versehen.
Dazu muss allerdings eine Klasse in Ihre Custom-CSS Dateien eingefügt werden. Da dies abhängig von Ihrem Template ist lesen Sie dazu bitte die technischen Details Ihres Templates. Bei vielen Templates wird die Datei im Template Ordner des jeweiligen Templates abgelegt und erhält den Namen des Templates mit dem Zusatz "Custom" also z.B. MeinTemplateName-custom.css. Aber wie gesagt, jedes Template ist unterschiedlich.
Fügen Sie folgende Klasse ein:
.marked {
border: #ff0000 solid 3px;
}
Die Farbe (hier ROT) kann natürlich entsprechend Ihrer Bedürfnisse angepasst werden.
Im Funktionsaufruf muss jetzt die Markierung eingeschaltet werden (true), welche standardmäßig abgeschaltet ist (default = false):
wst_selectionlimiter(element, action, 3, 'MeinVerstecktesElement', '|', true);
Außerdem muss das Script erkennen können welches <DIV> oder <IMG> zu welcher Option gehört, daher ist es nötig den Wert (value) der Option als ID jeweils hinzuzufügen. So sähe die obige Checkboxliste mit markierbaren Bildern aus:
0;Option A-C <img id="A-C" src="/images/myImage1.jpg" />;A-C
0;Option D-H <img id="D-H" src="/images/myImage2.jpg" />;D-H
0;Option I-Q <img id="I-Q" src="/images/myImage3.jpg" />;I-Q