Implementieren Sie verschiedene Layouts für eine (Teil einer) Webseite

Ich möchte einen coding Spielplatz implementieren. Im Moment verwende ich flex-box, um die Position verschiedener Panels zu definieren. Hier ist ein JSBin und seine HTML-Teil:Implementieren Sie verschiedene Layouts für eine (Teil einer) Webseite

<div class="flex-box"> 
    <div class="col" id="html-panel"> 
    <p>html</p> 
    </div> 
    <div class="handle"> 
    <div class="handle-inner"></div> 
    </div> 
    <div class="col" id="css-panel"> 
    <p>css</p> 
    </div> 
    <div class="handle"> 
    <div class="handle-inner"></div> 
    </div> 
    <div class="col" id="js-panel"> 
    <p>javascript</p> 
    </div> 
</div>

(machen es einen Spielplatz, ich hinzufügen textarea in jedem panel (zB html-textarea in html-panel) und verbinden den Inhalt der drei Textfelder einen Ausgang zurückzukehren Der Spielplatz reagiert auf jede Änderung des Inhalts in Textareas: Ich wähle einen AngularJS-Controller dafür und nicht JQuery-Ereignishandler.)

Jetzt frage ich mich, wie man verschiedene Layouts realisiert, ohne zu viel Code zu wiederholen . Wie Liveweave schlagen 4 Layouts (siehe rechts unten) an Benutzer, mag ich zum Beispiel der Anzeige vorzuschlagen

horizontal die drei Platten wie das, was aussieht wie zur Zeit
vertikal die 3 Platten
1 auf die linke und 2 auf der rechten Seite
2 links und 1 rechts

Also, was ist der beste Ansatz/Struktur/Werkzeug, um dies zu implementieren?

Um das Maximum zu teilen, sollten wir dies mit 1 gemeinsamen .html, 1 gemeinsamen .js und 4 .css Dateien realisieren? Dann müssen wir nur verschiedene .css Datei für verschiedene Layouts wählen?

Quelle

2016-12-26 Anonymous

Warum nicht ein einseitiges Anwendungsframework wie Angular oder React verwenden? – Baruch

Deshalb habe ich 'angularjs' hinzugefügt ... also könnte' angularjs' das tun? Wo kann ich mehr Anweisungen erhalten, um diese verschiedenen Ansichten einfach zu implementieren? –

Angular erleichtert die Struktur für die Verwendung nur 1 HTML-Datei. Nun, bis zu 1 js Datei müssen Sie den Code bündeln (GulpJs, GruntJs, Webpack sind gute Werkzeuge dafür). Ich bin auf meinem Handy, so kann ich nicht wirklich eine gute Antwort schreiben, aber Sie sollten es auf jeden Fall ausprobieren. – Baruch

Basierend auf einigen Untersuchungen kann dies sicherlich durch verschachtelte Ansichten/UI-Router/AngularUI/Angular JS erfolgen. Und wir können eine HTML-Datei pro Layout definieren.

Aber ich werde zuerst gehen, was @DCR vorgeschlagen: nur durch JS und CSS. Weil es einfacher ist, auch weil JS es uns erlaubt, HTML zu injizieren, z. B. durch innerHTML. Daher könnte ich 4 HTML-Strings für 4 Layouts einfügen. Innerhalb der 4 Html-Strings könnte es dieselben Klassennamen geben, die ein Teilen von Styling in CSS und Funktionen (z. B. das Ziehen von Splittern) in JS ermöglichen.

Quelle

2016-12-27 13:56:42

Implementieren Sie verschiedene Layouts für eine (Teil einer) Webseite

Antwort

Verwandte Themen