Accentsconagua

Schnelle Weboberfläche mit Webknife

Code
Share
Was Sie erstellen werden

Das moderne Web fordert immer schnellere Entwicklungszyklen. Angesichts dieser größeren Nachfrage besteht Bedarf an Werkzeugen, um diese Fristen einzuhalten. Webknife ist ein Webentwicklungs-Framework, das bei der Erstellung schöner Layouts und Designs mit möglichst wenig Code hilft. In diesem Tutorial erstelle ich eine webbasierte Anwendung, mit der die Kursleiter bei Tuts + ihre Kursunterlagen in Markdown einfacher erstellen können.

Wireframing

Bevor Sie mit dem Programmieren beginnen, sollten Sie sich ein Bild vom Anwendungslayout machen und wie es funktionieren soll. Diese Anwendung erstellt ein ordnungsgemäß formatiertes Markdown-Dokument, um einen Videokurs im Envato CMS abzulegen. Daher besteht es meistens aus Eingabefeldern.

ich benutzte Affinity Designer So erstellen Sie ein Drahtgitter der Anwendung. Hier ist der Hauptteil Eigenschaften Tab. Dies sind die wichtigsten Informationen, die zum Erstellen des CMS-Eintrags für den Kurs erforderlich sind.

Kurs-Eigenschaften-Formular

Auswahl der Unterricht Registerkarte zeigt dieses Formular. Hier kann der Ausbilder die Kapitelüberschriften, Lektionstitel, Lektionsbeschreibungen und Lektionslinks eingeben. Die Nummerierung wird vom Programm automatisch berechnet. Dieses Tutorial zeigt nur genügend Demoelemente, um das Layout zu sehen.

Kursstunde Formular

Das Export tab hat ein einzelnes Element: eine Schaltfläche zum Exportieren des Kurses nach a Markdown dokumentieren.

Kurs-Exportformular

Erste Schritte mit Webknife

Um die Bibliothek herunterzuladen, besuchen Sie die Website für Webknife und laden Sie die neueste Version herunter. Während Sie dieses Tutorial schreiben, ist die neueste Version 1.4.0. Entpacken Sie die Datei in Ihrem Arbeitsverzeichnis.

Webknife ist eine Gruppe von Stylesheets und einigen JavaScript-Dateien, die das Erstellen von HTML-Sites schnell und einfach machen. Deshalb gehe ich zuerst durch die Erstellung des HTML-Codes, zeige das Ergebnis und füge dann gerade genug CSS hinzu, damit es so aussieht, wie ich es möchte. Das Webknife-Toolkit erledigt die meiste Arbeit.

Der obere Teil des HTML-Codes ist die Kopfzeile, mit der die Stylesheets geladen und der Titel festgelegt wird. Erstellen Sie die Datei index.html und fügen Sie Folgendes hinzu:

        Envato Course Sheet Generator

Das ist der Anfang der HTML-Datei für das Projekt. Alles andere geht weiter zwischen

Stichworte.

Tabs

Der erste Teil besteht aus den Registerkarten. Sie enthalten Symbole und Text, der beschreibt, was diese Registerkarte bewirkt. Platzieren Sie diesen Code in der Main div:

 
     
  •    Eigenschaften  
    •  
  •    Unterricht  
    •  
  •    Export  
    •

Die ungeordnete Liste hat eine Klasse von w-tab. Diese Webknife-Klasse formatiert die Listenelemente als Registerkarten. Das erste Listenelement hat die Klasse von w-aktiv. Webknife verwendet dies, um die Farbe der Registerkarte zur aktiven Einfärbung zu ändern. Der Rest tut dies nicht, also werden sie inaktiv sein.

Jedes Listenelement hat einen Anker mit einem onclick Funktion. Diese Funktionen werde ich erstellen, um das Wechseln der Inhalte des Inhaltsbereichs zu unterstützen.

In den Ankerlaschen befinden sich zwei Felder. Die erste Spanne hat eine Klasse von w-Symbol. Alle Felder dieser Klasse haben eine Datenname Selektor mit dem Namen des Symbols, das innerhalb dieses Bereichs eingefügt werden soll. Die Eigenschaftenspanne hat die data-name = "Zwischenablage". Die Lessons-Spanne hat die data-name = "compose". Die Exportspanne hat die data-name = "share". Webknife bietet 77 Svg-Symbole zur Auswahl. Weitere Informationen finden Sie im HTML-Referenzhandbuch.

