Comment télécharger la bibliothèque jQuery UI pour la programmation HTML5 et CSS3 - les nuls

L'écriture de code d'interface utilisateur jQuery n'est pas difficile, mais obtenir les bonnes parties de la bibliothèque peut être un peu déroutant pour les programmeurs HTML5 et CSS3. La bibliothèque de l'interface utilisateur jQuery est beaucoup plus grande que le paquetage jQuery standard, donc vous ne voudrez peut-être pas inclure tout le contenu si vous n'en avez pas besoin.

Les versions précédentes de jQuery UI vous permettaient de télécharger l'intégralité du paquet mais stocké chacun des différents éléments dans un fichier JavaScript séparé. Il était courant d'avoir une demi-douzaine de tags de script différents actifs juste pour obtenir les différents éléments en place.

Pire, certains problèmes de dépendance existaient, vous avez donc dû vous assurer que certains paquets étaient installés avant d'utiliser d'autres paquets. Cela a rendu une bibliothèque simple assez complexe à utiliser.

Heureusement, les dernières versions de l'interface utilisateur jQuery simplifient ce processus:

1. Choisissez (ou créez) votre thème.

   Utilisez le site themeRoller pour choisir un emplacement de départ à partir de la bibliothèque de modèles. Vous pouvez ensuite personnaliser votre thème exactement pour faire ce que vous voulez (changer les couleurs, les polices et autres éléments).

2. Téléchargez le thème.

   Le themeRoller a un bouton de téléchargement. Cliquez dessus lorsque vous êtes prêt à télécharger votre thème.

3. Choisissez les éléments que vous voulez.

   Lorsque vous commencez un projet, vous choisissez probablement tous les éléments. Si vous trouvez que la page se charge trop lentement, vous pouvez créer une version plus petite contenant uniquement les éléments dont vous avez besoin. Pour l'instant, choisissez tout.

4. Téléchargez le fichier.

   Après avoir choisi les éléments que vous voulez, vous pouvez les télécharger dans un fichier zip.

5. Installez le contenu du fichier zip dans votre répertoire de travail.

   Le fichier zip contient un certain nombre de fichiers et de répertoires. Copiez les répertoires css et js dans le répertoire où seront vos pages web (souvent le répertoire public_html ou htdocs). Vous n'avez pas besoin de copier le répertoire development-bundle ou l'index. page html.

6. Si vous installez plusieurs thèmes, copiez uniquement les informations de thème à partir de thèmes supplémentaires.

   Tous les thèmes utilisent le même JavaScript. Seul le CSS (et les fichiers image associés) change. Si vous voulez avoir plusieurs thèmes dans votre projet, copiez simplement le contenu CSS. Chaque thème sera un sous-répertoire différent du répertoire CSS principal.

7. Lien vers les fichiers CSS.

   Utilisez la technique du lien standard pour créer un lien vers les fichiers CSS créés par l'interface utilisateur jQuery. Vous pouvez également créer un lien vers vos propres fichiers CSS ou utiliser des feuilles de style CSS internes en plus des feuilles de style CSS personnalisées. Assurez-vous que vous avez le bon chemin.

8. Lien vers les fichiers JavaScript.

   La boîte à outils jQuery UI installe également deux fichiers JavaScript: la bibliothèque standard jQuery et la bibliothèque jQuery UI. Par défaut, ces deux fichiers sont installés dans le répertoire js. Vous devrez créer un lien vers les deux fichiers. Parfois, vous verrez des fichiers minimisés à côté des versions ordinaires. La version minimisée aura le terme min incorporé. L'une ou l'autre version est correcte, mais la version réduite se chargera plus rapidement.

Si quelque chose ne fonctionne pas correctement, vérifiez à nouveau vos chemins de fichier. Presque toujours, des problèmes surviennent parce que vous n'avez pas lié à tous les bons fichiers. Notez également que les fichiers CSS créés par jQuery UI incluent également des images. Assurez-vous que votre thème possède un répertoire d'images associé, sinon votre projet risque de ne pas fonctionner correctement. Si vous avez copié l'intégralité des répertoires CSS et JS à partir du téléchargement, cela devrait fonctionner.