Maison > Article > interface Web > Un guide complet pour personnaliser les thèmes des widgets jQuery UI

Un guide complet pour personnaliser les thèmes des widgets jQuery UI

PHPzoriginal: 2023-08-31 20:49:01924parcourir

Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI est une bibliothèque de composants d'interface open source avec interactivité, effets d'animation et widgets prêts à l'emploi. Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI est basé sur la bibliothèque JavaScript Un guide complet pour personnaliser les thèmes des widgets jQuery UI et est thématique, ce qui permet aux développeurs de tout niveau de compétence d'intégrer facilement Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI dans leurs pages Web et applications.

Ce didacticiel vous montre comment créer un thème pour un widget Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI et écrire du CSS personnalisé afin que vous puissiez créer votre propre thème Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI. Une compréhension de base de CSS et JavaScript vous aidera à réussir ce didacticiel.

Utilisez la table des matières ci-dessous pour trouver la section du didacticiel qui vous intéresse.

REMARQUE AUX NON-MEMBRES : les liens vers l'annuaire ne fonctionneront que si vous êtes connecté à un compte de membre Tuts+ Premium.

Informations sur le didacticiel

À propos de ce tutoriel
Thème Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI
À propos de ThemeRoller
Theming Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI - Meilleures pratiques
Lien vers le site Web Un guide complet pour personnaliser les thèmes des widgets jQuery UI/Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI
Conclusion

Étapes du didacticiel

Étape 1 - Créer une page Web de base (sans contenu)
Étape 2 - Créer un fichier JS externe (sans contenu)
Étape 3 - Téléchargez Un guide complet pour personnaliser les thèmes des widgets jQuery UI et Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI
Étape 4 - Hébergement CDN Un guide complet pour personnaliser les thèmes des widgets jQuery UI et Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI
Étape 5 - Référencer Un guide complet pour personnaliser les thèmes des widgets jQuery UI et la bibliothèque Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI
Étape 6 - Sélectionnez le widget Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI
Étape 7 – Supprimer les bordures des poignées du curseur – Chrome et Safari
Étape 8 - Mise à niveau vers une version plus récente de Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI

Section Widget

interface utilisateur Un guide complet pour personnaliser les thèmes des widgets jQuery UI - Onglets
Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI - Accordéon
interface utilisateur Un guide complet pour personnaliser les thèmes des widgets jQuery UI - Boutons
Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI - Sélecteur de dates
Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI - Curseur
Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI - Barre de progression
Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI - Boîte de dialogue
Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI - Surbrillance/Erreur

Section d'icônes personnalisées

Remplacez les icônes par défaut de Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI par des icônes personnalisées
Icône personnalisée - Bouton Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI
Icône personnalisée – Sélecteur de date
Icône personnalisée – Bouton de dialogue
Icônes personnalisées - Surbrillance/Erreur
Icône personnalisée - Accordéon Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI #1
Icône personnalisée - Accordéon Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI #2
Icône personnalisée - Accordéon Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI #3
Icône personnalisée - Accordéon Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI #4

Référence de feuille de style CSS personnalisée

Référence de feuille de style CSS personnalisée - Introduction
Référence de feuille de style CSS personnalisée - Conteneur de composants
Référence de feuille de style CSS personnalisée - État interactif
Référence de feuille de style CSS personnalisée - Conseils interactifs
Référence de feuille de style CSS personnalisée - Icônes d'interface utilisateur par défaut
Référence de feuille de style CSS personnalisée - Widgets d'interface utilisateur Un guide complet pour personnaliser les thèmes des widgets jQuery UI spécifiques
Référence de feuille de style CSS personnalisée - Icônes personnalisées
Référence de feuille de style CSS personnalisée - Icônes personnalisées - Accordéon #1
Référence de feuille de style CSS personnalisée - Icônes personnalisées - Accordéon #2
Référence de feuille de style CSS personnalisée - Icônes personnalisées - Accordéon #3
Référence de feuille de style CSS personnalisée - Icônes personnalisées - Accordéon #4
Référence de feuille de style CSS personnalisée - Icône personnalisée - Bouton
Référence de feuille de style CSS personnalisée - Icône personnalisée - Sélecteur de date
Référence de feuille de style CSS personnalisée - Icônes personnalisées - Surbrillance/Erreur
Référence de feuille de style CSS personnalisée - Icône personnalisée - Bouton de dialogue

À propos de ce tutoriel

