• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

"Tabelle" mit Text und Input-Elementen, dynamisch erweiterbar

A

andymel

Neues Mitglied
Hi,

verzeiht den etwas komplizierten Titel. mir ist nichts besseres eingefallen um mein Vorhaben so kurz zu beschreiben.

Ich bastel gerade einen Raummoden-Rechner (eine Visualisierung bestimmter raumakustischer Effekte) und möchte die bestehende Seite aufräumen.
Ich bin eigentlich Java-Programmierer und das ist mein erster Versuch mich mit HTML5 zu spielen.

Hier könnt ihr die aktuelle Version sehen: http://amroc.andymel.eu/b/

Es geht jetzt erstmal um den grauen Bereich gleich unter dem Titel (das div mit der id "div_settings")

Was ich erreichen will ist, dass erstmal nur die linke Spalte mit den 'room dimension' zu sehen ist. Im rechten oberen Eck dieses Divs möchte ich dann ein "+" machen um diesen Settings-Bereich zu erweitern. Spalte für Spalte. Erst "Modes to display" dann "More" und vielleicht noch weitere.

Mir geht es jetzt mehr um die prinzipielle Frage wie ihr das lösen würdet. Ich wollte zB eigentlich 3 Divs nebeneinander machen um diese dann ein und ausblenden zu können. Ich habe das jetzt aber mal als Tabelle geschrieben, weil ich es nicht einfach geschafft habe in den verschiedenen Divs den gleichen Zeilenabstand zu haben. Die Inhalte dieser Zeilen sind einfach so verschieden (Text, Textinput, Checkboxes).

Zusammenfassung:
Wie würdet ihr einen solchen erweiterbaren Settingsdialog bauen?

lg Andi
 
Tronjer schrieb:
Das ist eine Frage von Performance und Philosophie. Ich würde die Elemente erst beim Klick auf das '+' erzeugen.
Zum Vergrößern anklicken....
Danke für die schnelle Antwort! :)
Das ist ein guter Tipp, darauf hab ich bisher noch nicht geachtet. und würdest du dann neue Spalten in der Tabelle erzeugen, oder das ganze ohne Tabelle formatieren? Wenn Zweiteres, wie würdest du verhindern, dass die Zeilen, durch die verschiedenen Elemente die sie beinhalten, unterschiedlich hoch sind?
 
Tabellen dienen nur zur Ausgabe tabellarischer Daten. Für die Gestaltung ist ausschließlich CSS zuständig, und da spielt es dann keine Rolle, ob die Elemente beim Laden der Seite bereits vorhanden sind oder nachträglich mit einem createElement() erzeugt werden.

Die Höhe von Containern lässt sich mit Attributen wie height, min-height und max-height beeinflussen.
 
Tronjer schrieb:
Tabellen dienen nur zur Ausgabe tabellarischer Daten. Für die Gestaltung ist ausschließlich CSS zuständig
...
Die Höhe von Containern lässt sich mit Attributen wie height, min-height und max-height beeinflussen.
Zum Vergrößern anklicken....

Soweit so klar. Ich hab leider den alten Code nicht mehr gehabt. Aber ich hab eine schnelle Version ohne Tabelle gebastelt um zu zeigen was ich meine.
http://amroc.andymel.eu/b/test.html

Gibt es eine Möglichkeit die Spalten und Zeilen die ich benötige um die Einstellungsparameter aufgeräumt aussehen zu lassen ohne Tabelle zu implementieren? Also nur über CSS?

Das Ziel ist, dass wie bei ersterem http://amroc.andymel.eu/b/ die Textinputs und Checkboxes schön übereinander und die Zeilen (der 3 Divs in der neuen Version) auf gleicher Höhe sind.

lg Andi
 
Sicher ist das möglich. Aber ebenso wenig wie eine Scriptsprache lässt sich CSS in einem Forenpost erklären. Dazu musst du dir schon die entsprechenden Dokus und Tutorials suchen.

Um allen Containern eine identische Höhe zu geben, fallen mir auf Anhieb drei Möglichkeiten ein:
- Du gibst ihnen per CSS dieselbe height und richtest dich dabei nach dem "größten" Element. Dabei musst du allerdings vorab wissen, welches den meisten Inhalt hat.
- Du verwendest die faux column Technik. Siehe Google.
- Du fragst die Höhen der Container per JavaScript ab und weist ihnen dynamisch eine height zu.
 
Ich glaube ich stelle meine Fragen nicht richtig.

Die Höhe der DIVs ist ja einfach, da sich der Inhalt nicht dynamisch ändert!!
Es geht mir um die Position der Elemente IN den DIVs. Würdest du die alle absolut angeben? Wäre das die normale Art und Weise sicherzustellen, dass die einzelnen Elemente schön über- und nebeneinander liegen?

Ich kenne bis jetzt nur die zwei Varianten um das zu erreichen. Absolut oder Tabelle. Meine Frage ist wie ihr das machen würdet.
 
