web-dev-qa-db-fra.com

jQuery datepicker boutons prev et next ne montrant pas, comment pointer sur les images de dossier de thème en css

J'ai utilisé datepicker de jQuery ui pour ajouter avec succès un contrôle de calendrier à ma zone de texte, mais les boutons précédent et suivant ne sont pas visibles, bien que la balise contenant fonctionne de manière fonctionnelle lorsque vous cliquez sur

Comment puis-je modifier cela pour afficher les icônes montrées sur le http://jqueryui.com/datepicker/ lorsque ces images se trouvent dans mon package Web à l'adresse ..\Content\theme\base\images et non le endroits indiqués ci-dessous

.ui-widget-content .ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);
}

Dois-je appeler l'image dans CSS de la même manière que celle utilisée pour appeler des images dans mon code c #? Un péché:

"@Url.Content("~/Content/theme/base/images/ui-icons_222222_256x240.png")"
javascriptjqueryjquery-uidatepicker
19
Jay

Assurez-vous que votre jquery-ui.min.css pointe vers le fichier correct pour les images. La console devrait afficher une erreur lorsque vous essayez de charger les icônes.

Par exemple, s'il s'agit de l'emplacement de votre fichier CSS: http://example.com/css/jquery-ui.min.css, le fichier d'icône doit être au format http://example.com/css/images/ui-icons_222222_256x240.png. Le lien dans le fichier CSS est relatif au fichier CSS, pas au fichier HTML qui le charge.

34
Mooseman

Tu es presque là.

Assurez-vous simplement de changer d'URL et d'ajouter le "! Important" à la fin de la ligne.

Cela vous permettra d'ajouter n'importe quelle image de votre choix.

    .ui-widget-content .ui-icon {
    background-image: url("../../images/ui-icons_222222_256x240.png")      
    !important;}
    .ui-widget-header .ui-icon {
    background-image: url("../../images/ui-icons_222222_256x240.png")   
    !important;}

J'espère que cela fonctionne pour toi.

3
Francois Muller

J'ai remarqué dans le message d'erreur que le site cherchait: 

http://site/Content/images/image.png

Je ne sais pas trop pourquoi, comme le dit la réponse de Mooseman: 

Le lien dans le fichier CSS est relatif au fichier CSS, pas au fichier HTML qui le charge.

Il semble que le lien était relatif à partir de site.css (qui est contenu dans Content) plutôt que de Jquery-ui.mincss, et il est donc impossible de trouver le png. 

Après avoir changé les chemins dans JQuery-ui.min.css en

themes/base/images/image.png 

Cela fonctionne maintenant parfaitement.

0
Bassie