nicht angemeldet
Der Martin
Auge
Der Martin
Auge
MudGuard
MudGuard
Hallo zusammen,
auf einer PHP Seite sind drei Auswahllisten nebeneinander. Im ersten werden Dateinamen angezeigt, im zweiten die Dateigröße und im dritten das Dateidatum.
<select name="filename" size="5">
..
</select>
<select name="filesize" size="5">
...
</select>
<select name="filedate" size="5">
...
</select>
Ich verbinde per JS diese drei Select.Also bei einem klick auf einen Eintrag werden alle drei markiert.
Jetzt sieht das natürlich nicht so sonderlich gut aus weil es zwischen den Listen Zwischenräume gibt.
Meine Überlegung war nun, die drei Listen in einer Liste darzustellen.
Wie aber bekommt man vernünftig den Abstand zum nächsten Eintrag hin, also das es wie Spalten aussieht?
Mich würde interessieren, ob es irgendwelche Techniken gibt oder vielleicht auch Frameworks die das von Hause besser können. Also das das Design etwas besser aussieht.
Hat jemand sowas schon mal umgesetzt?
vielen Dank und viele Grüße
hawk
Hallo!
Ich hätte da erstmal noch ein paar Fragen, um dein Vorhaben richtig zu verstehen.
auf einer PHP Seite sind drei Auswahllisten nebeneinander.
Du meinst in deinem HTML Quelltext?
Im ersten werden Dateinamen angezeigt, im zweiten die Dateigröße und im dritten das Dateidatum.
Das macht imho ja nur Sinn, wenn man in jeder der drei Listen Einträge selektieren können soll. Ist das beabsichtigt?
<select name="filename" size="5">
..
</select>
<select name="filesize" size="5">
...
</select>
<select name="filedate" size="5">
...
</select>
> Ich verbinde per JS diese drei Select.Also bei einem klick auf einen Eintrag werden alle drei markiert.
Also mit deaktiviertem JS funktioniert das Ganze nicht (mehr)?
Ist das beabsichtigt? Und wenn ja, was passiert stattdessen?
> Jetzt sieht das natürlich nicht so sonderlich gut aus weil es zwischen den Listen Zwischenräume gibt.
Das halte ich eigentlich auch für sinnvoll, damit ein User auch erkennen kann, dass es sich dabei um separate Listen handelt.
> Meine Überlegung war nun, die drei Listen in einer Liste darzustellen.
Wenn die Daten ja eh, so ich vermute, zusammengehören, wäre das imho die sinnvollere Alternative.
> Wie aber bekommt man vernünftig den Abstand zum nächsten Eintrag hin, also das es wie Spalten aussieht?
Das könnte mit Auswahllisten schwierig werden, da select-Elemente nur optgroup und option Elemente enthalten dürfen und option wiederum nur #PCDATA.
> Mich würde interessieren, ob es irgendwelche Techniken gibt die das von Hause besser können. Also das das Design etwas besser aussieht.
Hier wäre es ggf. unter dem "Design-Aspekt" idealer, das Ganze mit Radiobuttons (falls immer nur ein Eintrag ausgewählt werden darf), bzw. mit Checkboxen (falls mehrere Einträge ausgewählt werden dürfen) zu machen. Dabei ist man was die Darstellung der Daten anbelangt wesentlich flexibler als mit Listenfeldern. Und semantisch sollte das Ganze auch noch vertretbar sein.
Gruß Gunther
Hallo Gunter,
vielen Dank für deine Hilfe und Ideen.
Du meinst in deinem HTML Quelltext?
ja
Das macht imho ja nur Sinn, wenn man in jeder der drei Listen Einträge selektieren können soll. Ist das beabsichtigt?
Ich brauche alle drei Werte, aber das könnte ich auch hinbekommen wenn ich nur ein <select> habe. Dann muss ich halt den Value anders definieren.
Also mit deaktiviertem JS funktioniert das Ganze nicht (mehr)?
Ist das beabsichtigt? Und wenn ja, was passiert stattdessen?
ja, es handelt sich rein um eine kleine Intranet Anwendung. Die Anwender werden darauf hingewiesen.
Wie gesagt: Es geht mir mehr um das Aussehen und Design. Es soll schon ein wenig wie eine Windows Desktop Anwendung aussehen, wo man Einträge selektieren kann. (auch mehrere auf einmal)
Ich hatte da mal was gesehen (ich glaube es war der 1und1 Webmailer). Bin mir aber nicht sicher wie die das gemacht haben bzw. welche Technologie. Man konnte sogar die Listboxen per Mauszeiger vergrössern.
vielen Dank und viele Grüße
hawk
Hi,
Im ersten werden Dateinamen angezeigt, im zweiten die Dateigröße und im dritten das Dateidatum.
Das macht imho ja nur Sinn, wenn man in jeder der drei Listen Einträge selektieren können soll. Ist das beabsichtigt?Ich brauche alle drei Werte, aber das könnte ich auch hinbekommen wenn ich nur ein <select> habe. Dann muss ich halt den Value anders definieren.
Noch mal genauer, bitte - hänge alle drei Werte von einander ab, oder sind sie einzeln auswähl- und kombinierbar?
Ich verbinde per JS diese drei Select.
Was *genau* verstehst du unter "verbinden"?
MfG ChrisB
Hallo ChrisB
vielen Dank auch an dich.
Noch mal genauer, bitte - hänge alle drei Werte von einander ab, oder sind sie einzeln auswähl- und kombinierbar?
im Prinzip ist es ganz einfach.
Ein Anwneder kann per Upload Dateien zum Server hochladen. Diese zeige ich dann in den drei Selects an. Also der Name, die Größe und das Datum der Dateien. Du kennst doch diese Windows Comboboxen wo man auch die SPalten verschieben kann. Eigentlich wie der Windows Explorer.
Sowas wollte / will ich nachbauen.
Also habe ich die drei <Select> so dicht wie möglich aneinander geschoben und per JS jeweils eine Zeile verbunden. Wenn also der User auf die zweite Datei klickt werden alle drei gleichzeitig markiert.
Dann kann der User die Datei versenden. Dabei speichere ich (neben ein paar anderen Dingen) den Namen, das Datum und die Größe in einer DB.
Mir geht es eigentlich mehr um das Aussehen, denn mit den drei selects nebeneinander sieht es halt nicht so toll aus. Noch dazu wenn man Scrollbalken in den Selects sieht.
vielen Dank und viele Grüße
hawk
Hallo,
Also habe ich die drei <Select> so dicht wie möglich aneinander geschoben und per JS jeweils eine Zeile verbunden. Wenn also der User auf die zweite Datei klickt werden alle drei gleichzeitig markiert.
Dann kann der User die Datei versenden. Dabei speichere ich (neben ein paar anderen Dingen) den Namen, das Datum und die Größe in einer DB.
Mir geht es eigentlich mehr um das Aussehen, denn mit den drei selects nebeneinander sieht es halt nicht so toll aus. Noch dazu wenn man Scrollbalken in den Selects sieht.
dann bin ich wieder bei meinem ersten Gedanken, den Beat aber schon formuliert hat: Mach aus den drei selects ein einziges, gib ihm eine Monospace-Schriftart[*] und fülle die "Spalten" mit Leerzeichen auf.
So long,
Martin
[*] Und wenn aufgrund exotischer Benutzereinstellungen oder CSS-Bugs doch mal eine proportionale Schrift zum Einsatz kommt, ist es auch nicht schlimm, es sieht bloß ein bissl krumm aus.
Hallo
Noch mal genauer, bitte - hänge alle drei Werte von einander ab, oder sind sie einzeln auswähl- und kombinierbar?
im Prinzip ist es ganz einfach.
Ein Anwneder kann per Upload Dateien zum Server hochladen. Diese zeige ich dann in den drei Selects an.
Es geht um die bereits hochgeladenen Dateien?
Also der Name, die Größe und das Datum der Dateien. Du kennst doch diese Windows Comboboxen wo man auch die SPalten verschieben kann. Eigentlich wie der Windows Explorer.
Dann wäre doch eine Tabelle angesagt, oder?
Oder redest du gar von den darzustellenden Daten von lokalen Dateien, die soeben per File-Upload-Feld ausgewählt wurden? Selbst da (falls ich mit JavaScript überhaupt an die Daten komme(?)) würde ich eine (mit JavaScript erzeugte) Tabelle zur Ausgabe der Daten verwenden. Um eine Auswahl aus diesen Dateien vorzunehmen, bieten sich Checkboxen bzw. Radiobuttons an.
Tschö, Auge
Hallo Auge,
danke dir,
Dann wäre doch eine Tabelle angesagt, oder?
ich muss das mal überdenken bzw. versuchen.
Was aber tun wenn ein Anwender mehrere Werte (Zeilen) markieren will?
Da bleibt dann doch wieder nur das <select> mit "multiple".
vielen Dank und viele Grüße
hawk
Hallo,
Dann wäre doch eine Tabelle angesagt, oder?
ich muss das mal überdenken bzw. versuchen.
Was aber tun wenn ein Anwender mehrere Werte (Zeilen) markieren will?
Da bleibt dann doch wieder nur das <select> mit "multiple".
oder eine Checkbox in der ersten Spalte jeder Tabellenzeile, so wie ich es beispielsweise von der Webmail-Oberfläche von GMX kenne. Dazu für etwas mehr Komfort noch je ein Button "Alle auswählen" bzw. "Auswahl löschen".
Mit einem onclick-Handler an diesen Checkboxen könntest du sogar noch die ganze Zeile irgendwie optisch hervorheben, wenn die Checkbox "gecheckt" ist.
So long,
Martin
Hallo!
Dann wäre doch eine Tabelle angesagt, oder?
Sehe ich auch so, da ...
Was aber tun wenn ein Anwender mehrere Werte (Zeilen) markieren will?
Da bleibt dann doch wieder nur das <select> mit "multiple".
... du doch eh zwingend JS voraussetzt (wenn ich dich vorher richtig verstanden habe). Dann kannst du es doch auch problemlos so machen, dass man jede Tabellenzeile anklicken kann und per toggle entweder de- oder selektiert für die Auswahl (plus ein paar extra Buttons für den Komfort wie bspw. 'alle auswählen' 'Auswahl zurücksetzen', etc.)
Gruß Gunther
Hallo
Dann wäre doch eine Tabelle angesagt, oder?
Sehe ich auch so, da ...Was aber tun wenn ein Anwender mehrere Werte (Zeilen) markieren will?
Da bleibt dann doch wieder nur das <select> mit "multiple".
... du doch eh zwingend JS voraussetzt (wenn ich dich vorher richtig verstanden habe). Dann kannst du es doch auch problemlos so machen, dass man jede Tabellenzeile anklicken kann und per toggle entweder de- oder selektiert für die Auswahl (plus ein paar extra Buttons für den Komfort wie bspw. 'alle auswählen' 'Auswahl zurücksetzen', etc.)
Genau, mit Checkboxen für die multiple Auswahl (Beschreibung bei Martin) und gut is. Lässt sich gut formatieren und ist eh ein Fall von tabellarischen Daten.
Wie das mit dem Markieren des Eintrags durch einen Klick irgendwo in der Zeile geht, sieht man z.B. bei phpMyAdmin.
Tschö, Auge
Ich verbinde per JS diese drei Select.Also bei einem klick auf einen Eintrag werden alle drei markiert.
Jetzt sieht das natürlich nicht so sonderlich gut aus weil es zwischen den Listen Zwischenräume gibt.
Meine Überlegung war nun, die drei Listen in einer Liste darzustellen.
Wie aber bekommt man vernünftig den Abstand zum nächsten Eintrag hin, also das es wie Spalten aussieht?
Select ist ein höchst undankbares Element für dein Unterfangen.
Radios wären hier geeigneter. Du kannst das Label in drei durch inline-block gestaltete "Spalten" unterteilen.
Bei Select müsstest du ansonsten mit einer monospace Schrift und Leerzeichen arbeiten.
mfg Beat
Hallo Beat,
danke dir für deine Hilfe.
Select ist ein höchst undankbares Element für dein Unterfangen.
Radios wären hier geeigneter. Du kannst das Label in drei durch inline-block gestaltete "Spalten" unterteilen.
Das ist eine Idee die ich mal ausprobieren werde.
Wie arbeitest du denn eigentlich?
Also ich meine: Hast du eine Entwicklungsumgebung, Framework oder ein besonderes Programm zum Aufbau und Coden deiner Seiten?
Kannst du was empfehlen.
vielen Dank und viele Grüße
hawk
Select ist ein höchst undankbares Element für dein Unterfangen.
Radios wären hier geeigneter. Du kannst das Label in drei durch inline-block gestaltete "Spalten" unterteilen.
Das ist eine Idee die ich mal ausprobieren werde.Wie arbeitest du denn eigentlich?
Also ich meine: Hast du eine Entwicklungsumgebung, Framework oder ein besonderes Programm zum Aufbau und Coden deiner Seiten?
Kannst du was empfehlen.
Keine spezielle Umgebung. Ich arbeite mit Perl.
Früher jedit, heute leider nur notepad+.
Framework verwende ich keines, da ich derzeit auch keine übermässige Verwendung für JS habe. Im Adminbereich aber überlege ich mir, ob ich jquery verwenden soll.
mfg Beat
Hi,
auf einer PHP Seite sind drei Auswahllisten nebeneinander.
Nein. Auf einer (per PHP erzeugten) HTML-Seite.
Ich verbinde per JS diese drei Select.Also bei einem klick auf einen Eintrag werden alle drei markiert.
Vielleicht ist ja auch eine Tabelle mit etwas Javascript eine Idee für Dich.
cu,
Andreas
Hallo Andreas,
sorry wenn ich nochmals den alten Thread aufmache. Ich bin leider erst jetzt dazu gekommen dein Beispiel mit den Tabellen in Self anzuschauen.
http://aktuell.de.selfhtml.org/artikel/javascript/fullrowselect/
Das sieht schon echt klasse aus.
Eine Frage hätte ich noch.
Ich muss ja irgendwie bei einem Submit die Auswahl (in meinem Fall die Dateinamen, Größe und Datum) übermitteln und speichern.
Bisher hatte ich das ja mit dem Value der Selects gemacht.
Was würde sich jetzt hier mit der Tabellenvariante anbieten?
Sollte man eher den Checkboxname oder die ID verwenden oder gar vielleicht ein "hidden" Feld?
<input type="checkbox" id="checknr1" name="checknr1" ??
vielen Dank und viele Grüße
hawk
Ich muss ja irgendwie bei einem Submit die Auswahl (in meinem Fall die Dateinamen, Größe und Datum) übermitteln und speichern.
Warum musst du das? Sind Datum und Grösse nicht readonly Infos?
Warum musst du den Dateinamen überhaupt entgegennehmen? Eine Missbrauchsprüfung zwingt dich auf dem Server ja eh dazu, die Gültigkeit zu überprüfen. Also kannst du irgend einen nicht ratbaren Identifier übermitteln, der für eine Datei steht.
mfg Beat
Hallo Beat,
das war ja nur ein Beispiel mit den Dateien.
Ich muss die Dateien später weiterverarbeiten. Der Dateiname, das Datum und die Größe sowie ein paar andere Daten Muss ich in einer Datenbank speichern.
Es gibt noch andere ähnliche Situationen in der Webanwendung mit anderen Inhalten.
Es geht also nie rein um die Darstellung sondern immer auch um die Weiterverarbeitung und Speicherung.
vielen Dank und viele Grüße
hawk
Hi,
Ich muss ja irgendwie bei einem Submit die Auswahl (in meinem Fall die Dateinamen, Größe und Datum) übermitteln und speichern.
Bisher hatte ich das ja mit dem Value der Selects gemacht.
Was würde sich jetzt hier mit der Tabellenvariante anbieten?
Sollte man eher den Checkboxname oder die ID verwenden oder gar vielleicht ein "hidden" Feld?
Überleg doch mal, was von einer Checkbox (bzw. einem Radiobutton) übermittelt wird. Es sind - oh Wunder - genau wie bei einem input type="text" die Inhalte von name-Attribut und value-Attribut.
Die ID nützt Dir nichts, weil sie nicht übertragen wird.
Und wozu ein hidden-Feld? Ein name- und ein value hast Du auch in der Checkbox/dem Radiobutton.
cu,
Andreas