Ich bin da vielleicht ein wenig zu sehr Prinzipienreiter in mancher Augen, aber ich würde gerne nicht gleich bei der ersten Seite ein Framework benutzen sondern erstmal die Grundlagen ausnutzen und verstehen.
Das Stichwort Gridsystem ist aber sehr interessant. Danke dafür!
Nagut, mal sehen, ich werde mal eine Version ohne Tabelle versuchen in der ich pro "Einstellungs-Ebene" (Room Dimensions, Modes to view, more,...) ein eigenes DIV mache mit position: relative; top/left 0px und dann die darin liegenden Elemente dynamisch erzeugen mit position: absolute. Das dürfte, wenn ich es richtig verstanden habe, den normalen Fluss außerhalb des Settings Dialoges ja nicht stören. Nur die Settings sind dann absolute (eigentlich ja relativ zu ihrem DIV) positioniert.

Kommt mir im Moment wie die beste Lösung vor...wahrscheinlich nur bis ich es versucht habe :D
Danke jedenfalls für deine Hilfe!

Bin natürlich weiterhin offen für weitere Anregungen ;)
 
andymel schrieb:
Kommt mir im Moment wie die beste Lösung vor...wahrscheinlich nur bis ich es versucht habe :D
Danke jedenfalls für deine Hilfe!

Bin natürlich weiterhin offen für weitere Anregungen ;)
Zum Vergrößern anklicken....

Vergiss dein Projekt für den Augenblick und erstelle eine ganz einfache Seite mit drei gleich großen, leeren Div-Containern, die nebeneinander stehen. Zur Positionierung sind lediglich die Attribute margin, float/clear und display: inline-block erlaubt. Kein position. Hast du das hinbekommen, packe in die Divs jeweils einen kleinen Text und verschiebe diesen mittels padding innerhalb der Container. Funktioniert das auch, hast du das System verstanden und kannst anschließend an deiner richtigen Seite weiter arbeiten.
 
Yesss, ich hab schon so lang keine Hausübungen mehr bekommen, da hab ich mich gleich freudig ans Werk gemacht ;)
http://amroc.andymel.eu/b/test2.html

Das obere ist, wenn ich es richtig verstanden habe, die Aufgabe so wie du sie gemeint hast, richtig?

Unten der gleiche Code, aber mit den Elementen darin. Wie würdest du jetzt sicherstellen, dass die Inputs alle neben- und übereinander sind? Also zB das Textinput Element von length genau über dem Textinput Element von width. Und zwar auch wenn sich (zB durch einen Wechsel der Sprache in Zukunft?!) die Länge der Wörter width/length ändert.
Mit Padding und width/height ginge das zum Beispiel, wenn ich jedes Element in ein eigenes Div stecke und dann die Divs über Klassen wie Zeilen und Spalten anspreche. Also zB eine Klasse "row" mit einer fixen "height". Und dann eine ganze Reihe Klassen "col1, col2, col3" mit der jeweils gewünschten fixen "width" (bzw. würde ich dann vermutlich width in % unter Verwendung min/max width machen, damit sich auch hier die Spalten mehr Platz geben wenn der Platz vorhanden ist...so wie jetzt die 3 grauen DIVs auch.

Würdest du das so machen?
 
Nimm bei #div_wrapper_sett und bei #div_sett das float: left raus. Gib #div_sett ein display: inline-block. Damit ersparst du dir das clearen. Die Texte zu den <input> gehören in ein <label> und auch diesen beiden Elementen lässt sich eine width verpassen. Dann stehen sie exakt übereinander.

Da du ja bereits Programmiererfahrung mitbringst, solltest du dir außerdem gleich angewöhnen, auf Inline-Javascript zu verzichten. Das ist ganz schlechter Stil. Kombiniere deine Eventhandler statt dessen mit einem Eventlistener. Am einfachsten geht das mit jQuery.

Code: 
$('.taller').on('change', function() {
    // mach etwas mit allen Elementen, welche die Klasse taller besitzen
});

http://api.jquery.com/category/events/
 
Das label wars! genau...damit ist alles klarer.
Dank deiner Tipps war ich motiviert und hab das gleich ausprobiert. Funktioniert. Nur der Tipp mit dem Weglassen der floats funktioniert nicht ganz richtig. Im IE10 und FF ist das 3te DIV um oder 2 Pixel zu weit unten. Beim Chrome mehr, vor allem wenn das Fenster schmal wird.
http://amroc.andymel.eu/b/test2.html
Hast du da noch einen Tipp? Ist nicht so tragisch, mit den floats funktioniert es in allen 3 browsern erstmal.

Danke auch für den Hinweis mit den Listenern, das werde ich mir in einem nächsten Schritt genauer zu Gemüte führen.
lg Andi
 
Ich kann dir als weiteren Tipp das bereits erwähnte Bootstrap ans Herz legen. Dessen Grid-System verhindert die Darstellungsprobleme in unterschiedlichen Browsern und du brauchst nicht mal zu floaten. Außerdem sieht deine Seite damit auch auf mobilen Geräten ordentlich aus.

Schau dir mal ein Tutorial auf Youtube an. Die Grundzüge lassen sich in 30 min. erlernen, und du sparst damit viel Zeit bei der Browseroptimierung.
 
Ich werde mir das sicher bald mal zu Gemüte führen. Danke nochmal für deine wirklich hilfreichen Tipps. Mittlerweile hab ich meine Settings erweiterbar und in der richtigen Höhe und Breite, genau so wie ich es im Titel dieses Threads gemeint habe.
http://amroc.andymel.eu/b/
lg andi
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben