Question Comment appliquer le thème CSS à un élément spécifique de jQuery-UI?


J'ai déjà créé un site Web avec mon propre thème CSS. J'utilise le widget "tabs" de l'interface utilisateur de jQuery mais pas le CSS de l'interface utilisateur de jQuery.

J'essaie maintenant d'ajouter le widget "Date Picker" dans l'une de mes pages. Ce serait génial si je pouvais réutiliser le thème par défaut de jQuery-UI, ce qui est très bien.

Le problème est que le thème du sélecteur de date est également appliqué à mes onglets CSS. Par exemple, les propriétés css "ui-widget" sont appliquées aux éléments du sélecteur de date et des onglets.

Je n'arrive pas à trouver un moyen d'appliquer les propriétés css uniquement au sélecteur de date. Je ne peux pas voir un "super sélecteur" qui ne concerne que le sélecteur de date DIV.

Quelle serait la meilleure façon de gérer cela?


[MODIFIER] le sélecteur de date Le widget est vraiment le problème. Je ne peux pas appliquer le style CSS qui lui est spécifique. Voici le code de départ du DIV qui apparaît:

<div style="position: absolute; top: 300.4px; left: 149px; display: block;" id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">

En tant que tel, je ne peux pas ajouter un super sélecteur. Ce qui serait génial serait que le widget de sélection de date prenne en charge Portée CSS. Mais ce n'est pas le cas. Je suis bloqué manuellement en modifiant le fichier CSS jQuery.

Le sélecteur de date est actuellement en cours refactorisé. Espérons que le nouveau code abordera ce problème.


12
2018-05-01 14:18


origine


Réponses:


$(window).load(function() {
   $('#ui-datepicker-div').addClass('CSS-Scope-Class');
});

le .addClass () La fonction jQuery ajoute la classe nécessaire au pointeur de date pour qu’elle soit captée par la feuille de style à thème.

J'ai dû attacher à l'événement de chargement de la fenêtre plutôt que l'événement prêt du document car le pointeur de date n'avait pas encore été inséré.

Note: Il y aura un petit délai entre le moment où le datepicker est ajouté au DOM et la nouvelle classe appliquée, ce qui signifie que le coupeur de date peut ne pas apparaître pendant le chargement de la page.


8
2018-04-19 18:43



Vous pouvez personnaliser votre thème avec le rouleau de thème ici http://jqueryui.com/themeroller/

Trouvez l'élément que vous voulez styliser avec la fonctionnalité DOM d'inspecter de Firebug pour cibler la classe que vous souhaitez sélectionner.


4
2018-05-01 14:23



J'ai eu le même problème avec le datepicker et l'accordéon. Je voulais le nouveau style du Datepicker mais je ne le voulais pas pour l'accordéon. J'ai pris la solution facile, j'ai copié les parties pertinentes de ui.theme.css et ajouté .ui-datepicker devant tous les styles. Cela cible uniquement le datepicker et laisse tous les autres plug-ins d'interface utilisateur seuls.

Je ne suis pas sûr si c'était le meilleur moyen mais cela a fonctionné pour mes objectifs.


1
2018-05-01 14:45



Je pourrais manquer quelque chose, mais ne pourriez-vous pas simplement ajouter une classe à votre objet sélecteur de date et sélectionner celui-là?


1
2018-05-01 15:21



Essayer: $('#cmsContent').css('margin', '0');


1
2018-05-11 09:39



Le simple fait d'ajouter une classe css au div de datepicker ne fonctionnait pas pour moi, je devais créer une autre division comme ça:

$("#ui-datepicker-div").wrap('<div class="CSS-Scope-Class" />');

1
2017-09-05 08:05



Cela fonctionne pour moi

$("#ui-datepicker-div").wrap("<div class='Your-CSS-Scope-Class'></div>");

0
2017-12-15 15:37