自定义 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 小部件主题的综合指南

Dans ce didacticiel, je souhaite montrer comment personnaliser et thématiser les widgets de l'interface utilisateur Un guide complet pour personnaliser les thèmes des widgets jQuery UI pour qu'ils correspondent à un style de conception spécifique. Les widgets de la démo source ont été conçus pour correspondre au style graphique du Nettuts+ Freelancing Board.

Le fichier zip du didacticiel comprend également des démos supplémentaires montrant les différentes options et paramètres des widgets Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI Un guide complet pour personnaliser les thèmes des widgets jQuery UI, Tabs, Datepicker et Slider.

Ce tutoriel contient une table des matières afin que vous puissiez retrouver rapidement les parties qui vous intéressent. Ce didacticiel fournit également de nombreux widgets d'interface utilisateur Un guide complet pour personnaliser les thèmes des widgets jQuery UI prêts à l'emploi, tels que Accordéon, Onglets, Boutons, Boîte de dialogue et Datepicker. Étant donné que ce didacticiel couvre plusieurs widgets Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI, vous pouvez choisir le widget pour lequel vous souhaitez créer un thème personnalisé.

Thème Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI

自定义 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 小部件主题的综合指南

Vous pouvez créer un thème pour les widgets et plugins de l'interface utilisateur Un guide complet pour personnaliser les thèmes des widgets jQuery UI de différentes manières :

Vous pouvez utiliser Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI ThemeRoller pour créer et télécharger des thèmes
Vous pouvez télécharger l'un des thèmes ThemeRoller par défaut et modifier le CSS
Vous pouvez créer votre propre thème à partir de zéro en écrivant du CSS entièrement personnalisé

Bien qu'il soit possible de créer un thème d'interface utilisateur Un guide complet pour personnaliser les thèmes des widgets jQuery UI en écrivant du CSS entièrement personnalisé, je trouve qu'il est plus facile et plus rapide de commencer avec le thème ThemeRoller par défaut qui est proche de l'apparence souhaitée, puis de modifier le CSS en fonction de vos besoins. En modifiant fortement le CSS du thème ThemeRoller par défaut, vous pouvez créer un thème personnalisé sans avoir à repartir complètement de zéro.

Je trouve plus facile et plus rapide de modifier la feuille de style CSS du thème ThemeRoller par défaut que d'écrire un thème CSS personnalisé à partir de zéro.

À propos de ThemeRoller

自定义 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 小部件主题的综合指南

ThemeRoller est une application Web conçue et développée par Filament Group, Inc. pour Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI. L'interface de l'application Themeroller est divisée en sections telles que titre/barre d'outils, contenu, état cliquable, etc. et vous permet de concevoir des widgets et plugins de thème CSS personnalisés de base pour l'interface utilisateur Un guide complet pour personnaliser les thèmes des widgets jQuery UI.

Si vous ne souhaitez pas concevoir votre propre thème d'interface utilisateur Un guide complet pour personnaliser les thèmes des widgets jQuery UI personnalisé, il existe également une bibliothèque de thèmes avec des thèmes pré-roll. Vous pouvez trouver plus d'informations sur l'application Web Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI ThemeRoller ici.

Theming Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI - Meilleures pratiques

En ce qui concerne les thèmes Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI, le site Web Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI répertorie quelques « bonnes pratiques » à suivre, notamment :

Toutes les classes doivent commencer par .ui-namespace
Tous les styles doivent être spécifiques à l'espace de noms .ui-
Ne créez pas de styles globaux
N'utilisez pas l'attribut ID pour définir les styles
Utilisez des traits d'union au lieu des traits de soulignement pour séparer les mots
Toujours utiliser des minuscules

Étape 1 - Créer une page Web de base (sans contenu)

Ce tutoriel est mis en place pour que vous puissiez choisir votre propre contenu pour votre page Web.

HTML

Créez un fichier .html contenant le code suivant :

 
<!doctype html> 
<html> 
<head> 
 
<meta charset="utf-8"> 
 
<!-- CSS stylesheets --> 
<link href="css/style.css" rel="stylesheet" media="screen" /> 
 
<!-- Un guide complet pour personnaliser les thèmes des widgets jQuery UI / JavaScript --> 
<script src="js/jquery-functions.js"></script> 
 
