wake-up-neo.com

jQuery datepicker Vorherige und nächste Schaltflächen zeigen nicht an, wie auf Bilder im Themenordner in CSS gezeigt werden soll

Ich habe mit dem jQuery ui datepicker erfolgreich ein Kalendersteuerelement zu meinem Textfeld hinzugefügt. Die Schaltflächen "Vorherige" und "Nächste" sind jedoch nicht sichtbar, obwohl das übergeordnete Tag beim Klicken funktional funktioniert

Wie kann ich dies ändern, um die auf http://jqueryui.com/datepicker/ angezeigten Symbole anzuzeigen, wenn diese Bilder in meinem Webpaket unter ..\Content\theme\base\images und nicht im Standorte unten gezeigt

.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);
}

Muss ich das Bild in css ähnlich aufrufen, wie Bilder aus meinem c # -Code aufgerufen werden? Wie in:

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

Stellen Sie sicher, dass Ihr jquery-ui.min.css auf die richtige Datei für die Bilder verweist. Die Konsole sollte einen Fehler anzeigen, wenn Sie versuchen, die Symbole zu laden.

Wenn dies beispielsweise der Ort Ihrer CSS-Datei ist: http://example.com/css/jquery-ui.min.css, sollte sich die Symboldatei in http://example.com/css/images/ui-icons_222222_256x240.png befinden. Der Link in der CSS-Datei ist relativ zur CSS-Datei, nicht die HTML-Datei, die sie lädt.

34
Mooseman

Du bist fast am Ziel.

Stellen Sie einfach sicher, dass Sie Ihre URL ändern und fügen Sie am Ende der Zeile das "! Important" hinzu.

Auf diese Weise können Sie jedes gewünschte Bild hinzufügen.

    .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;}

Hoffe, das funktioniert für dich.

3
Francois Muller

Das liegt daran, dass du Mission bist ui-icons_444444_256x240.png Bild. Sie können das Bild hier herunterladen Link .

Erstellen Sie nun einen Ordner mit dem Namen - images und fügen Sie dieses Ordnerbild in diesen Ordner ein.

Beispiel

http://example.com/css/jquery-ui.min.css
http://example.com/css/images/ui-icons_444444_256x240.png
0
Huzaif Sayyed

Für alle, die die einfachste Antwort suchen,

  1. Gehen Sie zur Site JQuery UI und laden Sie die Datei mit den Standardeinstellungen herunter.
  2. Extrahieren Sie die Datei.
  3. Kopieren Sie den Ordner "images" und legen Sie ihn in Ihrem Projekt in demselben Ordner ab, in dem sich das jQuery-UI-CSS befindet. Dadurch wird das Problem behoben.

Dank an Gullele's Corner , ich habe die Prozedur seit der Änderung der Ordnerstruktur (Mai 2019) einfach aktualisiert.

0
Underwaters

Ich habe aus der Fehlermeldung festgestellt, dass die Website in: 

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

Ich weiß nicht genau warum, wie aus Moosemans Antwort: 

Der Link in der CSS-Datei ist relativ zur CSS-Datei, nicht die HTML-Datei, die sie lädt.

Es scheint, dass der Link relativ zu site.css war (was in Content enthalten ist) und nicht Jquery-ui.mincss. Daher konnte er das png offensichtlich nicht finden. 

Nach dem Ändern der Pfade in JQuery-ui.min.css in

themes/base/images/image.png 

Es funktioniert jetzt perfekt.

0
Bassie