Jquery plugin accordéon

Question

Je suis un plugin accordéon Jquery. Je dois utiliser mes propres icônes d'en-tête, selon doc, j'ai besoin de créer classe css avec l'image de fond. J'ai donc fait cela dans mon fichier CSS.

.normal_arrow { 
    background : url(../images/arrowonly.jpg); 
} 

.circle_arrow { 
    background : url(../images/circle_arrow.jpg); 
} 

.circle_arrow_down { 
    background : url(../images/circle_arrow_down.jpg); 
} 

puis en javascript:

$("#accordion").accordion({ 
    header: "h3", 
    clearStyle: true, 
    autoHeight: false, 
    icons: { 
     header: "normal_arrow", 
     headerSelected: "circle_arrow_down"    
    } 
}); 

mais il n'y a pas de flèches se sont présentés.

Answer 1

Votre code semble correct.

Essayez d'utiliser background-image: au lieu de background:

utiliser un outil comme Firebug à faire absolument que les parents des chemins vont là où vous pensez qu'ils vont.

Answer 2

Dans le CSS utiliser background-image et dans le JavaScript, vous devez mettre en-tête et headerSelected entre guillemets.

Answer 3

Utilisation incorrecte de l'arrière-plan. Pour que ce soit probablement utiliser render

background-image: url(../images/circle_arrow.jpg); 

ou

background: transparent url(../images/circle_arrow.jpg) top left no-repeat; 

Answer 4

Utilisation !important:

.normal_arrow { 
    background : url(../images/arrowonly.jpg) !important; 
} 

parce que vous devez remplacer le style par défaut.

Answer 5

Même problème, j'ai dû utiliser la position: absolue; pour faire le conteneur d'icônes prendre une largeur et une hauteur.

.normal_arrow { 
    background : url(../images/arrowonly.jpg); 
    position: absolute; 
    width: 10px; 
    height: 10px 
} 

Answer 6

REMARQUE: ce est uniquement pour les utilisateurs qui n'utilisent pas tout style jquery. (ie) vous n'avez pas inclus le CSS de jquery dans le fichier.

le style par défaut dans le CSS est la suivante:

.ui-icon { display: none; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 

Donc, si vous configurez un div avec une image d'arrière-plan, la largeur et la hauteur, mais il ne sera pas encore apparaître, sa raison de ce qui précède classe.

Ajouter à votre document:

<style type="text/css"> 
.ui-icon { display: block; } 

</style>