Mitteilungen

Nach dem Registerkarten, Diesen Code eingeben:

  
  
Gut gerettet!
 
 
  
Es gab einen Fehler!

Dieser Abschnitt beginnt mit a div das enthält den gesamten Panel-Inhalt für alle drei Registerkarten. Diese div Enthält außerdem zwei Meldungsbereiche: einen für das Abschließen des Speicherns und einen für Fehlermeldungen.

Webknife-Nachrichten - mit meiner hinzugefügten Formatierung

Webknife hat den CSS-Stil groß um das Symbol zu vergrößern und den CSS-Stil farbig um es rot zu färben. In beiden Nachrichten verwende ich die datenname: "alert_circled" für ein abgerundetes Dreieck mit einem Ausrufezeichen. Jede Nachricht hat die Webknife-Klasse w-nachricht um die Botschaft zu gestalten. Die gespeicherte Nachricht wird verwendet w-information, und die Fehlermeldung verwendet w-Fehler.

In den Quelldateien für dieses Tutorial habe ich diese Zeilen auskommentiert. Ich werde JavaScript verwenden, um diesen Code bei Bedarf in das DOM einzufügen.

Eigenschaftenbereich

Für die Eigenschaftenbereich, fügen Sie diesen Code hinzu:

Das Eigenschaftenfenster div enthält zwei Klassen: w-form und w-aktiv. w-form definiert das Styling für ein Formular und w-aktiv bezeichnet es als aktiv angezeigt. Da die Anwendung in diesem Fenster gestartet werden soll, wird sie von Anfang an festgelegt.

Innerhalb dieses div, es gibt divs mit der Klasse w-form-group. Diese Klasse hält alles in einer Zeile. Jedes von diesen divs enthält eine Beschriftung und eine Eingabe oder einen Textbereich. Jede Eingabe verfügt über einen eindeutigen Bezeichner, um die Informationen leicht von JavaScript abzurufen. Da ist ein w-form-group dev für jeden Eingang in diesem Panel.

Lektionen Panel

Nach dem div für die Eigenschaftenbereich, Diesen Code eingeben:

 
    
    
  
 
Ähnliche Links:
 
    
 
  
 
 
 
  
 
 
 
    
    
  
 
Ähnliche Links:

Die Struktur des Stundenfensters ist für das Eigenschaftenfenster gleich. Die Beschriftungen zeigen unterschiedliche Abschnittsnummern und Unterrichtsnummern an. Die Eingaben sind Texteingaben für die Überschriften und Titel und sind Textbereichs für die Beschreibungen.

Jede Überschrift, jeder Lektionstitel und jeder Link hat ein Spanne Element mit der Datenname von close_circled. Dadurch wird ein Kreis mit einem "x" in der Mitte eingefügt, um diese Elemente zu löschen.

Jeder Verbindungseingang hat eine Spanne Element mit der Datenname von Erde. Dadurch wird ein Symbol angezeigt, das wie eine Kugel aussieht.

Alle Schaltflächen verfügen über die Webknife-Klassen w-klein und w-farbig. Das addButton class dient zum Hinzufügen eines bestimmten Stylings in der CSS-Datei.

Das Ich würdes sind nicht die endgültigen, aber der JavaScript-Code erstellt sie nach Bedarf. Diese zeigen nur das Basisformat.

Panel exportieren und JavaScript importieren

Nach dem div Platzieren Sie für das Lessons Panel diesen Code:

Das Exportpanel verfügt über eine einfache Schaltfläche. Die Webknife-Klassen von w-groß und w-farbig machen Sie den Button größer und dunkler blau.

Nach dem Schluss divs für die Platten, die drei Skript Tags laden JavaScript-Dateien von Webknife und meiner JavaScript-Datei. Meine JavaScript-Datei enthält die Funktionen, die zum Wechseln der Registerkarten und Anzeigen der Datumsauswahl und des modalen Dialogfelds zum Hinzufügen eines Links erforderlich sind.

