Latest web development tutorials

jQuery UI Design-Thema

Dateistruktur

Thema ist eine bestimmte Art und Weise ihre Benutzerfreundlichkeit zu erhöhen. Typischerweise ist die Dateiverzeichnisstruktur wie folgt:

  • themename/ - Ihr Thema vollständig in einem eigenen Themennamen enthalten sein müssen benannten Ordner.
  • themename/themename.css - Dies ist eine grundlegende CSS - Datei. Unabhängig davon, welche Plug-Ins, muss die Datei in jeder der Seiten verwiesen werden Themen verwenden. Die Datei leicht sein sollte, enthält nur die wichtigsten Punkte.
  • themename/themename.pluginname.css - jedes Widget Sie unterstützen eine CSS - Datei erfordert. Name des Plugins direkt im Dateinamen enthalten sein sollten. Zum Beispiel, wenn Sie von Tabs (Reiter) Thematisierung Plug-in gibt es: themename.tabs.js .
  • themename/img.png - Ihr Thema können Bilder enthalten. Sie können nach Ihren Wünschen genannt werden, gibt es keine spezifische Namenskonvention.

Um zu erfahren , wie das Thema Dateistruktur Instanzen abgeschlossen ist , besuchen Sie die jQuery UI Grundthema .

Custom Style

Schreiben Sie das Thema Stil ist sehr einfach, ist es aufgrund der Flexibilität Thema.

Alle Themen sollten eine grundlegende CSS-Klasse haben. Das Hauptthema Klasse ermöglicht es dem Benutzer deaktiviert zu ermöglichen. Ihr Wurzelklasse - Format sollte .ui-themename . Und es in einer HTML-Datei wie folgt verwenden: 

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

In dem obigen Beispiel, einige wichtige Dinge geschehen:

  • Wir laden auch zwei Themen in das Dokument.
  • Alle Maschinen gesamten Seiteninhalt, wird in Übereinstimmung mit dem Thema THEME Arten durchgeführt.
  • Doch mit ui-othertheme Klasse von <div> und jedes Element (einschließlich modalen Dialogfelder) werden in Übereinstimmung mit dem Thema othertheme Arten durchgeführt.

Wenn wir öffnen themename.css Datei zum Betrachten, 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.css enthält Datei nur universelle globale Stilinformationen, Stilinformationen für ein bestimmtes Widget ist hier nicht definiert werden. Hier ist der Stil aller Themen gelten. Sorgen Sie sich nicht zu einem Thema mehrere Dateien beschäftigen wird - diese werden in den Prozess der Erstellung und das Herunterladen vereinfacht werden.