Latest web development tutorials

thème de conception jQuery UI

Structure du fichier

Le thème est une manière spécifique pour accroître leur facilité d'utilisation. En règle générale, la structure de répertoire de fichier est le suivant:

  • themename/ - votre sujet doit être entièrement contenu dans un nom de sujet distinct nommé dossier.
  • themename/themename.css - Ceci est un fichier de base de CSS. Quelle que soit les plug-ins, le fichier doit être référencé dans chacune des pages en utilisant des thèmes. Le fichier doit être léger, ne comprend que les principaux points.
  • themename/themename.pluginname.css - Chaque widget vous prise en charge requiert un fichier CSS. Nom du plugin devrait être directement inclus dans le nom du fichier. Par exemple, si vous thématisation des onglets (onglet) plug-in, il y a: themename.tabs.js .
  • themename/img.png - Votre thème peut contenir des images. Ils peuvent être nommés en fonction de votre préférence, il n'y a pas de convention de nommage spécifique.

Pour savoir comment la structure de fichier de thème est terminé cas, visitez le thème de base jQuery UI .

Custom Style

Ecrire le style de thème est très simple, il est en raison du thème de la flexibilité.

Tous les sujets doivent avoir une classe CSS de base. La classe principale de sujet permet à l'utilisateur d'activer désactivé. Votre format de classe racine doit être .ui-themename . Et l'utiliser dans un fichier HTML comme suit: 

<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, certaines choses importantes se sont produites:

  • Nous chargeons également deux thèmes au document.
  • Toutes les machines tout le contenu de la page, est effectuée en conformité avec le thème de THEMENAME styles.
  • Cependant, avec ui-othertheme classe de <div> et chaque élément (y compris les boîtes de dialogue modales) sont effectuées en conformité avec le thème de styles othertheme.

Si nous ouvrons themename.css fichier pour la visualisation, 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; }

S'il vous plaît noter, themename.css fichier ne contient que des informations de style universel et mondial, des informations de style pour un widget particulier est pas ici à définir. Ici, le style de tous les sujets sont applicables. Ne vous inquiétez pas sur un sujet occupera plusieurs fichiers - ceux-ci seront simplifiées dans le processus de création et le téléchargement.