<meta name="description" content="This demo shows how Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI Controls look with a basic, custom CSS theme applied." /> 
<meta name="keywords" content="jquery,jquery ui,themeroller,widget,demo,tutorial" /> 
<title>Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI Custom Theme Demo - Custom CSS Theme</title> 
 
</head> 
<body> 
 
	<!-- Begin Wrapper --> 
	<div id="wrapper"> 
 
	<p> 
	Content will go here 
	</p> 
 
	</div> 
	<!-- End Wrapper --> 
 
</body> 
</html>

CSS

Créez une feuille de style CSS appelée "style.css" et ajoutez-la à un nouveau dossier appelé "css". Incluez le code suivant :

 
/*  Default Styles 
--------------------------------------------------- */ 
 
body { 
	margin: 0px; 
	padding: 0px; 
	background-color: #f2f2f2; 
	font-size: 18px;  
	font-family: Arial, Helvetica, sans-serif; 
	color: #000; 
	text-align: left; 
} 
 
#wrapper	{ 
	width: 965px; 
	margin: 0 auto;	 
} 
 
 
a:link, a:visited, a:active { 
	color: #009999; 
} 
 
a:hover { 
	color: #000; 
} 
 
.clear	{ 
	float: none; 
	clear: both; 
}

Étape 2 - Créer un fichier JS externe (sans contenu)

Le fichier JavaScript externe « jquery-functions.js » doit être créé et ajouté au dossier nommé « js ». Ce fichier JavaScript contiendra le code Un guide complet pour personnaliser les thèmes des widgets jQuery UI requis pour initialiser les différents widgets Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI. Ce didacticiel est configuré pour que vous puissiez choisir les widgets Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI à inclure dans votre page Web. Le code Un guide complet pour personnaliser les thèmes des widgets jQuery UI sera ajouté à ce fichier en fonction du widget Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI que vous avez sélectionné.

Étape 3 - Téléchargez Un guide complet pour personnaliser les thèmes des widgets jQuery UI et Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI

Téléchargez la dernière version de Un guide complet pour personnaliser les thèmes des widgets jQuery UI et copiez/téléchargez le fichier dans votre dossier JS. Téléchargez ensuite la dernière version de Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI et copiez/téléchargez le fichier jquery-ui .js dans votre dossier JS. Assurez-vous que le thème par défaut de ThemeRoller « UI dark » est sélectionné.

Dans ce tutoriel, le thème par défaut de ThemeRoller "UI dark" est utilisé. Cependant, lorsque vous créez votre propre thème CSS Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI personnalisé, rendez-vous sur la galerie Un guide complet pour personnaliser les thèmes des widgets jQuery UI Themeroller et choisissez un thème dont l'apparence et la convivialité conviennent le mieux à votre conception Web.

Étape 4 - Hébergement CDN Un guide complet pour personnaliser les thèmes des widgets jQuery UI et Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI

Dans ce didacticiel, Un guide complet pour personnaliser les thèmes des widgets jQuery UI et Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI sont auto-hébergés sur un serveur autonome plutôt que d'utiliser un CDN (Content Delivery Network).

Si vous souhaitez que Un guide complet pour personnaliser les thèmes des widgets jQuery UI et Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI soient hébergés par un CDN, vous pouvez trouver des liens vers des copies hébergées par CDN de Un guide complet pour personnaliser les thèmes des widgets jQuery UI et/ou Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI à plusieurs endroits :

Un guide complet pour personnaliser les thèmes des widgets jQuery UICDN
API de la bibliothèque Google
Réseau de diffusion de contenu Microsoft Ajax

Étape 5 - Référence Un guide complet pour personnaliser les thèmes des widgets jQuery UI et bibliothèque Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI

Nous devons nous assurer que la page Web fait référence à Un guide complet pour personnaliser les thèmes des widgets jQuery UI et à la bibliothèque Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI.

Entre les balises head de la page Web, directement en dessous Ajoutez le code suivant :

 
<link href="css/ui-darkness/jquery-ui-1.8.16.custom.css" rel="stylesheet" media="screen" /> 
 
<!-- Un guide complet pour personnaliser les thèmes des widgets jQuery UI / JavaScript --> 
<script src="js/jquery-1.6.4.min.js"></script> 
<script src="js/jquery-ui-1.8.16.custom.min.js"></script>

Étape 6 - Sélectionnez le widget Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI

