jQuery UI Design-Themes

Dateistruktur

Themes sind auf eine bestimmte Weise organisiert, um ihre Benutzerfreundlichkeit zu erhöhen. Typischerweise sieht die Dateiverzeichnisstruktur wie folgt aus:

  • themename/– Ihr Theme muss vollständig in einem einzelnen Ordner enthalten sein, der nach dem Theme benannt ist.
  • themename/themename.css– Dies ist die grundlegende CSS-Datei. Unabhängig davon, welches Plugin verwendet wird, muss diese Datei auf jeder Seite referenziert werden, die das Theme verwendet. Diese Datei sollte leichtgewichtig sein und nur das Wesentliche enthalten.
  • themename/themename.pluginname.css– Jedes Plugin, das Sie unterstützen, erfordert eine CSS-Datei. Der Plugin-Name sollte direkt in den Dateinamen aufgenommen werden. Wenn Sie beispielsweise das Tabs-Plugin mit einem Theme versehen, hätten Sie:themename.tabs.js。
  • themename/img.png– Ihr Theme kann Bilder enthalten. Sie können nach Belieben benannt werden; es gibt hier keine speziellen Namenskonventionen.

Um ein Beispiel dafür zu sehen, wie die Theme-Dateistruktur implementiert ist, besuchen SiejQuery UI Basic Theme。

Stile definieren

Stile für ein Theme zu schreiben, ist dank der Flexibilität des Themes sehr einfach.

Alle Themes sollten eine grundlegende CSS-Klasse haben. Diese Hauptklasse ermöglicht es Benutzern, das Theme zu aktivieren oder zu deaktivieren. Ihre Root-Klasse sollte das folgende Format haben:.ui-themename. Und seine Verwendung in einer HTML-Datei ist wie unten gezeigt:

<html>
<head>
    <title>My Site</title>
    <link rel="stylesheet" href="themename/themename.css.html" />
    <link rel="stylesheet" href="othertheme/othertheme.css.html" />
    <link rel="stylesheet" href="othertheme/othertheme.dialog.css.html" />
</head>
<body class="ui-themename">
    <div class="ui-othertheme">
        <div class="ui-dialog">This is a modal dialog.</div>
    </div>
</body>
</html>

Im obigen Beispiel passieren einige wichtige Dinge:

  • Wir laden beide Themes gleichzeitig in das Dokument.
  • Die gesamte Seite und ihr gesamter Inhalt werden entsprechend den Stilen von themename gestaltet.
  • Allerdings werden das Element mit der Klasse ui-othertheme<div>und jedes darin enthaltene Element (einschließlich modaler Dialoge) entsprechend den Stilen von othertheme gestaltet.

Wenn wir den öffnenthemename.cssWenn wir einen Blick in die Datei werfen, können wir den folgenden Code sehen:

body.ui-themename { background:#111; color:snow; }
.ui-themename a, a.ui-themename { color:#68D; outline:none; }
.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }

Bitte beachten Sie,themename.cssDie Datei enthält nur globale allgemeine Stilinformationen. Plugin-spezifische Stile werden hier nicht definiert. Die hier aufgeführten Stile gelten für alle Themes. Machen Sie sich keine Sorgen, wenn ein Theme mehrere Dateien umfasst – dies wird während des Erstellungs- und Downloadprozesses vereinfacht.

Andere Erweiterungen