jQuery UI Thèmes de design

Structure des fichiers

Les thèmes sont organisés d'une manière spécifique pour accroître leur facilité d'utilisation. Typiquement, la structure des répertoires de fichiers est la suivante :

  • themename/– Votre thème doit être entièrement contenu dans un seul dossier nommé d'après le thème.
  • themename/themename.css– Il s'agit du fichier CSS de base. Quel que soit le plugin utilisé, ce fichier doit être référencé sur chaque page qui utilise le thème. Ce fichier doit être léger et inclure uniquement l'essentiel.
  • themename/themename.pluginname.css– Chaque plugin que vous prenez en charge nécessite un fichier CSS. Le nom du plugin doit être directement inclus dans le nom du fichier. Par exemple, si vous créez un thème pour le plugin tabs, vous auriez :themename.tabs.js。
  • themename/img.png– Votre thème peut contenir des images. Vous pouvez les nommer comme vous le souhaitez ; il n'y a pas de convention de nommage spécifique ici.

Pour voir un exemple de la façon dont la structure du fichier de thème est implémentée, visitezjQuery UI Basic Theme。

Définition des styles

Écrire des styles pour un thème est très simple, grâce à la flexibilité du thème.

Tous les thèmes doivent avoir une classe CSS de base. Cette classe principale permet aux utilisateurs d'activer ou de désactiver le thème. Votre classe racine doit être au format :.ui-themename. Et son utilisation dans un fichier HTML est comme indiqué ci-dessous :

<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>

Dans l'exemple ci-dessus, certaines choses importantes se produisent :

  • Nous chargeons les deux thèmes dans le document en même temps.
  • La page entière et tout son contenu sont thématisés selon les styles de themename.
  • Cependant, l'élément avec la classe ui-othertheme<div>et chaque élément à l'intérieur de celui-ci (y compris les boîtes de dialogue modales) est thématisé selon les styles de othertheme.

Si nous ouvrons lethemename.cssfichier à examiner, nous pouvons voir le code suivant :

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; }

Veuillez noter,themename.cssLe fichier ne contient que des informations de style communes globales. Les styles spécifiques aux plugins ne sont pas définis ici. Les styles ici s'appliquent à tous les thèmes. Ne vous inquiétez pas qu'un thème occupe plusieurs fichiers - ceci est simplifié pendant le processus de création et de téléchargement.

Autres extensions