nicht angemeldet
Rolf B
Rolf B
Rolf B
Rolf B
Der Martin
Auge
Gunnar Bittersmann
Rolf B
Rolf B
Hallo,
mittels scandir gebe ich rekursiv einen Dateibaum aus.
Bei meinem Testverzeichnis sah das auch schon sehr gut aus.
input-Tag und details-Tag sollen nebeneinander stehen, alle Elemente unter dem details-Tag sollen eingerückt angezeigt werden.
Jetzt habe ich es mit einem realen Verzeichnis getestet, aber da sieht die Anzeige leider nicht so aus, wie erwartet. (Die PDF-Datei liegt direkt im Ordner Pictos)
Hier das kurze Script:
JürgenBfunction show_files($start) {
$contents = scandir($start);
array_splice($contents, 0,2);
foreach ( $contents as $item ) {
if ( is_dir("$start/$item") && (substr($item, 0,1) != '.') ) {
?>
<input class="checkbox left" type="image" src="/images/unselected.png" id="<?=$item;?>" onClick="selectdir(this);" value=" " data-id="<?=$start."/".$item;?>" data-type="dir" />
<details id="<?=$start."/".$item;?>" class="left"><summary><?=$item;?></summary>
<?
show_files("$start/$item");
?>
</details>
<?
} else {
if ($item != "download.zip") {
$size = filesize("$start/$item");
?>
<input class="checkbox" type="image" src="/images/unselected.png" id="<?=$item;?>" onClick="selectfile(this);" value=" " data-id="<?=$start."/".$item;?>" data-type="file" data-size="<?=$size;?>" /><?=$item;?> (<?=formatBytes($size);?>)<br/>
<?
}
}
}
}
und das verwendete CSS:
.checkbox {
border: none;
background-color: white;
margin-right: 5px;
width: 16px;
height: 16px;
position: relative;
top: 2px;
}
.left {
float: left;
}
Wie muss das CSS aussehen, damit die Anzeige wie gewünscht erfolgt?
Habe ich eventuell mehr Erfolg, wenn ich display: flex; verwende?
LG Steffen
Hallo Steffen,
bitte poste auch das generierte HTML, damit wir uns das nicht zusammenreimen müssen.
Rolf
Hallo Rolf,
hier ist der HTML-Code:
<body>
<div id="logo">
<img src="/images/header.png">
</div>
<div id="downloadbutton">
<label class="button" onClick="DownloadSelected();">Download starten</label><span id="anzahl">0 Dateien gewählt</span>
</div>
<div id="download-area">
<input id="id" type="hidden" value="83c8dcb2-afb8-4e57-88f6-412ec0e19087" />
<div id="header">
<input class="checkbox" id="selectall" type="image" src="images/unselected.png" onClick="selectall(this);" />
Alle Dateien oder Verzeichnisse
</div>
<div id="content">
<input class="checkbox left" type="image" src="/images/unselected.png" id="test" onClick="selectdir(this);" value=" " data-id="/var/www/html/upload/20220927T141201691Z/test" data-type="dir" />
<details class="left" id="/var/www/html/upload/20220927T141201691Z/test"><summary>test</summary>
<input class="checkbox" type="image" src="/images/unselected.png" id="avatar.jpg" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220927T141201691Z/test/avatar.jpg" data-type="file" data-size="16326" />avatar.jpg (15.94 KB)<br/>
<input class="checkbox left" type="image" src="/images/unselected.png" id="test2" onClick="selectdir(this);" value=" " data-id="/var/www/html/upload/20220927T141201691Z/test/test2" data-type="dir" />
<details class="left" id="/var/www/html/upload/20220927T141201691Z/test/test2"><summary>test2</summary>
<input class="checkbox" type="image" src="/images/unselected.png" id="duh.jpg" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220927T141201691Z/test/test2/duh.jpg" data-type="file" data-size="59321" />duh.jpg (57.93 KB)<br/>
</details>
</details>
</div>
</div>
</body>
LG Steffen
Hallo Steffen,
ja, hm, das ist das HTML mit den test Ordnern das bei Dir funktioniert. Wie wär's mit dem HTML, bei dem es nicht richtig aussieht?
Rolf
Ich hatte gehofft, dass man aus dem kürzeren Quellcode schon das Problem erkennen könnte. Hier der HTML-Code eines nicht funktionierenden Beispiels, den ich allerdings kürzen musste, da er sonst hier nicht akzeptiert wurde.
<body>
<div id="logo">
<img src="/images/header.png">
</div>
<div id="downloadbutton">
<label class="button" onClick="DownloadSelected();">Download starten</label><span id="anzahl">0 Dateien gewählt</span>
</div>
<div id="download-area">
<input id="id" type="hidden" value="c84b22f1-3e4d-4918-acb6-29ab066b0917" />
<div id="header">
<input class="checkbox" id="selectall" type="image" src="images/unselected.png" onClick="selectall(this);" />
Alle Dateien oder Verzeichnisse
</div>
<div id="content">
<input class="checkbox left" type="image" src="/images/unselected.png" id="Pictos" onClick="selectdir(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos" data-type="dir" />
<details class="left" id="/var/www/html/upload/20220930T114032410Z/Pictos"><summary>Pictos</summary>
<input class="checkbox left" type="image" src="/images/unselected.png" id="Design" onClick="selectdir(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Design" data-type="dir" />
<details class="left" id="/var/www/html/upload/20220930T114032410Z/Pictos/Design"><summary>Design</summary>
<input class="checkbox" type="image" src="/images/unselected.png" id="Interior Light.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Design/Interior Light.pdf" data-type="file" data-size="281496" />Interior Light.pdf (274.9 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="LED Light Show.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Design/LED Light Show.pdf" data-type="file" data-size="296662" />LED Light Show.pdf (289.71 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Mood Light.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Design/Mood Light.pdf" data-type="file" data-size="263734" />Mood Light.pdf (257.55 KB)<br/>
</details>
<input class="checkbox left" type="image" src="/images/unselected.png" id="Handling" onClick="selectdir(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Handling" data-type="dir" />
<details class="left" id="/var/www/html/upload/20220930T114032410Z/Pictos/Handling"><summary>Handling</summary>
<input class="checkbox" type="image" src="/images/unselected.png" id="Control Center.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Handling/Control Center.pdf" data-type="file" data-size="285338" />Control Center.pdf (278.65 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Eco Tech.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Handling/Eco Tech.pdf" data-type="file" data-size="287530" />Eco Tech.pdf (280.79 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="NFC Connect.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Handling/NFC Connect.pdf" data-type="file" data-size="297870" />NFC Connect.pdf (290.89 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Set-up Manager.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Handling/Set-up Manager.pdf" data-type="file" data-size="241894" />Set-up Manager.pdf (236.22 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Voice Guide.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Handling/Voice Guide.pdf" data-type="file" data-size="279085" />Voice Guide.pdf (272.54 KB)<br/>
</details>
<input class="checkbox left" type="image" src="/images/unselected.png" id="Komfort" onClick="selectdir(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort" data-type="dir" />
<details class="left" id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort"><summary>Komfort</summary>
<input class="checkbox" type="image" src="/images/unselected.png" id="Body Acrylic.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Body Acrylic.pdf" data-type="file" data-size="277946" />Body Acrylic.pdf (271.43 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Body Curve.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Body Curve.pdf" data-type="file" data-size="276776" />Body Curve.pdf (270.29 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Body Seat.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Body Seat.pdf" data-type="file" data-size="279966" />Body Seat.pdf (273.4 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Body Shape.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Body Shape.pdf" data-type="file" data-size="284472" />Body Shape.pdf (277.8 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Body Shape_208x80.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Body Shape_208x80.pdf" data-type="file" data-size="285627" />Body Shape_208x80.pdf (278.93 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Body Shape_208x90.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Body Shape_208x90.pdf" data-type="file" data-size="285610" />Body Shape_208x90.pdf (278.92 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Body Space_70x70x205.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Body Space_70x70x205.pdf" data-type="file" data-size="282066" />Body Space_70x70x205.pdf (275.46 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Body Space_86x208.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Body Space_86x208.pdf" data-type="file" data-size="287240" />Body Space_86x208.pdf (280.51 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Bodyform Plus.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Bodyform Plus.pdf" data-type="file" data-size="287548" />Bodyform Plus.pdf (280.81 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Comfort Cooling PLUS.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Comfort Cooling PLUS.pdf" data-type="file" data-size="839018" />Comfort Cooling PLUS.pdf (819.35 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Comfort Cooling.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Comfort Cooling.pdf" data-type="file" data-size="282031" />Comfort Cooling.pdf (275.42 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Frosted Acrylic.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Frosted Acrylic.pdf" data-type="file" data-size="280600" />Frosted Acrylic.pdf (274.02 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="MP3 AUX.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/MP3 AUX.pdf" data-type="file" data-size="282353" />MP3 AUX.pdf (275.74 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Single Sound.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Single Sound.pdf" data-type="file" data-size="289764" />Single Sound.pdf (282.97 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Top Cooling.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Top Cooling.pdf" data-type="file" data-size="281260" />Top Cooling.pdf (274.67 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Vibra Shape.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Komfort/Vibra Shape.pdf" data-type="file" data-size="304822" />Vibra Shape.pdf (297.68 KB)<br/>
</details>
<input class="checkbox" type="image" src="/images/unselected.png" id="Pictoübersicht.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Pictoübersicht.pdf" data-type="file" data-size="341613" />Pictoübersicht.pdf (333.61 KB)<br/>
<input class="checkbox left" type="image" src="/images/unselected.png" id="Power" onClick="selectdir(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Power" data-type="dir" />
<details class="left" id="/var/www/html/upload/20220930T114032410Z/Pictos/Power"><summary>Power</summary>
<input class="checkbox" type="image" src="/images/unselected.png" id="Advanced Performance.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Power/Advanced Performance.pdf" data-type="file" data-size="838174" />Advanced Performance.pdf (818.53 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Back Tan.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Power/Back Tan.pdf" data-type="file" data-size="283166" />Back Tan.pdf (276.53 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Shoulder Tan_2x240W.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Power/Shoulder Tan_2x240W.pdf" data-type="file" data-size="275742" />Shoulder Tan_2x240W.pdf (269.28 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Smart Performance.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Power/Smart Performance.pdf" data-type="file" data-size="833570" />Smart Performance.pdf (814.03 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Smart Power.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Power/Smart Power.pdf" data-type="file" data-size="278059" />Smart Power.pdf (271.54 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Sun Select.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Power/Sun Select.pdf" data-type="file" data-size="305166" />Sun Select.pdf (298.01 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Ultra Performance+.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Power/Ultra Performance+.pdf" data-type="file" data-size="558586" />Ultra Performance+.pdf (545.49 KB)<br/>
<input class="checkbox" type="image" src="/images/unselected.png" id="Ultra Power Plus.pdf" onClick="selectfile(this);" value=" " data-id="/var/www/html/upload/20220930T114032410Z/Pictos/Power/Ultra Power Plus.pdf" data-type="file" data-size="279169" />Ultra Power Plus.pdf (272.63 KB)<br/>
</details>
</details>
</div>
</div>
</body>
LG Peters
Hallo Steffen,
du floatest nicht nur die Pseudo-Checkbox, sondern auch die details-Elemente. Deshalb stehen sie nebeneinander und ich nehme an, das willst Du nicht.
Ändere im CSS ".left" in ".checkbox.left" ab und gib dem details-Element ein Padding von ca 2em. Dann sieht es bei mir so aus (mit roten Rändern zur Visualisierung der Inputs, deine Bilder habe ich ja nicht):
Das ist aber nur eine Notlösung, eine korrekte Lösung verwendet wie beschrieben anderes HTML. Ein Indiz dafür ist das "Se", was man in der "Alles Auswählen" Box sieht. Macht man die breiter, wird ein "Senden" draus. Das ist ein input type="image", der hier zeigt, dass er eigentlich ein submit Button für ein Form ist.
Rolf
Vielen Dank Rolf,
für die Hinweise und Tipps. Ich werde versuchen, alle zu beherzigen und den Code entsprechend umbauen.
Bei den Checkboxen habe ich Images verwendet, da es Triple-State-Checkboxen nicht gibt und es mir so einfacher erschien. Wahrscheinlich hätte ich trotzdem Checkboxen verwenden können und den Status über data-Felder merken etc.
Nochmals Danke Rolf.
LG Steffen
Hallo Steffen,
ich baue gerade an einer HTML Vorlagenidee für Dich.
Wozu brauchst Du triple state?
Für Verzeichnisse, bei denen nur ein Teil angekreuzt ist?
Rolf
Hallo Rolf,
ich baue gerade an einer HTML Vorlagenidee für Dich.
Da bin ich ja mal sehr gespannt drauf.
Wozu brauchst Du triple state?
Für Verzeichnisse, bei denen nur ein Teil angekreuzt ist?
Genau, für Verzeichnisse, wo nicht alle darin enthaltenen Dateien oder Ordner selektiert wurden.
LG Steffen
Falls gebraucht, hier die von mir erstellten Grafiken für die Triple-State-Boxen.
LG Steffen
Hallo Steffen,
Falls gebraucht, hier die von mir erstellten Grafiken für die Triple-State-Boxen.
okay, also "nein", "ja" und "teilweise". Ich finde die Symbolik aber zumindest ungewohnt. Aus anderen Anwendungen kenne ich das eher als leeres, angekreuztes (oder angehaktes) und grau ausgefülltes Kästchen.
Dein halb ausgefülltes Kästchen suggeriert dagegen "halbvoll" oder 50%.
Einen schönen Tag noch
Martin
Hallo Martin,
okay, also "nein", "ja" und "teilweise". Ich finde die Symbolik aber zumindest ungewohnt. Aus anderen Anwendungen kenne ich das eher als leeres, angekreuztes (oder angehaktes) und grau ausgefülltes Kästchen.
Dein halb ausgefülltes Kästchen suggeriert dagegen "halbvoll" oder 50%.
In anderen Anwendungen hab ich auch gesehen: Leer, schwarzer Haken, grüner Haken. Auch nicht wirklich erklärend. Irgendjemand fand es aber wohl gut genug, dies in der Software zu realisieren und zu veröffentlichen.
Ein graues ausgefülltes Kästchen finde ich auch nicht so viel besser, aber ich bin mir sicher (oder zumindest hoffe ich es), dass die Anwender es selbsterklärend genug finden und sich nicht darüber beschweren, dass das grüne "halbvoll" falsch ist, wo sie doch nur 25% ausgewählt haben.
Ich befürchte, es wird sich immer jemand finden, der genau die eine Variante cool findet und die andere doof, oder umgekehrt.
Letzlich sind es ja nur Bildchen, die ausgetauscht werden müssen, sollte es vom kleinen Testbenutzerkreis Kritik geben.
LG Steffen
Hallo
okay, also "nein", "ja" und "teilweise". Ich finde die Symbolik aber zumindest ungewohnt. Aus anderen Anwendungen kenne ich das eher als leeres, angekreuztes (oder angehaktes) und grau ausgefülltes Kästchen.
Die Repräsentation als grau hinterlegte Checkbox ist mir auch schon hier und da begegnet und irritiert mich immer wieder. In vielen Programmen wird so nämlich der für Eingaben gesperrte Status angezeigt. Das gilt auch für HTML oder genauer die Umsetzung in allen mir bekannten Desktop-Browsern.
Wenn die teilweise Auswahl optisch für mich mit der grauen Checkbox in Beziehung setzbar ist (ich klicke die erste von vier Checkboxen an und die direkt darüber oder darunter angezeigte „Obercheckbox“ wechselt daraufhin von leer zu grau hinterlegt, geht das noch irgendwie.
Aber das funktioniert spätestens dann nicht mehr, wenn ich die „Obercheckbox“ bei der untergeordneten Auswahl beispielsweise bei sehr vielen Unterpunkten auf dem kleinen Display eines Smartphones nicht sehen kann und somit beim hoch- oder runterscrollen nicht weiß, warum da eine grau hinterlegte Checkbox angezeigt wird, oder dann, wenn ich das Formular per se nicht sehen kann und die Beziehung zwischen diesen Ober- und Unterauswahlen zum Beispiel vom Screenreader nicht dargestellt werden kann, weil sie im Dokument mit dem Formular technisch einfach nicht existiert.
Dein halb ausgefülltes Kästchen suggeriert dagegen "halbvoll" oder 50%.
In anderen Anwendungen hab ich auch gesehen: Leer, schwarzer Haken, grüner Haken. Auch nicht wirklich erklärend. Irgendjemand fand es aber wohl gut genug, dies in der Software zu realisieren und zu veröffentlichen.
Dieses „teilausgewählt“ ist in verschiedenen Programmen und Desktopsystemen leider sehr unterschiedlich realisiert. Normalerweise würde man ja sagen, überlasse das dem OS/Desktop-System, schließlich kennt der Benutzer ja die Umsetzung seines eigenen Systems. Wie das woanders aussieht, muss ihn im besten Fall nicht interessieren.
Aber leider gibt es diesen teilausgewählten Status in HTML nicht. Das ist ja eigentlich auch nur eine missbräuchliche Benutzung einer Checkbox. Eine Checkbox ist angeklickt/aktiviert oder eben nicht. Prinzipiell kann sie nicht teilausgewählt sein.
Ein graues ausgefülltes Kästchen finde ich auch nicht so viel besser, aber ich bin mir sicher (oder zumindest hoffe ich es), dass die Anwender es selbsterklärend genug finden und sich nicht darüber beschweren, dass das grüne "halbvoll" falsch ist, wo sie doch nur 25% ausgewählt haben.
Naja, wenn wir noch anfingen, den Füllstand eines Checkbox-Kästchens an die Anzahl der ausgewählten Unterpunkte im Verhältnis zu allen vorhandenen Unterpunkten darstellen zu wollen, würden wir wohl recht viele Benutzer überfordern. Das kann man dann eher mit einem Tortendiagramm, dass als solches auch erkennbar ist, oder einem sich füllenden Balken umsetzen.
Wobei sich prinzipiell die Frage stellt, was denn die Aussage sein soll. Wenn ich von vier möglichen Unterpunkten zwei auswähle, weil nur diese beiden auf meinen Fall zutreffen, dann ist das meine Auswahl. Würde ich mich durch das Symbol für die teilweise Auswahl einfach nur informiert fühlen oder würde es mir unterschwellig mitteilen, dass noch weitere Eingaben notwendig sind, um den Prozess, den das Formular symbolisiert, abzuschließen?
Ich befürchte, es wird sich immer jemand finden, der genau die eine Variante cool findet und die andere doof, oder umgekehrt.
Das ist das Doofe. Dieses Eingabeelement wird in verschiedenen Betriebssystemen/Desktops sehr unterschiedlich umgesetzt, in einigen wird es das nicht einmal geben und in HTML gibt es das definitiv nicht als natives Formularelement. Zudem, egal, wie sehr einem als Betreiber einer Website die selbst gebauten Umsetzungen auf verschiedenen Websites gefallen, schlussendlich müssen die Benutzer der Seite/des Formulars damit umgehen können. Sie müssen verstehen, was das Formular von ihnen will, was sie eingeben müssen und was nicht, was Eingabefeld ist und was passive Information.
Wenn das nicht der Fall ist, ist auch die allerhübscheste Teilauswahlcheckbox für die Katz.
Tschö, Auge
Hallo Auge,
ich habe auf dieser Seite https://www.j-berkemeier.de/GPXViewer/Beispiel4.html eine Checkbox (Alle) mit dem dritten Zustand. Geh mal mit der Maus über „Wegpunkte“ und ändere die Checkboxen.
Gruß
Jürgen
Hallo
ich habe auf dieser Seite https://www.j-berkemeier.de/GPXViewer/Beispiel4.html eine Checkbox (Alle) mit dem dritten Zustand. Geh mal mit der Maus über „Wegpunkte“ und ändere die Checkboxen.
Für mich ist dein System verständlich. Die von mir schon beschriebene optische Beziehung ist erkennbar und die Repräsentation für die Checkbox „alle“ ist deutlich unterschiedlich von einer normal aktivierten Checkbox, aber nicht als ein anderer Zustand, wie „gesperrt“, missinterpretierbar.
Eine Eltern-Kind-Beziehung („alle“ als Zusammenfassung der hier drei folgenden Auswahlpunkte) ist aber technisch nicht vorhanden. Die Checkbox „alle“ ist genauso Punkt in einer Liste, wie die damit gesteuerten und interpretierten anderen Checkboxen. Ob es die Eltern-Kind-Beziehung überhaupt braucht, sei mal dahingestellt. Mein Bauchgefühl sagt aber, dass es sie geben müsste. Die Checkbox „alle“ wählt, aktiv benutzt, alle (Unter)-Einträge aus oder ab (Setter) und stellt andererseits eine teilweise Auswahl dieser (Unter)-Einträge passiv mit einem eigenen Status dar (Getter).
Der Eintrag fasst also einerseits den Zustand aller anderen Einträge zusammen und ist andererseits ein Hilfselement für eben diese anderen Einträge, ohne selbst einen über das Formular hinaus relevanten Wert zu haben. Er gehört mMn logisch nicht gleichberechtigt in die Liste der anderen Werte. Aber ob das für deine Auswahl, die nur die Anzeige steuert oder UX-technisch für spezielle Benutzergruppen, die ein Formular anders als mit einem grafischen Browser konsumieren, relevant ist, vermag ich nicht einzuschätzen. Ich sehe halt noch gut genug. 😁
Tschö, Auge
Hallo Auge,
danke für deine Einschätzung.
Gruß
Jürgen
@@Auge
Aber leider gibt es diesen teilausgewählten Status in HTML nicht.
Aber wie @JürgenB schon mit seinem Beispiel zeigte, kann man diesen mit JavaScript setzen: indeterminate [HTML]
Und mit CSS kann man den auch vom checked-Status deutlicher abheben: Codepen.
🖖 Живіть довго і процвітайте
@@Rolf B
ich baue gerade an einer HTML Vorlagenidee für Dich.
Die dann durchaus auch Listenmarkup enthalten darf: Beispiel.
🖖 Живіть довго і процвітайте
Hallo Gunnar,
gähn. Was hatte ich denn drin?
Rolf
@@Rolf B
gähn. Was hatte ich denn drin?
Ähm ja, stimmt.
Wozu sollen bei dir die Klassen directory-content, directory-item und file-item gut sein?
🖖 Живіть довго і процвітайте
Hallo Gunnar,
Wozu sollen bei dir die Klassen directory-content, directory-item und file-item gut sein?
Das Ganze ist durch ein paar Iterationen gelaufen und möglicherweise nicht komplett ausgemistet.
Aber directory-item brauche ich im JavaScript. Wollte ich das weglassen, bräuchte ich :has() oder müsste querySelectorAll mit einer Schleife nachverarbeiten.
file-item ist historisch, jetzt unnötig, aber der Symmetrie wegen würde ich es behalten wollen.
directory-content könnte man weglassen und durch #download-area ul ersetzen, das macht das Ganze aber schwerer lesbar. Die Klasse dokumentiert den Zweck dieser Liste.
Also - ja - man könnte im Markup auf diese Klassen verzichten, um den Preis schlechterer Lesbarkeit und aufwändigeren JavaScripts. Du darfst das gerne anders sehen. Ich find's so besser und pflegeleichter. Es ist ja auch keine Tipparbeit - PHP generiert es.
Rolf
Hallo Gunnar,
ich baue gerade an einer HTML Vorlagenidee für Dich.
Die dann durchaus auch Listenmarkup enthalten darf: Beispiel.
also so: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation
Gruß
Jürgen
@@JürgenB
also so: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation
Nein. Dass details für eine Navigation nicht so die beste Idee ist, hatten wir desöfteren schon.
🖖 Живіть довго і процвітайте
Hallo Gunnar,
also so: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation
Nein. Dass
detailsfür eine Navigation nicht so die beste Idee ist, hatten wir desöfteren schon.
nur wird deine verschachtelte Liste auch nicht besser vorgelesen. Nach meinen Versuchen mit details/summary in VoiceOver habe ich das Gefühl, man macht um dieses Element besser einen Bogen. Aber sonst funktioniert es nicht besser, aber auch nicht schlechter als die Versionen mit buttons und reichlich aria-Attributen.
Gruß
Jürgen
Hallo Steffen,
unabhängig vom konkreten Problem ist dein HTML falsch. Ein Label-Element mit click-Handler ist nicht korrekt, das muss ein Button werden. Wie willst Du sonst mit Tastatur da ran? Und was soll ein User mit Screenreader damit anfangen?
Dein Logo möchte mit ziemlicher Sicherheit in ein <header> Element, nicht in ein <div id="logo">.
<div id="header">
<input class="checkbox" id="selectall" type="image" src="images/unselected.png" onClick="selectall(this);" />
Alle Dateien oder Verzeichnisse
</div>
Ob hier eine id wie "header" sinnvoll ist, sei dahingestellt, jedenfalls ist ein input type="image" dazu da, einen grafischen "Submit" Button für ein Form zu erzeugen. Beim Submit werden dann die Koordinaten gesendet, an die man im Image geklickt hat.
Wenn Du Checkboxen willst, dann nimm auch welche. Wenn Du ihnen ein Label zuordnest, kannst Du auf Box und Text klicken und die Checkbox reagiert.
Wenn Dir das Aussehen der Checkbox auf deinem Gerät nicht gefällt, ja, hm, aber denk dran, dass es auch andere Betriebssysteme gibt, die eine Checkbox ggf. anders darstellen. User sind an die spezifische Darstellung ihres Betriebssystems gewöhnt und können verwirrt sein, wenn Du ihnen andere Checkboxen zeigst.
Eine Alternative ist eine visuell versteckte Checkbox und eine Darstellung des Checked-Zustandes im Label (über :checked Pseudoklasse im CSS). Aber die Checkbox als HTML Element muss vorhanden sein.
Rolf
Hallo Steffen,
hier mein Vorschlag:
https://jsfiddle.net/Rolf_b/mka89bq4/
Das HTML ist wegen der Testdaten etwas unübersichtlich.
Grundidee ist:
Die download-area besteht aus einem Kopfbereich mit der "Alles auswählen" Checkbox. Das ist eine ganz normale Checkbox, die aber im CSS visuell versteckt wird. Dahinter steht ein Label, das der Checkbox zugeordnet ist, so dass ein Klick auf das Label die Checkbox betätigt.
Das ganze HTML setzt die Labels hinter die Checkboxen, so dass man sie mittels input[type=checkbox]:focus + label hervorheben kann, wenn die Checkbox vom User per Tabulatortaste fokussiert wurde.
Der Zustand der Checkbox wird über ein ::before Element des Labels dargestellt. Ich hatte deine Bilder nicht, braucht man auch nicht, ein Gradient tut's auch 😉
Jeder Ordner hat diesen Grundaufbau (directory-item oder file-item je nach Typ des aufgelisteten Verzeichniseintrags)
<ul class="directory-content">
<li class="directory-item">
...
</li>
<li class="file-item">
...
</li>
</ul>
Ein file-item sieht so aus:
<li class="file-item">
<input type="checkbox"
id="Pictos/Design/LED Light Show.pdf"
value="Pictos/Design/LED Light Show.pdf"
data-size="296662">
<label for="Pictos/Design/LED Light Show.pdf">LED Light Show.pdf (289.71 KB)</label>
</li>
Das ist etwas anders als bei Dir.
Ein directory-item ist etwas komplizierter:
<li class="directory-item">
<input type="checkbox" id="Pictos/Design" aria-label="Verzeichnis auswählen" />
<label for="Pictos/Design"></label>
<details>
<summary>Design</summary>
<ul class="directory-content">
Siehe oben!!!
</ul>
</details>
</li>
Das directory-item hat keinen Text im Label, darum habe ich ihn für nichtsehende User als aria-label notiert. Ein Screenreader wird ihn vorlesen. Hoffe ich 😉
Die Konstruktion checkbox+label ist aber gleich, so dass das gleiche CSS für die Checkbox genutzt werden kann. Dahinter kommt die details-Box für den Verzeichnisinhalt.
Für beide Item-Typen ist eine Flexbox gesetzt worden, so dass Checkbox, Label und Details-Element nebeneinander stehen.
Das Verzeichnis selbst ist eine Liste, so dass alles untereinander steht. Die Listenpunkte sind per CSS entfernt worden.
Das CSS verwendet die :is() Pseudoklasse. Folge dem Link, wenn Du die noch nicht kennst.
Das JavaScript sollte die nötige Logik für die Steuerung der Checkboxen zeigen. Sicherlich musst Du die Grundstruktur an deine Seite noch anpassen. Ich arbeite intensiv mit querySelectorAll um umständliche Schleifen zu vermeiden.
Good Luck 😀
Rolf
Hallo Rolf,
vielen herzlichen Dank für Deinen Vorschlag und die ausführliche Erklärung. Ich habe dadurch viel gelernt und werde versuchen, dies auch in zukünftigen Projekten einzusetzen.
querySelectorAll habe ich auch hier viel genutzt und lieben gelernt.
Ich habe zwar (noch) nicht alles umsetzen können, aber ich denke, ich bin auf einem guten Weg.
LG Steffen
@@Rolf B
Ein file-item sieht so aus:
Nö, gewiss nicht.
<input type="checkbox" id="Pictos/Design/LED Light Show.pdf" value="Pictos/Design/LED Light Show.pdf" data-size="296662">
- Die ID, mit der Checkbox und Label gekoppelt werden, ist im Moment der Dateiname, das muss aber nicht sein.
Das darf auch nicht sein.
Das ist kein gültiger Wert für eine ID. “The [id attribute] value must not contain any ASCII whitespace.” [HTML]
🖖 Живіть довго і процвітайте