Onglets de l'interface utilisateur JQuery - Comment empêcher l'application de styles au contenu des onglets?

Je l'ai mis en œuvre les onglets de l'interface utilisateur JQuery et ils fonctionnent très bien, sauf pour un problème ...Onglets de l'interface utilisateur JQuery - Comment empêcher l'application de styles au contenu des onglets?

Tous les styles/classes de mon contenu sont en cours par outrepassée JQuery ce que je ne veux pas happen.For exemple, je une zone de texte:

<input type="text" id="profileFirstName" name="profileFirstName" class="textMedium" />

Si j'inspecte les styles dans Firebug, je vois cela (dans cet ordre):

.ui-widget :active { 
outline:medium none; 
} 

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { 
font-family:Verdana,Arial,sans-serif; 
font-size:1em; 
} 

input.textMedium { 
width:200px; 
}

Comme vous pouvez le voir, JQuery a ajouté les styles ui-widget avant mon propre, remplaçant ainsi le mien.

Il le fait partout où j'ai mis en place les onglets. Comment puis-je le définir GLOBALEMENT pour que ses styles ne remplacent pas le mien? Je ne veux aucun des styles de jquery affectant le contenu à onglets. Je suppose que je pourrais remplacer leurs styles ui-widget et ne rien mettre sous les définitions? Mais je voudrais savoir s'il y a une manière plus propre de sorte que leurs styles de ui-widget ne soient pas appliqués du tout.

Merci d'avance!

Source

2010-09-21 Cheeky

utilisez ! important dans vos styles. cela indique que rien d'autre n'est censé remplacer vos styles.

Cochez cette case link pour plus de détails.

Source

2010-09-21 05:33:54

Merci Vinay. J'essaie d'éviter cela car il y a beaucoup de contenu avec beaucoup de styles et de classes différentes dans le contenu de l'onglet et ne veulent pas avoir à changer chaque style pour accommoder les onglets. Merci pour l'article sur! Important cependant - J'ai toujours pensé que c'était un hack qui empêchait les styles d'être surchargé, mais je vois maintenant que c'est en fait une partie de css. – Cheeky

Je ne crois pas utiliser! Important est une bonne solution à cela. Considérez votre style de police de corps. Si vous définissez! Important sur la police de votre corps, vous perdez votre capacité à remplacer cette police ailleurs. Personnellement, je pense que votre meilleur pari est de supprimer dynamiquement les noms de classe de jQuery, et re-style les parties manquantes. –

Vous pouvez placer votre contenu d'onglet dans iframe et ajouter un style différent avec une balise de style dans la tête du contenu iframe.

Source

2010-09-21 07:08:45 jcubic

vous pouvez utiliser removeClass() pour supprimer les valeurs de classe, mais le widget peut ne pas fonctionner si vous le faites.

exemple:

$('.myitem').removeClass('ui-widget');

Je vous suggère d'ajouter de nouvelles valeurs de la classe en utilisant addClass() pour overide les styles

exemple:

$('.myitem').addClass('newClass');

ou cible l'élément (s)

$('p').addCLass('newClass');

et d'appeler la fonction à la fin de votre déclaration de widget.

$(document).ready(function() { 

    $("#MyItem").draggable(); 
    //here 
    $("#MyItem").addClass("newClass"); 

});

Source

2010-09-21 09:57:24 Zebra

Salut - merci mais comme déjà mentionné, il y a beaucoup d'entrées chacune avec différentes classes. Ce n'est pas pratique de le faire de cette façon. Comme mentionné, je pourrais le faire en remplaçant les styles ui-widget. Cela prendrait une quantité minimale de codage et de travail pour toutes les implémentations des onglets jquery à travers le site. Cependant, je suis certain qu'il pourrait y avoir un moyen plus efficace ou «officiel» d'empêcher cela. – Cheeky

J'ai eu le même problème et résolu à l'aide .removeClass comme dany suggéré:

$("#menu").tabs(); 
$("#menu, #menu *").removeClass(function(index, class) { 
    // I want to keep these classes because I style them myself, 
    // so remove them from the string of classes 
    class = class.replace(/ui-tabs-nav|ui-state-active|ui-tabs-hide/,''); 
    // Create array of remaining classes that begin with "ui-" 
    var matches = class.match(/ui-\S+/g) || []; 
    // return classes as space-delimited list 
    return (matches.join(' ')); 
});

h/t à @fancyPT pour son exemple de suppression de classe générique sur la page .removeClass.

Source

2011-03-22 18:23:19

Vous n'avez pas besoin d'inclure de CSS pour les onglets. Il suffit de mettre une ligne css: .ui-tabs-hide { display:none; } et cela va fonctionner.

Source

2011-07-07 15:57:58 Adina

Je sais que un an plus tard, mais je trouve que cette section du fichier UI.css était le principal coupable de propagation de style:

/* Component containers 
----------------------------------*/ 
.ui-widget { /*font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; */} 
.ui-widget .ui-widget { font-size: 1em; } 
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {/* font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em;*/ } 
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; } 
.ui-widget-content a { color: #333333; } 
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; } 
.ui-widget-header a { color: #ffffff; }

Commentant dehors résoudra la plupart des problèmes (bien, jusqu'à ce que vous mettiez à jour l'interface utilisateur à nouveau).

Source

2011-09-07 18:41:15

Onglets de l'interface utilisateur JQuery - Comment empêcher l'application de styles au contenu des onglets?

Répondre

Questions connexes