Comment appliquer un thème CSS uniquement à un élément jQuery-UI spécifique?
J'ai un site web déjà construire avec mon propre CSS du thème. Je suis à l'aide de jQuery UI "onglets" widget mais pas de CSS de jQuery-UI.
Maintenant, je suis en train d'ajouter la "Date Picker" widget dans une de mes page. Ce serait génial si je pouvais réutiliser jQuery-UI thème par défaut qui est tout simplement parfait.
Le problème est que la date de sélecteur de thème est également appliqué à mes onglets CSS. Par exemple, le "ui-widget" propriétés css est appliqué à la fois le sélecteur de date et d'onglets éléments.
Je n'arrive pas à trouver un moyen d'appliquer les propriétés css pour seulement le sélecteur de date. Je ne peux pas voir un "super sélecteur" qui s'applique uniquement à la date du sélecteur DIV.
Quelle serait la meilleure façon de gérer cela?
[MODIFIER]
Le datepicker widget est vraiment le problème. Je ne peux pas appliquer le style CSS spécifique. Voici le code de départ de la DIV que reçois pop-up:
<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 bien serait que le sélecteur de date widget prend en charge CSS portée. Mais il ne le fait pas. Je suis coincé en éditant manuellement le fichier CSS jQuery.
Le Sélecteur de Date n'est actuellement en cours de refactorisation. J'espère que le nouveau code de régler cette question.
source d'informationauteur Thierry-Dimitri Roy
Vous devez vous connecter pour publier un commentaire.
La .addClass() fonction jQuery va ajouter le nécessaire en classe pour le datepicker pour qu'il soit repris par le thème de la feuille de style.
J'ai dû l'attacher à la fenêtre de chargement de l'événement plutôt que le document est prêt, à cause du datepicker n'avait pas été inséré.
Remarque: Il y aura un petit délai entre le moment où le datepicker est ajouté au DOM et de la nouvelle classe appliquée, ce qui signifie que le datepicker peut apparaître non stylé pendant que la page est à la fin du chargement.
Vous pouvez personnaliser votre thème avec le thème rouleau ici http://jqueryui.com/themeroller/
Trouver l'élément que vous voulez de style avec de Firebug inspecter DOM fonctionnalité pour cible la classe que vous souhaitez sélectionner.
J'ai eu le même problème avec le datepicker et de l'accordéon. Je voulais que le nouveau style de la datepicker, mais ne veulent pas pour l'accordéon. J'ai pris le chemin le plus facile, j'ai copié les parties pertinentes de l'interface utilisateur.thème.css et ajouté .ui-datepicker en face de tous les styles. L'objectif est juste le datepicker et laisse tous les autres plug-ins d'unité seule.
Je ne suis pas sûr si c'était le meilleur moyen, mais cela a fonctionné pour mes fins.
J'ai peut être raté quelque chose mais ne pourriez-vous ajouter une classe à votre sélecteur de date objet et sélectionnez sur qui?
Essayer:
$('#cmsContent').css('margin', '0');
Simplement l'ajout d'une classe css pour le datepicker div ne fonctionne pas pour moi, j'ai dû créer un autre div autour d'elle de la sorte:
Cela fonctionne pour moi