Comments on: Tutorial: Barrierearme Checkbox und Radio Button Ersetzung mit jQuery UI und der UI-Reflecting- Technik

By: Chris

Chris — Wed, 01 Feb 2012 15:22:53 +0000

Hi,
man ne Frage eines JQuery-Anfängers:
Wie Frage ich den Staus der Checkbox ab?

Und wie setzte ich den Staus gezielt im Code?

By: Terraloader

Terraloader — Mon, 08 Aug 2011 08:48:59 +0000

Sehr cool. Vielen Dank Alex.

Ja, dass meine Bearbeitungen nicht so sauber waren, hab ich mir schon gedacht, aber wusste nicht wo ich es sonst reinhacken sollte. Deine Variante ist so natürlich viel sauberer. Dachte garnicht, dass mit nem Span und Img genügend Elemente schon da wären.

Die fehlenden Events haben sich hiermit auch erledigt. Vorher war es eben so, dass wenn man schnell von einer Checkbox zur nächsten gefahren ist, noch bei beiden der Mouseoverstate zu sehen war (auch im FF5). Jetzt funzt es perfekt.

Btw: Mit SVG ist es sogar barriereärmer als die native Version, da SVG beim Zoomen mit vergrößert.

By: alexander farkas

alexander farkas — Mon, 08 Aug 2011 05:19:14 +0000

@Terraloader
Kannst du dein genaues Problem beschreiben. Ich habe mir das kurz im FF5 angeguckt und es scheint zu funktionieren, wie ich das erwarten würde.

Zu deinen Scriptanpassungen: Hier finden sich mehrere Brüche mit Best Practices (invalider Code, Vermischung von Style und Behavior, anlegen von Daten im DOM, die bereits im DOM als auch im puren checkBox Objekt vorhanden sind etc.).

Letztendlich mußt du keine einzige Zeile des Scripts anfassen, um an dein Ziel zu kommen:

Ich habe unter https://github.com/aFarkas/accessible–stylable-Radiobuttons-and-Checkboxes/blob/master/tmp_svg.html dein Beispiel mit meinem (unangetasteten) Original-Script hochgeladen. Wie du siehst muß nur eine einzige Zeile JS in der configuration geschrieben werden. (https://github.com/aFarkas/accessible–stylable-Radiobuttons-and-Checkboxes/blob/master/tmp_svg.html#L72)

Das einzige was ich machen mußte, war ein update der jQuery UI widget factory. (Um den create-callback zu bekommen)

By: Terraloader

Terraloader — Sun, 07 Aug 2011 11:19:09 +0000

Hallo Alex.

Ich habe dein Script mal ein wenig verändert und erweitert, damit ich SVG-Grafiken nutzen kann. (Die gehen nicht gut als Background.)

Zu sehen unter: http://tlprod.de/cb2/

Leider werden die Events (vorallem mouseout) nicht korrekt übermittelt, wenn ich über die Checkbox fahre. Beim Label klappt es super.
Kannst du mir dabei helfen? Wäre super, danke.

By: Jeremy DeStefano

Jeremy DeStefano — Wed, 13 Jul 2011 22:24:36 +0000

I have implemented the buttonstyle on my site to replace a simple Yes/No Radio button set. I’ve got them to appear, and the hover works, however when i click them, the button that was clicked disappears! Any ideas what might cause this?

By: coder

coder — Tue, 28 Jun 2011 09:56:49 +0000

danke für deine schnelle antwort farkas

By: alexander farkas

alexander farkas — Tue, 28 Jun 2011 07:13:59 +0000

@coder

Benutze einfach entsprechende selectoren:

$(‘input.customize’).checkBox();

oder

$(‘fieldset.special input’).filter(‘[type="checkbox"]‘).checkBox();

By: coder

coder — Mon, 27 Jun 2011 22:56:42 +0000

eine Frage: ich hab ein Formular, wo ich paar checkboxes nicht customisen möchte. Gibt es ein Attribut um bei einem input das script auf False zu stellen?

sonst funzt dein Scirpt 1A, DANKE!

By: Fabian Horlacher

Fabian Horlacher — Thu, 19 May 2011 09:30:06 +0000

Ich hatte ein Problem mit dem Plugin, da ich wegen einem Framework etwas spezielle ID’s mit eckigen Klammern verwenden muss. So erhielt ich manchmal folgende Fehlermeldung:

Syntax error, unrecognized expression: [for=cwAutoControl[MjI0fDF8aW5wdXR8MTMwNTU0OTU1OC43NjU5NHx4]]

Lösung: ui.checkbox.js Zeile 47 ist das Problem, da die Anführungszeichen im die ID fehlen. Also bitte folgendermassen in der nächsten Version korrigieren:

this.labels = $(‘label[for="' + this.element.attr('id') + '"]‘)

By: Stephan

Stephan — Fri, 25 Mar 2011 15:27:02 +0000

Gute Arbeit. Aber ein Problem gibt es da doch: Das Skript funktioniert nicht einwandfrei, wenn die input-Elemente IN den Labels (ohne for-Attribut) sind; da werden dann alle auf einmal angesprochen und geändert. Oder habe ich da eine Einstellung verpasst? Ich will ungern dynamisch die Inputs aus dem Label rausnehmen und extra IDs und for-Attribute einfügen.