Maintenant que vous avez terminé les étapes un à cinq, vous pouvez commencer à ajouter des widgets Un guide complet pour personnaliser les thèmes des widgets jQuery UI à vos pages Web. Ce tutoriel explique comment créer un thème pour ces widgets Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI :

étiquettes
Accordéon
Bouton
Sélecteur de dates
Curseur
Barre de progression
Boîte de dialogue de l'interface utilisateur
Surbrillance/Erreur

Bien que les faits saillants/erreurs ne soient pas des widgets, ils ont été inclus dans le didacticiel pour montrer comment créer un thème pour ces éléments et remplacer les icônes d'interface utilisateur par défaut par des icônes personnalisées.

Étape 7 - Supprimer les bordures des poignées du curseur - Chrome et Safari

自定义 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 小部件主题的综合指南

在跨浏览器测试本教程的演示时，在 Google Chrome 和 Safari Web 浏览器中单击滑块手柄时会显示边框。 Google Chrome 显示黄色边框，Safari 显示浅蓝色边框。

要删除此边框，CSS 代码“outline: none;”已添加到 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI CSS 样式表中。在“jquery-ui-1.8.16.custom.css”文件中找到以下代码行：

 
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }

更改这行代码，使其包含“outline: none;”像这样：

 
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; outline: none; }

您的主题的滑块手柄代码行可能略有不同。找到包含“.ui-slider .ui-slider-handle {position:absolute;......”的行并添加“outline:none;”到该行代码的末尾。

第 8 步 - 升级到较新版本的 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI

如果您对默认 ThemeRoller 主题的 CSS 样式表进行了大量修改，或者从头开始创建了自定义 CSS 主题，则有必要为未来的 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 小部件和插件执行手动更新。

文件比较工具

为了手动更新 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI CSS，您将需要一个好的文件比较工具。我一直在用

Beyond Compare 已经很多年了，强烈推荐这个程序。尽管需要注意的是，Beyond Compare 不是免费软件，而是商业软件。

您可以在此处和此处找到推荐的免费软件和付费软件文件比较工具的列表。

手动更新

要升级您的自定义 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI CSS 主题，您需要执行以下操作：

备份您的自定义 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI CSS 主题文件
下载最新版本的 Un guide complet pour personnaliser les thèmes des widgets jQuery UI 并将文件复制/上传到您的 JS 文件夹。（如果您使用 CDN，请跳过此步骤）
更新网页上引用 Un guide complet pour personnaliser les thèmes des widgets jQuery UI 库的链接，使其具有最新版本号。示例：“js/jquery-1.6.3.min.js”将更改为“js/jquery-1.6.4.min.js”。
下载最新版本的 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 并将 jquery-ui .js 文件复制/上传到您的 JS 文件夹。确保选择最初修改为自定义主题的 themeroller 默认主题。
更新网页上引用 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 库的链接，使其具有最新版本号。示例：“js/jquery-ui-1.8.15.custom.min.js”将更改为“js/jquery-ui-1.8.16.custom.min.js”。
更改 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 自定义主题的 CSS 样式表的文件名，以便它反映最新版本的 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI。示例：“jquery-ui-1.8.15.custom.css”将更改为“jquery-ui-1.8.16.custom.css”
更新网页上引用 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI CSS 样式表的链接，使其反映如上所示的新文件名和版本。

逐行更新 CSS

自定义 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 小部件主题的综合指南

Beyond Compare 文件比较工具屏幕。左侧显示原始默认 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI CSS 样式表。右侧显示新修改的 CSS 样式表。单击图像可查看大图。

如果您对默认 ThemeRoller 主题的 CSS 样式表进行了大量修改，或者从头开始创建了自定义 CSS 主题，则必须手动逐行更新 CSS。

使用文件比较工具，将最新版本 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 的 CSS 样式表代码与 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 自定义主题的 CSS 样式表代码进行比较。仔细检查差异，查找新 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 版本样式表中因新 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 小部件、现有小部件更新等而发生的更改。忽略

由于创建自定义 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 主题而进行的代码更改而导致的差异。

在许多情况下，Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 主题样式表的唯一更改是版本号。如果是这种情况，只需将旧版本号的所有实例更改为新版本号，保存文件，上传即可完成。

如果最新版本的 Un guide complet pour personnaliser les thèmes des widgets jQuery UI UI 主题样式表包含自定义主题 CSS 中未包含的新 CSS 代码，请将这些代码行复制到您的样式表中，保存然后上传。