Thème de conception de l'interface utilisateur jQuery


Structure des fichiers

Les thèmes sont conçus de manière spécifique pour augmenter leur facilité d'utilisation. En règle générale, la structure des répertoires de fichiers ressemble à ceci :

  • themename/ – Votre thème doit être entièrement contenu dans un dossier distinct nommé d'après le thème.

  • themename/themename.css – Il s'agit d'un fichier CSS de base. Quel que soit le plugin utilisé, ce fichier doit être référencé dans chaque page où le thème est utilisé. Le document 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 inclus directement dans le nom du fichier. Par exemple, si vous créez un thème pour un plugin d'onglets, vous auriez : themename.tabs.js.

  • themename/img.png – Votre thème peut contenir des images. Ils peuvent être nommés comme bon vous semble, il n’y a pas de convention de dénomination spécifique.

Pour un exemple de la façon dont la structure des fichiers de thème est effectuée, visitez Thèmes de base de jQuery UI.

Définir des styles

L'écriture de styles pour un thème est très simple en raison de la flexibilité du thème.

Tous les thèmes doivent avoir une classe CSS de base. Cette classe principale permet aux utilisateurs d'activer et de désactiver des thèmes. Votre classe racine doit être au format .ui-themename. Et son utilisation dans les fichiers HTML ressemble à ceci : 

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

Dans l'exemple ci-dessus, quelque chose d'important se produit :

  • Nous chargeons dans le document en même temps deux thèmes.

  • Tout le contenu de la page entière est thématique selon le style du nom du thème.

  • Cependant, <div> avec la classe ui-othertheme et chaque élément qu'elle contient (y compris les boîtes de dialogue modales) a un thème en fonction des styles d'autres thèmes.

Si nous ouvrons le fichier themename.css pour le visualiser, 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 que le fichier themename.css ne comprend que les éléments communs à l'échelle mondiale. informations de style, les informations de style spécifiques au plugin ne sont pas définies ici. Les styles ici sont applicables à tous les thèmes. Ne vous inquiétez pas si un thème occupe plusieurs fichiers : ceux-ci seront simplifiés lors du processus de création et de téléchargement.