JavaScript-Code

In der Datei js / basic.js, fügen Sie diesen Code hinzu:

function onLoadFunctions () // // WebKnife: instanziiert einen SVG-Injektor, um SVG-Symbole anzuzeigen, // oder verwendet injector.inject ('# foo'), um nur die // passenden Elemente zu injizieren // var injector = new svgInject () ; Injektor.Injekt (); // // Richten Sie den Datumsauswahl für das Fälligkeitsdatum ein. // var dateDue = $ ('# datedue'). pikaday (firstDay: 1, minDate: neues Datum ('01 -01-2015 '), maxDate: neues Datum ('12 -31-2015'), Format: 'MM / TT / JJJJ', yearRange: [2015,2099]);  window.onload = onLoadFunctions; // // Diese globalen Variablen und Funktionen dienen zum schnellen Ändern der // Zustände der Registerkarten und ihres Inhalts. // var propPan = $ ("# propertiesPanel"); var lessPan = $ ("# LessonsPanel"); var expPan = $ ("# exportPanel"); var propTab = $ ("# propertiesTab"); var lessTab = $ ("# lessonsTab"); var expTab = $ ("# exportTab"); function propertiesTabClick () propPan.addClass ("w-active"); lessPan.removeClass ("w-active"); expPan.removeClass ("w-active"); propTab.addClass ("w-active"); lessTab.removeClass ("w-active"); expTab.removeClass ("w-active");  function lessonsTabClick () propPan.removeClass ("w-active"); lessPan.addClass ("w-active"); expPan.removeClass ("w-active"); propTab.removeClass ("w-aktiv"); lessTab.addClass ("w-active"); expTab.removeClass ("w-active");  function exportTabClick () propPan.removeClass ("w-active"); lessPan.removeClass ("w-active"); expPan.addClass ("w-active"); propTab.removeClass ("w-aktiv"); lessTab.removeClass ("w-active"); expTab.addClass ("w-active");  function getLink (addButton) // // Erstellen Sie das modale Dialogfeld zur Eingabe der Webadresse. // var modalOptions = 'width': 600, 'height': 220, 'title': 'Titel und Webadresse für Link eingeben', 'html': '
[] ()
'; $ (addButton) .modal (modalOptions);

Die erste Funktion ist eine onload Funktion. Es wird ausgeführt, wenn das Laden der Seite abgeschlossen ist. Diese Funktion richtet den Svg-Icon-Injektor mit dem Webknife-Framework ein. Danach wird die Datumsauswahl, auch von Webknife, für das Fälligkeitsdatum des Kurses eingerichtet.

Die globalen Variablen und die drei folgenden Funktionen führen das Wechseln zwischen Registerkarten durch. Ich verwende die Variablen, um den jQuery-Wrapper für die verschiedenen Tab-Elemente und Bedienfelder beizubehalten. Auf diese Weise werden sie nicht bei jeder Ausführung der Funktionen erstellt.

Die letzte Funktion dient dazu, den modalen Dialog auf der zu öffnen Links hinzufügen Taste. Wenn der Benutzer auf die Schaltfläche klickt, wird der folgende Dialog angezeigt:

Modaler Dialog zum Hinzufügen von Links mit meiner Formatierung

Um die Anwendung voll funktionsfähig zu machen, muss mehr Code geschrieben werden. Dies ist jedoch ausreichend für dieses Lernprogramm.

Benutzerdefinierte CSS

Vor dem Hinzufügen des benutzerdefinierten CSS sieht die Anwendung folgendermaßen aus:

Anwendung mit Standard-Webknife-Styling

Das sieht nicht schlecht aus, außer dass alle Panels gleichzeitig angezeigt werden und die Hintergrundfarben nicht das sind, was ich wollte. Dies ist jedoch leicht zu beheben. In der Datei css / basic.css, Diesen Code eingeben:

