Freitag, 6. Juni 2014 Schriftart Awesome Integration Icon Schriftarten, wie Font Awesome. Kann eine riesige Anzahl von graphischen Elementen für eine Web-Site in einer Bandbreite effiziente Weise bereitstellen. Sie tun dies, indem sie auf den Grundlagen der regulären Font-Dateien und Web-Browser Fähigkeiten, um Web-Fonts verwenden. Die Informationen für jedes Symbol wird in einem Vektor-Formular gespeichert, so dass, wenn der Browser macht es, wird es aussehen Pixel perfekt in jeder Größe, auf jedem Gerät. DataTables verwendet nicht eine große Anzahl von Icons, da das Hauptlayout der Tabelle und der Daten durch das CSS-Design der Seite definiert wird, aber es verwendet ein paar Symbole, um zu helfen, Informationen an den Endbenutzer zu übermitteln: In den Headerzellen Um anzuzeigen, dass eine Spalte sortiert werden kann, oder dass die Sortierung derzeit auf sie angewendet wird. Optional können in der Paginierungssteuerung die nächsten und vorherigen Schaltflächen grafisch über Symbole angezeigt werden. In diesem Beitrag werde ich beschreiben, wie wir Font Awesome verwenden können, um diese grafischen Elemente für DataTables bereitzustellen und eine komplette Integrationsdatei anzuzeigen, die mit dem Standard-Stylesheet von DataTables sowie den DataTables-Bootstrap - und Foundation-Styling-Integrationen arbeitet. Symbole sortieren Das Standard-Datenblatt Stylesheet verwendet Hintergrundbilder, um den aktuellen Sortierstatus des Tisches dem Endbenutzer anzuzeigen. Drei Icons (Sortierung aufsteigend, Sortierung absteigend und sortierbar) bedeutet drei HTTP-Anfragen - mit einer Icon-Schrift reduziert dies auf eine einzige Anforderung und beschleunigt die Reaktionszeit Ihrer Website (ein Sprite könnte auch verwendet werden, obwohl es seine eigenen Komplexitäten hat) . Um die von Font Awesome bereitgestellten Icons zu verwenden, können wir die CSS verwenden: nach pseudo-element. Als eine kurze Zusammenfassung ist jedes Element, das vom Browser angezeigt wird, vor und nach Elementen leer, die normalerweise ausgeblendet sind, aber für Styling sichtbar gemacht werden können - genau das, was wir wollen Betrachten Sie das folgende CSS: Zeile 1: Wählen Sie die Spaltenüberschriftenzellen aus Die Tabelle, auf die wir unser Styling anwenden werden Zeile 2: Stellen Sie die Position auf relativ ein, so dass: nach dem Pseudoelement relativ dazu positioniert werden kann. Zeile 3: Entfernen des Standard-DataTables-Sortierbild-Indikators Zeilen 6-8: Auswahl der: nach Pseudoelementen Zeilen 9-12: Anzeigen des Pseudoelements und der Position auf der rechten Seite der Kopfzeile Zeile 13: Stellen Sie die Schriftart auf Font Awesome ein Jetzt alles, was wir tun müssen, ist zu sagen, der Browser, was Symbol von Font Awesomes Liste zu verwenden. Wir tun dies mit dem CSS Content-Eigenschaft. In diesem Fall wenden wir den gewünschten Symbolcode auf die drei Sortierklassen an. Beachten Sie auch, dass die Sortierung, aber nicht aktiviert, Icons sind etwas kleiner als die Symbole, welche Spalten die Tabelle derzeit bestellt wird durch. Paging-Steuerelemente Wie bereits erwähnt, befindet sich der andere Bereich, in dem DataTables Symbole verwenden kann, in den Paging-Steuerelementen. Anstatt in die Einzelheiten des hierfür erforderlichen CSS zu gehen, da der Prozess grundsätzlich derselbe wie oben ist, finden Sie in der vollständigen Integrationsdatei unten, wenn Sie an der Funktionsweise der Paging-Symbole mit einer Symbolschrift interessiert sind. Es ist erwähnenswert, dass die DataTables-Sprachoptionen. Wie language. paginate. next kann verwendet werden, um die Zeichenfolgen neben den Symbolen zu ändern oder sie vollständig zu entfernen (indem Sie sie als leere Zeichenfolge festlegen), so dass nur das Symbol. Schließlich können die Schaltflächen für den Paging-Eingang durch pagingType gesteuert werden. Vollständige Integration Die komplette CSS-Datei. Überprüfen Schriftart Achtung Integration für DataTables ist auf dem DataTables CDN verfügbar: Die Schriftart Awesome Integration Datei für DataTables bietet Unterstützung für die Standard-DataTables Stylesheet. Sowie die Integrationsmöglichkeiten für Bootstrap und Foundation. Um es auf Ihren eigenen Seiten zu verwenden, einfach die CSS-Datei von der CDN wie jede andere CSS-Datei mit einem Link-Tag, oder kopieren Sie die CSS auf Ihre eigenen lokalen Dateien und ändern, um Ihre Bedürfnisse anzupassen (Farbe hinzufügen, um die Symbole für Beispiel). Die folgenden Dokumente zeigen, dass die Font Awesome-Integration mit einem grundlegenden DataTable: DataTables-Tabellen-Plug-In für jQuery DataTables verwendet wird, ein Plug-In für die jQuery Javascript-Bibliothek ist. Es ist ein sehr flexibles Werkzeug, basierend auf den Grundlagen der progressiven Verbesserung, und fügt erweiterte Interaktion Kontrollen zu jeder HTML-Tabelle. Pagination, Instant-Suche und mehrspaltige Sortierung Unterstützt nahezu jede Datenquelle: DOM. Javascript. Ajax und serverseitige Verarbeitung Leicht themenfähig: DataTables. JQuery-Benutzeroberfläche. Bootstrap. Foundation Große Auswahl an Erweiterungen inc. Herausgeber. Schaltflächen. FixedColumns und mehr Umfangreiche Optionen und eine schöne, ausdrucksstarke API Völlig internationalisierbar Professionelle Qualität: Unterstützt durch eine Suite von 2900 Unit-Tests Kostenlose Open-Source-Software (MIT-Lizenz) Kommerzielle Unterstützung verfügbar. Scrolling-Optionen für den Tabellen-Viewport Intelligente Handhabung von Spaltenbreiten Zustandseinsparung Versteckte Spalten Dynamische Erstellung von Tabellen Ajax Automatisches Laden von Daten Benutzerdefinierte DOM-Positionierung Einzelne Spaltenfilterung Alternative Seitentypen Zerstörungsfreie DOM-Interaktion Sortierspalte (n) Hervorhebung Erweiterte Datenquellenoptionen Kommerzielle Unterstützung verfügbar Umfangreiche Plug-In-Unterstützung Sortierung, Typerkennung, API-Funktionen, Paginierung und Filterung Feste Dokumentations - und Schnittstellenreferenz 130 vorgefertigte Beispiele Wie einfach ist es, die DataTables zu verwenden Sehen Sie sich den folgenden Code an: Ein einziger Funktionsaufruf zur Initialisierung der Tabelle ist alles was Sie brauchen. Erste Schritte mit DataTables ist so einfach wie zwei Dateien in Ihrer Website, dem CSS-Styling und dem DataTables-Skript selbst. Diese beiden Dateien sind auf den DataTables CDN verfügbar: Ein Beispiel für DataTables in Aktion wird unten gezeigt.
No comments:
Post a Comment