Comprendre jQuery UI dans Magento 2 / Blogs / Perficient

jQuery n’est rien d’autre qu’une bibliothèque JavaScript qui aide à manipuler le contenu, la gestion des événements, l’ajax et la traversée du document. jQuery UI étend la fonctionnalité jQuery avec un ensemble d’options pour améliorer l’interface utilisateur, en ajoutant des effets, des thèmes et des widgets.

Si vous souhaitez savoir ce qu’est jQuery et ses avantages plus en détail. Cliquez ici

Le code suivant montre comment utiliser jQuery avec un script.

Nous pouvons demander les éléments de la bibliothèque jQuery UI.

1. Nous pouvons utiliser une configuration data-mage-init comme le code ci-dessous :

L’attribut data-mage-init est utilisé pour cibler un élément HTML spécifique. Il est couramment utilisé pour les widgets jQuery UI.

2. Nous pouvons également configurer le type de script suivant – text/x-magento-init :

Cette méthode est utilisée pour cibler un sélecteur CSS. Vous pouvez utiliser cette méthode depuis n’importe où dans la base de code pour cibler n’importe quel élément HTML.

3. Nous pouvons utiliser ce script simple :

Cette méthode est connue sous le nom de notation impérative. Ceci est utilisé pour inclure du JavaScript brut dans les pages afin d’exécuter la logique. Grâce à ce code ci-dessus $(« #myDiv »).tabs(); nous utilisons les onglets du plugin jQuery.

Interface utilisateur jQuery dans Magento 2.3.3

Lien officiel : https://devdocs.magento.com/guides/v2.3/release-notes/release-notes-2-3-3-open-source.html

La bibliothèque jQuery UI a été repensée dans Magento 2.3.3. jQuery UI a été divisé en widgets séparés qui ne peuvent être chargés par ses modules principaux que lorsqu’ils sont nécessaires. Il est utilisé pour améliorer les performances des fonctionnalités du magasin.

Cela signifie que vous devez supprimer « jquery/ui » dépendance. Sinon, vous verrez un avertissement comme :

« Retour à JQueryUI Compat activé. Il manque à votre boutique une dépendance pour un widget jQueryUI. Identifier et traiter la dépendance améliorera considérablement les performances de votre site.

Voici un exemple du script correct pour Magento 2.3.3 :

Dans la version 2.3.3, Magento a refactorisé jQuery/ui pour séparer les widgets. Ici, nous importons le module jquery-ui individuellement.