
Eine Bibliothek zur Nachahmung des Betriebssystems Grafische Benutzeroberflächen im Web
Insbesondere Windows 98 - zumindest vorerst; Es könnte in Zukunft erweitert werden.
Diese Bibliothek macht 98.js.org, eine webbasierte Version von Windows 98, einschließlich Farbe, Notizblock, Soundrekorder und mehr.
Weitere Informationen finden Sie auf der Homepage.
Menüleisten mit Unterstützung für Kontrollkästchen und Radioelemente, deaktivierte Zustände, Untermenüs, Tastaturverknüpfungen und mehr
App -Fenster, die Sie herumziehen, maximieren, minimieren, schließen und die Größe ändern können
Dialog- und Werkzeugfenstervarianten
Fliegende Titelleisteanimation, die Ihre Augen beim Maximieren/Minimieren/Wiederherstellen leitet
FOCUS -Containment: Wenn Sie in einem Fenster Registerkarte oder Verschiebung+Registerkarte verändern, wechselt es auf die erste/letzte Steuerung.
Knopfstile, einschließlich leichter Schaltflächen, deaktivierter Tasten und Standardaktionenschaltflächen
Scrollbar-Stile, Webkit-spezifisch (in Zukunft könnte es eine benutzerdefinierte Scrollbar auf einer nichtintertusiven Bildlaufbibliothek oder Stile geben, die eine Bibliothek unterstützen , in der Sie die Bibliothek direkt verwenden möchten)
Themen Sie mit Windows .theme & .themepack -Dateien zur Laufzeit !
Siehe Demos online hier
Diese Bibliothek erfordert derzeit JQuery für die Fensterimplementierung. Menüleisten erfordern nicht jQuery.
(Irgendwann möchte ich keine Abhängigkeiten haben. Bisher habe ich JQuery aus dem Menücode entfernt ...)
Die Bibliothek ist (noch) nicht als einzelne praktische Datei bereitgestellt.
Sie können entweder 1. 1. Laden Sie das Repository als ZIP -Datei herunter, 2. Klonen Sie das Repository oder 3. Installieren Sie die Bibliothek als NPM -Paket.
Sie müssen Skripte für die Komponenten $Window.js die Sie MenuBar.js möchten, sowie Stylesheets für Layout, ein Thema und ein Farbschema einfügen.
Stellen Sie sicher, dass Sie die kompilierten CSS -Dateien verwenden, nicht die Quelldateien.
In <head> :
< link href =" os-gui/layout.css " rel =" stylesheet " type =" text/css " >
< link href =" os-gui/windows-98.css " rel =" stylesheet " type =" text/css " >
< link href =" os-gui/windows-default.css " rel =" stylesheet " type =" text/css " > In <head> oder <body> :
< script src =" os-gui/MenuBar.js " > </ script >
< script src =" lib/jquery.js " > </ script > <!-- required by $Window.js -->
< script src =" os-gui/$Window.js " > </ script > Hinweis : Die API wird sich wahrscheinlich sehr ändern, aber ich behalte einen Changelog bei.
.inset-deep schafft einen 2px-Eingangsrand.outset-deep erstellt einen 2PX-Einschubrand (wie ein Schaltflächen- oder ein Fenster oder ein Menü Popup).inset-shallow erzeugt einen 1PX-Eingangsrand.outset-shallow erstellt einen 1px-Outset-Rand Knopfstile werden weltweit auf button angewendet. (Und wenn Sie es jemals zurücksetzen möchten, beachten Sie, dass Sie das Pseudo -Element ::after auch loswerden müssen. @Todo: Scope CSS)
Um eine Schaltfläche umzuschalten, fügen Sie die .toggle -Klasse der Schaltfläche hinzu. Machen Sie es zeigen, wie die .selected Klasse gepresst. (@Todo: benennen Sie dies um .pressed
Sie sollten die Stile zusammen mit semantischen aria-pressed , aria-haspopup und/oder aria-expanded Attributen verwenden.
Sie können die Schaltfläche anmelden, die die Standardaktion ist, indem Sie der Schaltfläche. .default addiert. Beachten Sie, dass dieser Stil in Windows 98 je nach Fokus von der Schaltfläche zu der Schaltfläche bewegt wird. Eine Faustregel ist, dass es sich auf der Taste befinden sollte, die mit Eingabetaste ausgelöst wird.
Sie können eine leichte Taste erstellen, indem Sie .lightweight zum Taste hinzufügen. Leichte Knöpfe sind subtil und haben bis zu schweben keinen Rand.
Sie können eine Schaltfläche deaktivieren, indem Sie das Standard -Attribut disabled Standards zur Schaltfläche hinzufügen.
Sie können eine Taste anzeigen, die gedrückt wird, indem Sie die Taste zum .pressing der Klasse hinzufügen.
Dies ist nützlich für Tasten, die durch einen Tastenanschlag ausgelöst werden.
Scrollbar-Stile werden weltweit angewendet, aber sie haben ein -webkit- Präfix, sodass sie nur in "Webkit-basierten" Browsern wie Chrome, Safari und Opera arbeiten.
(Kann mit ::-webkit-scrollbar und zugehörigen Selektoren überschrieben werden (aber nicht einfach auf den Browser-Standard zurücksetzen, es sei denn, -webkit-appearance: scrollbar funktioniert ... @todo: Scope CSS)
Auswahlstile werden weltweit angewendet.
(Kann mit ::selection überschrieben werden (aber nicht leicht auf den Browser -Standard zurückzusetzen ... es sei denn, mit unset ? @Todo: Scope CSS)
MenuBar(menus)Erstellt eine Menüleistenkomponente.
menus sollten ein Objekt sein, das Arrays von Menüelementspezifikationen hält, die nach Menüschaltflächenname ausgestattet sind.
Gibt ein Objekt mit element zurück, das Sie dann dem DOM anhängen sollten, wo Sie es möchten.
Siehe Beispiele im Demo -Code.
elementDas DOM -Element, das die Menüleiste darstellt.
closeMenus()Schließt alle offenen Menüs.
setKeyboardScope(...eventTargets)Hotkeys wie ALT werden auf der Ebene der angegebenen Elemente oder Ereignisziele (en) behandelt.
Standardmäßig ist das window (global) für den Fall einer einseitigen Anwendung, bei der sich die Menüleiste oben befindet. Wenn Sie die Menüleiste in ein Fenster einfügen, sollten Sie dies mit dem Fensterelement aufrufen:
menu_bar . setKeyboardScope ( $window . element ) ;oder besser noch,
$window . setMenuBar ( menu_bar ) ;Dies kümmert sich um den Tastaturumfang für Sie, während Sie die Menüleiste am Fenster anfügen.
Beachten Sie, dass ein Tastaturverhalten immer behandelt wird, wenn sich die Menüleiste konzentriert.
Hinweis auch für IFrames, Sie müssen dies möglicherweise mit $window[0], iframe.contentWindow derzeit aufrufen. Dies sollte jedoch in Zukunft geändert werden (Tastaturereignisse sollten proxiziert sein).
info Kann verwendet werden, um eine Statusleiste zu implementieren. Eine Beschreibung wird als event.detail.description bereitgestellt description Zum Beispiel:
menubar . element . addEventListener ( "info" , ( event ) => {
statusBar . textContent = event . detail ?. description || "" ;
} ) ; default-infoSignale Signale, dass eine Statusleiste auf leer oder eine Standardnachricht zurückgesetzt werden sollte.
menubar . element . addEventListener ( "default-info" , ( event ) => {
statusBar . textContent = "" ;
// or:
statusBar . textContent = "For Help, click Help Topics on the Help Menu." ;
// like in MS Paint (and JS Paint)
// or:
statusBar . textContent = "For Help, press F1." ;
// like WordPad
// or perhaps even:
statusBar . innerHTML = "For Help, <a href='docs'>click here</a>" ;
// Note that a link is not a common pattern, and it could only work for the default text;
// for menu item descriptions the message in the status bar is transient, so
// you wouldn't be able to reach it to click on it.
} ) ; Die Spezifikationen der Menüelemente sind entweder MENU_DIVIDER (eine Konstante, die eine horizontale Regel angibt) oder eine Funkgruppenspezifikation oder ein Objekt mit den folgenden Eigenschaften:
label : ein Etikett für den Element; Verstärker und Definieren von Zugriffstasten (zur Verwendung eines buchstäblichen Verstärkers, verwenden Sie && )shortcutLabel (optional): Eine Tastaturverknüpfung, die für den Artikel wie "Strg+A" angezeigt werden soll (Hinweis: Sie müssen sich im Gegensatz zu Zugriffstasten auf die Verknüpfung selbst anhören)ariaKeyShortcuts (optional): aria-keyshortcuts für den Artikel wie "Steuer+A meta+a" für Bildschirmleser. "Strg" ist nicht gültig (Sie müssen es herausfordern), und es ist am besten, eine Alternative für macOS bereitzustellen, normalerweise mit dem äquivalenten Befehlstaste mit "meta" (und event.metaKey ).action (optional): Eine Funktion, die ausgeführt werden muss, wenn das Element geklickt wird (kann nur eine action oder checkbox angeben).checkbox (optional): Ein Objekt, das angibt, dass sich dieses Element als Kontrollkästchen verhalten sollte.true check dieses Objekts false eine Funktion sein, die überprüft , ob das Element überprüft werden sollte oder nicht. Was für ein niedlicher Name.toggle sollte eine Funktion sein, die den Status der Option umschaltet. Sie speichern jedoch. Auf Klicken aufgerufen.enabled (optional): Kann false sein, um das Element bedingungslos zu deaktivieren, oder eine Funktion, die feststellt, ob das Element aktiviert werden soll, und die true Rückgabe, um das Element zu aktivieren, false zu deaktivieren.submenu (optional): Eine Reihe von Menüelementspezifikationen zum Erstellen eines Untermenüsdescription (optional): Zur Implementierung einer Statusleiste; Ein info -Ereignis wird beim Rollen des Elements mit dieser Beschreibung ausgestrahltvalue (optional): Für Funkelemente den Wert des Elements; Kann jeder Typ sein, aber === wird verwendet, um festzustellen, ob das Element überprüft wird.Eine Funkgruppenspezifikation ist ein Objekt mit den folgenden Eigenschaften:
radioItems : Eine Reihe von Menüelementspezifikationen zum Erstellen einer Optionsschaltfläche. Im Gegensatz zum submenu sind die Elemente direkt in dieses Menü enthalten. Es wird empfohlen, die Funkgruppe von anderen Menüelementen mit einem MENU_DIVIDER zu trennen.getValue : Eine Funktion, die den Wert des ausgewählten Funkelements zurückgeben sollte.setValue : Eine Funktion, die den Zustand auf anwendungsspezifische Weise in den angegebenen Wert ändern sollte.ariaLabel (optional): Eine Zeichenfolge, die als aria-label für die Funkgruppe verwendet werden soll (für die Bildschirmleser-Zugänglichkeit)Menüs können mit kontextuellen Hotkeys navigiert werden, die als Zugangstasten bekannt sind.
Platzieren Sie einen Verstärker und vor einem Buchstaben in einer Menüschaltfläche oder einem Menüelement -Etikett, um einen Zugriffsschlüssel zu machen. Microsoft verfügt über Dokumentation zu Zugriffsschlüssel, einschließlich Richtlinien für die Auswahl von Zugriffsschlüssel. Im Allgemeinen ist der erste Brief eine gute Wahl.
Wenn ein Menüelement einen Zugriffstaste nicht definiert, kann der erste Buchstaben des Etiketts zum Zugriff auf darauf zugeordnet werden.
Für Menütasten müssen Sie beim Drücken der Zugriffstaste der Taste Alt gedrückt halten. Für Menüelemente in Menüpopups müssen Sie jedoch direkt die Taste drücken, da ALT die Menüs schließt.
Wenn mehrere Menüelemente mit demselben Zugriffstaste vorhanden sind, zykliert es zwischen ihnen, ohne sie zu aktivieren. Sie sollten versuchen, die Zugriffstasten einzigartig zu machen, einschließlich zwischen definierten Zugriffstasten und den ersten Buchstaben von Menüelementen ohne definierte Zugriffsschlüssel. (Dieses Verhalten wird in Windows 98 im Favoritenmenü von Explorer beobachtet, in dem Sie Lesezeichen mit dem ersten Buchstaben erstellen können, der den Zugriffsschlüssel anderer Menüelemente entspricht.)
Es gibt ein AccessKeys -Objekt, das von MenuBar.js exportiert wird, mit Funktionen für den Umgang mit Zugriffsschlüssel:
AccessKeys.escape(label)Es entkommt Verstärker und im angegebenen Etikett, so dass sie nicht als Zugriffsschlüssel interpretiert werden.
Dies ist nützlich für dynamische Menüs, wie ein Verlaufsmenü, in dem Seitentitel als Etiketten verwendet werden. Sie möchten nicht, dass Verstärker und doppelte Verstärker, die als einzelne Verstärker interpretiert werden, fehlerhaft als Zugangstasten interpretiert werden.
AccessKeys.unescape(label)Es entseiten alle doppelten Verstärker im Etikett.
Verwenden Sie zum Rendern stattdessen toHTML oder toFragment .
AccessKeys.has(label)Gibt true zurück, wenn das Etikett einen Zugriffstaste hat.
AccessKeys.get(label)Gibt den Zugriffstaste für das angegebene Etikett oder null zurück, wenn keine.
MenuBar behandelt den Zugriffsschlüssel automatisch. Wenn Sie jedoch Zugriffsschlüssel für andere UI-Elemente einbeziehen, müssen Sie sie selbst verarbeiten, und Sie können dies eher verwenden, anstatt den Zugriffsschlüssel zu kodieren, sodass es an zwei Stellen nicht geändert werden muss.
AccessKeys.remove(label) Entfernt die Zugriffsschlüsselanzeige ( & ) aus dem Etikett und entlesen Sie alle Doppelverstärker. Entfernt auch einen Klammern -Zugriffs -Key -Indikator wie "(& n)" als Sonderfall.
AccessKeys.toText(label) Entfernt die Zugriffsschlüsselanzeige ( & ) aus dem Etikett und entlesen Sie alle Doppelverstärker. Dies ist wie toHTML , aber für einfache Text.
HINWEIS : Während Zugriffsschlüsse häufig Teil eines Wortes wie "& neu" sind, werden sie in Übersetzungen oft getrennt angegeben, wie "새로 만들기 (& n)", da der Zugriffsschlüssel gleich bleibt, aber der Buchstaben ist nicht mehr Teil des Wortes (oder sogar das Alphabet). Diese Funktion entfernt keine Zeichenfolgen wie "(& n)", sondern nur die "&" und hinterlässt "새로 (n)". Wenn Sie dieses Verhalten wünschen, verwenden Sie AccessKeys.remove(label) .
AccessKeys.toHTML(label) Gibt HTML (mit ordnungsgemäßem Entkommen) mit der Zugriffstaste als <span class='menu-hotkey'> Element zurück.
Sicherheitshinweise : Es ist sicher, das Ergebnis dieser Funktion im HTML -Elementinhalt zu verwenden, da es dem Etikett entgeht. Es ist nicht sicher, in einem Attributwert zu verwenden, aber dies ist nicht die beabsichtigte Verwendung.
Layout-Hinweis : Möglicherweise möchten Sie das Ergebnis mit <span style="white-space: pre"> umgeben, um zu verhindern, dass die Whitespace zusammenbricht, wenn sich die Zugriffstaste neben einem Raum befindet.
AccessKeys.toFragment(label) Gibt eine DocumentFragment mit der Zugriffstaste als <span class='menu-hotkey'> Element zurück.
Layout-Hinweis : Möglicherweise möchten Sie das Ergebnis mit <span style="white-space: pre"> umgeben, um zu verhindern, dass die Whitespace zusammenbricht, wenn sich die Zugriffstaste neben einem Raum befindet.
$Window(options)Erstellt eine Fensterkomponente, die herumgeschleppt und so nach vorne gebracht werden kann, beim Klicken nach vorne gebracht und geschlossen werden. Mit unterschiedlichen Optionen können verschiedene Fenstertypen erstellt werden. Beachten Sie, dass der Fokus in den Inhalt eines Fensters umschließt.
Gibt ein JQuery -Objekt mit zusätzlichen Methoden und Eigenschaften zurück (siehe unten, nach Optionen).
Der DOM -Knoten kann mit $window.element zugegriffen werden, und auf das $Window kann über den DOM -Knoten mit element.$window zugegriffen werden.
|
Gibt ein JQuery -Objekt mit zusätzlichen Methoden und Eigenschaften zurück:
title(text) Legt den Titel fest, oder wenn text nicht übergeben wird, gibt der aktuelle Titel des Fensters zurück.
close(force=false)Schließt das Fenster.
Wenn force true ist, wird das "schließende" Ereignis nicht ausgestrahlt und das Fenster wird sofort geschlossen.
focus()Versucht, sich in dieser Reihenfolge der Priorität etwas im Fenster zu konzentrieren:
class="default"$window.$content ) blur()Entfernt den Fokus aus dem Fenster. Wenn sich der Fokus außerhalb des Fensters befindet, bleibt es unverändert.
minimize() Minimiert das Fenster. Wenn $window.task.$task definiert ist, wird dies als Ziel zum Minimieren verwendet, da das Fenster ansonsten bis zum unteren Bildschirm unteren wird.
Das aktuelle Verhalten ist, dass es die Minimierung umschaltet . Dies kann sich in Zukunft ändern.
maximize() Maximiert das Fenster. Während des Maximierens verwendet das Fenster position: fixed , sodass es nicht mit der Seite scrollt.
Das aktuelle Verhalten ist, dass es die Maximierung umschaltet . Dies kann sich in Zukunft ändern. Wenn es minimiert wird, wird es auch wiederhergestellt, anstatt zu maximieren. Grundsätzlich macht es das, was die Maximier -Taste tut, und nicht einfach, wie der Methodenname vorschlägt.
unminimize() Privat: Verwenden Sie das nicht. Verwenden Sie stattdessen restore() .
Stellt das Fenster vom minimierten Zustand wieder her.
restore()Stellt das Fenster vom minimierten oder maximierten Zustand wieder her. Wenn das Fenster nicht minimiert oder maximiert wird, tut diese Methode nichts.
center()Zentriert das Fenster auf der Seite. Sie sollten dies nennen, nachdem der Inhalt des Fensters vollständig gerendert wurde, oder Sie haben eine feste Größe für das Fenster festgelegt.
Wenn Sie Bilder im Fenster haben, warten Sie darauf, dass sie das Fenster beladen und zentrieren, oder definieren Sie eine feste Größe für die Bilder.
applyBounds()Passt das Fenster in die Seite, wenn es teilweise außerhalb des Bildschirms ist. (Die Größe des Fensters nicht, wenn es zu groß ist. Es geht nach rechts und unten auf dem Bildschirm.)
bringTitleBarInBounds()Stellen Sie das Fenster so neu positioniert, dass sich die Titelleiste innerhalb der Grenzen der Seite befindet, sodass es gezogen werden kann.
bringToFront() Bringt das Fenster nach vorne, indem er seinen z-index auf größere z-index einstellt, der vom Fenstersystem verwendet wird.
setDimensions({ innerWidth, innerHeight, outerWidth, outerHeight }) Legt die Größe des Fensters fest. Übergeben Sie { innerWidth, innerHeight } , um die Größe in Bezug auf den Fensterinhalt oder { outerWidth, outerHeight } anzugeben, um die Größe einschließlich des Fensterrahmens anzugeben.
(Dies kann in Zukunft erweitert werden, um auch die Position festzulegen ...)
setIcons(icons) Ändert das Symbol des Fensters. icons sind im gleichen Format wie options.icons .
setTitlebarIconSize(size)Legt die Größe des Titelleistensymbols des Fensters fest und wählt die verfügbare Größe, die verfügbar ist.
getTitlebarIconSize()Gibt die Größe des Titelleistensymbols des Fensters zurück.
getIconAtSize(size) Wählt die am nächsten verfügbare Symbolgröße aus und gibt einen eindeutigen DOM -Knoten (dh kloniert) oder null zurück, wenn keine Symbole definiert sind.
Dies kann zur Darstellung des Fensters in der Taskleiste verwendet werden.
setMenuBar(menuBar)Fängt die Menüleiste zum Fenster an und legt den Tastaturumfang für die Hotkeys der Menüleiste auf das Fenster ein.
Kann mit null aufgerufen werden, um die Menüleiste zu entfernen.
setMinimizeTarget(minimizeTargetElement) Das Minimierungsziel (Taskbartaste) repräsentiert das Fenster, wenn minimiert wird, und wird zum Animieren von Minimierungen und Wiederherstellen verwendet. Wenn minimizeTargetElement null , minimiert das Fenster bis zum unteren Bildschirmrand (die Standardeinstellung).
$Button(text, action)Erstellt eine Schaltfläche im Inhaltsbereich des Fensters. Es schließt das Fenster automatisch, wenn er klickt. Es gibt keinen (guten) Weg, um dies zu verhindern, da es nur für Dialoge bestimmt ist.
Wenn Sie ein anderes Verhalten benötigen, erstellen Sie einfach eine <button> und fügen Sie es dem Inhaltsbereich des Fensters hinzu.
Gibt ein JQuery -Objekt zurück.
addChildWindow($window)Privat: Verwenden Sie das nicht.
Definiert ein Fenster als Kind. Für Tool -Fenster wird der Fokuszustand mit dem übergeordneten Fenster geteilt.
Dies wird intern verwendet, wenn Sie options.parentWindow festlegen. Parentwindow beim Erstellen eines Fensters.
onFocus(listener)Ruft den Hörer an, wenn das Fenster (visuell?) Fokussiert ist.
Gibt eine Funktion zurück, um den Hörer zu entfernen.
onBlur(listener)Ruft den Hörer an, wenn das Fenster (visuell?) Fokus verliert.
Gibt eine Funktion zurück, um den Hörer zu entfernen.
onClosed(listener)Ruft den Hörer an, wenn das Fenster geschlossen ist (nachdem das endgültige Ereignis abgeliefert wurde und wenn es nicht verhindert wurde).
Gibt eine Funktion zurück, um den Hörer zu entfernen.
onBeforeClose(listener) Ruft den Hörer an, bevor das Fenster geschlossen ist. Wenn der Hörer event.preventDefault() anruft, wird das Fenster nicht geschlossen.
Gibt eine Funktion zurück, um den Hörer zu entfernen.
Dieses Ereignis ist nützlich, um beispielsweise mit dem Benutzer vor dem Schließen eines Fensters zu bestätigen.
$window.close(true) kann dann verwendet werden, um dieses Ereignis (und die Bestätigung) zu umgehen, wenn das Fenster wirklich geschlossen werden soll.
Wenn Sie nicht verhindern, dass das Fenster geschlossen wird, sollten Sie stattdessen das closed Ereignis verwenden, da ein anderer Hörer nach Ihrem Hörer hypothetisch verhindern kann, dass Sie nach Ihrem Hörer geschlossen werden, was zu vorzeitiger Reinigung führt.
onBeforeDrag(listener) Ruft den Hörer an, bevor das Fenster von der Titelleiste gezogen wird. Wenn der Hörer event.preventDefault() anruft, wird der Zug verhindert.
Gibt eine Funktion zurück, um den Hörer zu entfernen.
Dieses Ereignis ermöglicht das Überschreiben des Drag -Verhaltens der Farben und Werkzeugefenster in JS -Farbe.
onTitleChange(listener)Ruft den Hörer an, wenn sich der Titel des Fensters ändert.
Gibt eine Funktion zurück, um den Hörer zu entfernen.
Dieses Ereignis kann verwendet werden, um ein Taskleisten -Schaltfläche zu aktualisieren.
onIconChange(listener)Ruft den Hörer an, wenn sich das Symbol des Fensters ändert.
Gibt eine Funktion zurück, um den Hörer zu entfernen.
Dieses Ereignis kann verwendet werden, um das Symbol einer Taskleisten -Taste zu aktualisieren. Verwenden Sie $window.getIconAtSize(size) um ein geeignetes Symbol zu erhalten.
closedOb das Fenster geschlossen wurde.
icons Die Symbole des Fensters an verschiedenen Größen, wie von options.icons oder setIcons() festgelegt.
elementsEin Objekt, das Verweise auf die Elemente des Fensters enthält.
content (htmlelement)Der Inhaltsbereich des Fensters.
titlebar (htmlelement)Die Titelbank des Fensters, einschließlich des Titels, der Fensterschaltflächen und möglicherweise eines Symbols.
_title_area (htmlelement)Ein Wrapper -Element um den Titel.
Privat: Verwenden Sie das nicht. Verwenden Sie stattdessen elements.titlebar oder elements.title , wenn möglich.
title (htmlelement)Der Titel des Fensters.
closeButton (HTMLButtonElement)Die Schaltfläche "Schließen des Fensters".
minimizeButton (htmlbuttonelement)Die Schaltfläche des Fensters minimiert.
maximizeButton (htmlbuttonelement)Die Schaltfläche des Fensters maximiert.
$content JQuery -Objekt.
Wo Sie Inhalte an das Fenster anhängen können.
$titlebar JQuery -Objekt.
Die Titelleiste des Fensters, einschließlich des Titels, der Fensterschaltflächen und möglicherweise eines Symbols.
$title_area Privat: Verwenden Sie das nicht. Verwenden Sie stattdessen $title oder $titlebar , wenn möglich.
JQuery -Objekt.
Wrapper um den Titel.
$title JQuery -Objekt.
Der Titelanteil der Titelleiste.
$x JQuery -Objekt.
Der Schließknopf.
$minimize JQuery -Objekt.
Die minimierende Taste.
$maximize JQuery -Objekt.
Die maximale Taste.
$iconPrivat: Verwenden Sie das nicht.
JQuery -Objekt.
Die Titelbank -Ikone.
elementDas DOM -Element, das das Fenster darstellt.
close Veraltet: Verwenden Sie stattdessen die onBeforeClose -Methode.
Kann verwendet werden, um das Schließen eines Fensters mit event.preventDefault() zu verhindern. Da es mehrere Zuhörer geben könnte und ein anderer Hörer das Schließen verhindern könnte, wenn Sie erkennen möchten, wann das Fenster tatsächlich geschlossen ist, verwenden Sie das closed Ereignis.
closed Veraltet: Verwenden Sie stattdessen die onClosed Methode.
Dieses Ereignis wird ausstrahlt, wenn das Fenster geschlossen ist. Es kann nicht verhindert werden.
window-drag-start Veraltet: Verwenden Sie stattdessen die onBeforeDrag -Methode.
Kann verwendet werden, um das Ziehen eines Fensters mit event.preventDefault() zu verhindern.
title-change Veraltet: Verwenden Sie stattdessen die onTitleChange -Methode.
Kann verwendet werden, um ein Taskleisten -Schaltfläche zu aktualisieren.
icon-change Veraltet: Verwenden Sie stattdessen die onIconChange -Methode.
Kann verwendet werden, um das Symbol einer Taskleisten -Taste zu aktualisieren. Verwenden Sie $window.getIconAtSize(size) um ein geeignetes Symbol zu erhalten.
Abgesehen von center() gibt es keine API speziell für die Positionierung von Fenstern.
Sie können $($window.element).css({ top: "500px", left: "500px" }) verwenden, um die Position des Fensters mit css() -Methode von JQuery zu setzen oder sonst zu verwenden:
$window . element . style . top = "500px" ;
$window . element . style . left = "500px" ; Sie können position auch auf fixed oder absolute einstellen, um das Fenster relativ zum Ansichtsfenster bzw. den nächsten positionierten Vorfahren zu positionieren.
Wenn Sie ein Fenster relativ zu einem anderen Fenster positionieren möchten, können Sie $otherWindow.element.getBoundingClientRect() verwenden, um das Begrenzungsrechteck des anderen Fensters zu erhalten und das Fenster dann zu positionieren. Dies ist eine eingebaute DOM-API. Zum Beispiel:
const otherRect = $otherWindow . element . getBoundingClientRect ( ) ;
$window . element . top = ` ${ otherRect . top } px` ;
$window . element . left = ` ${ otherRect . right + 10 } px` ; !important ) verwendet werden, um das Fenster zu positionieren, da die Bibliothek Inline -Stile verwendet, um das Fenster zu positionieren, das Vorrang hat.setDimensions() erweitern, um das Fenster zusätzlich zur Größe zu positionieren oder eine setPosition() -Methode hinzuzufügen.options.constrainRect übergeben. Konstrainieren Sie die Fensterposition und -größe während des Ziehens und der Größe dynamisch ein. parse-theme.js enthält Funktionen zum Parsen und Anwenden von Themen.
parseThemeFileString(themeString)Pariert eine Ini -Datei -Zeichenfolge in CSS -Eigenschaften.
Rendert automatisch dynamische Themengrafiken und enthält sie in die CSS -Eigenschaften.
applyCSSProperties(cssProperties, {element=document.documentElement, recurseIntoIframes=false}) cssProperties ist ein Objekt mit CSS -Eigenschaften und -werten. Es kann auch ein CSSStyleDeclaration -Objekt sein.
element ist das Element, das die Eigenschaften anwendet.
Wenn recurseIntoIframes wahr ist, werden die Eigenschaften auch auf alle <iframe> -Elemente innerhalb des Elements angewendet. Dies funktioniert nur mit gleichorientierten IFrames.
renderThemeGraphics(cssProperties)Kann verwendet werden, um Themengrafiken (Scrollbar -Symbole usw.) für einen bestimmten Abschnitt der Seite zu aktualisieren. Wird von der Demo verwendet, um Variationen anzuzeigen.
Gibt CSS -Eigenschaften zurück, die die renderierten Themengrafiken darstellen.
element . style . setProperty ( '--scrollbar-size' , '30px' ) ;
applyCSSProperties ( renderThemeGraphics ( getComputedStyle ( element ) ) , { element } ) ; makeThemeCSSFile(cssProperties)Exportiert eine CSS -Datei für ein Thema. Angenommen, dass die Themengrafiken bereits gerendert sind. Enthält einen Kommentar "generierter Datei".
makeBlackToInsetFilter()Initialisiert ein SVG -Filter, mit dem Symbole deaktiviert erscheinen können. Es funktioniert möglicherweise nicht mit allen Symbolen, da es die schwarzen Teile des Bildes verwendet, um eine Form zu bilden.
Verwendung von CSS:
button : disabled . icon {
filter : saturate ( 0 % ) opacity ( 50 % ); /* fallback until SVG filter is initialized */
filter : url ( "#os-gui-black-to-inset-filter" );
}In der MIT -Lizenz lizenziert, siehe Lizenz für Einzelheiten.
Installieren Sie node.js, wenn Sie es noch nicht haben.
Klonen Sie das Repository, dann im Projektverzeichnis npm i um die Abhängigkeiten zu installieren. Führen Sie auch npm i aus, wenn Sie Änderungen aus dem Repository anziehen, falls Änderungen an den Abhängigkeiten vorhanden sind.
Führen Sie npm start , um einen Entwicklungsserver zu öffnen. Es wird eine Demo -Seite in Ihrem Standardbrowser geöffnet. Änderungen an der Bibliothek werden automatisch neu kompiliert und die Seite wird automatisch neu geladen.
Führen Sie npm run lint , um Typ -Überprüfungs- und Zaubersprüche (und alle anderen Linkeraufgaben) auszuführen.
Führen Sie npm test aus, um die Tests auszuführen. Dies speichert auch Deckungsberichte in das coverage . Beachten Sie jedoch, dass der Code nur von Unit -Tests aufgezeichnet wird, dh Code direkt in die Tests importiert und nicht im Seitenkontext geladen wird, da dies eine weitere Einrichtung für Instrumente erfordert.
Es ist eine gute Idee, den Server beim Aktualisieren oder Installieren von Abhängigkeiten zu schließen. Andernfalls können Sie auf Eperm -Probleme stoßen.
Die Stile sind mit Postcss, für Mixins und andere Transformationen geschrieben.
Empfohlen: Installieren Sie ein POSTCSS -Sprach -Plugin für Ihren Editor, z. B. POSTCSS -Sprachunterstützung für VS -Code.
Derzeit gibt es einige CSS, die manuell im Browser regeneriert und in themenspezifische CSS-Dateien kopiert werden müssen.
In Zukunft könnte dies mit einem benutzerdefinierten POSTCSS-Syntax-Parser für .theme/.TheMePack-Dateien und möglicherweise anstelle von Raster-Grafiken durchgeführt werden, um node-canvas zu vermeiden (native Abhängigkeiten sind ein Schmerz). Oder vielleicht upng.js und einfache Pixelmanipulation.