body overflow-x: versteckt; Hintergrundfarbe: hellblau;  #main Hintergrundfarbe: Hellblau; Überlauf-x: ausgeblendet; Polsterung links: 10px; Polsterauflage: 10px; Marge: 0px; Breite: 720px;  section padding: 0px;  #panelContainer width: 700px; Box-Dimensionierung: Border-Box; Grenzradius: 5px; Rahmen: 1px fest #bbb; Höhe: 855px; Überlauf-y: Auto;  #propertiesPanel height: 0px;  #lessonsPanel height: 0px;  #exportPanel height: 0px;  #exportPanel div top: 200px; Position: relativ;  .w-tab margin-left: 5px;  .w-tab li Hintergrundfarbe: # 86c5da;  .w-tab li.w-active Hintergrundfarbe: # d4ebf2; Rand unten: 0px;  .w-tab-content Hintergrundfarbe: # d4ebf2;  .w-form top: 0px; Grenze: 0px; Polsterung: 0px; Marge: 0px; Sichtbarkeit: versteckt;  #propertiesPanel .w-form-group .w-Dateieingabe, #propertiesPanel .w-form-group-Eingabe [Typ = Text], #propertiesPanel .w-form-Group-Eingabe [Typ = Kennwort], #propertiesPanel .w -form-group select, #propertiesPanel .w-form-group Textbereich, #propertiesPanel .w-form-group label display: inline; Breite: 55% .w-form .w-form-group margin: 0;  #propertiesPanel .w-form-group label Anzeige: Inline-Tabelle; Breite: 42%; Textausrichtung: rechts; Polsterung rechts: 10px;  #lessonsPanel .w-form-group .w-Dateieingabe, #lessonsPanel .w-form-group-Eingabe [Typ = Text], #lessonsPanel .w-form-Group-Eingabe [Typ = Kennwort], #lessonsPanel .w -form-group select, #lessonsPanel .w-form-group Textbereich, #lessonsPanel .w-form-group Beschriftung display: inline; width: 80% #lessonsPanel .w-form-group label Anzeige: Inline-Tabelle; Breite: 5%; Textausrichtung: rechts; Polsterung rechts: 10px;  .lessonGroup padding-left: 40px;  .lessonDescriptionGroup padding-left: 45px;  .linksGroup padding-left: 0px;  .closeIcon vertical-align: middle;  .closeIcon svg width: 15px; Rand oben: 5px; vertikal ausrichten: Mitte;  .linkIcon vertical-align: middle;  .linkIcon svg width: 15px; Rand oben: 5px; vertikal ausrichten: Mitte;  .addButton margin-top: 10px;  #message display: inline-flex; Breite: 600px; Überlauf versteckt; Top 100;  #message p width: 550px; Rand links: 20px;  #message span svg margin-top: 20px;  #message span height: 45px;  #alert Anzeige: Inline-Flex; Breite: 600px; Überlauf versteckt;  #alert p width: 550px; Rand links: 20px;  #alert span svg margin-top: 20px;  #alert span height: 45px;  .w-active Sichtbarkeit: sichtbar! wichtig; Höhe: Auto;

Das ist alles, was CSS benötigt, um den gewünschten Look zu erhalten. Meistens werden die Symbole an der richtigen Stelle angezeigt. Dabei werden die Bereiche, die bei der Auswahl der Registerkarten nicht sichtbar sind, richtig ausgeblendet und die Hintergrundfarben festgelegt.

Mit dem CSS an Ort und Stelle Eigenschaften Tab sieht so aus:

Eigenschaften Tab

Das Unterricht Tab sieht so aus:

Registerkarte "Lektionen"

Und das Exporte Tab sieht so aus:

Registerkarte Exporte

Sie sind nicht genau wie das Drahtgitter, aber ich mag das Aussehen.

Fazit

In diesem Tutorial habe ich Sie durch die Erstellung einer grundlegenden Webanwendung zum Erstellen von Kurslisten in Markdown für Envato geführt. Dieses Projekt zeigt nur die Front-End-Grafiken, demonstriert jedoch, wie Webknife verwendet wird, um das Erscheinungsbild Ihrer Webanwendung oder Website schnell zu erstellen. Es gibt viel mehr Elemente zu verwenden, als ich in diesem Projekt verwenden konnte. Es liegt an Ihnen, jetzt zu experimentieren. Erstellen Sie also in Webknife etwas Neues.

Code
×