web-dev-qa-db-ja.com

jQueryの日付ピッカーの前と次のボタンが表示されない、CSSでテーマフォルダの画像を指す方法

JQuery ui datepickerを使用して、カレンダーコントロールをテキストボックスに正常に追加しましたが、含むタグはクリックすると機能しますが、前後のボタンは表示されません。

これらの画像が私のWebパッケージ内で見つかったときに、これを変更して http://jqueryui.com/datepicker/ に表示されるアイコンを表示する方法..\Content\theme\base\imagesで、以下に示す場所ではありません

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

C＃コード内から画像を呼び出す方法と同様の方法でcss内で画像を呼び出す必要がありますか？次のように：

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

jquery-ui.min.cssは、画像の正しいファイルを指しています。アイコンをロードしようとすると、コンソールにエラーが表示されます。

たとえば、これがCSSファイルの場所である場合：http://example.com/css/jquery-ui.min.css、アイコンファイルはhttp://example.com/css/images/ui-icons_222222_256x240.png。 CSSファイル内のリンクは、CSSファイルをロードするHTMLファイルではなく、CSSファイルに関連しています。

38
Mooseman

あなたはほとんどそこにいます。

必ずURLを変更し、行の最後に「！important」を追加してください。

これにより、希望する画像を追加できます。

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

これがあなたのために働くことを願っています。

3
Francois Muller

これは、あなたが使命だからですui-icons_444444_256x240.png画像。ここからそのイメージをダウンロードできます link 。

-imagesという名前のフォルダーを作成し、そのフォルダー内にそのフォルダーイメージを追加します。

例

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

最も簡単な答えを探している人のために、

  1. サイトに移動します JQuery UI そして、デフォルト設定でファイルをダウンロードします。
  2. ファイルを抽出します。
  3. 「images」フォルダーをコピーし、jQuery ui cssが存在する同じフォルダー内のプロジェクトに配置します。これにより、問題が処理されます。

Gullele's Corner への謝辞、フォルダー構造の変更（2019年5月）以降、手順を更新しただけです。

0
Underwaters

エラーメッセージから、サイトが探していたことがわかりました。

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

ムースマンの答えからのように、私は理由がよくわかりません：

CSSファイル内のリンクは、CSSファイルをロードするHTMLファイルではなく、CSSファイルに関連しています。

リンクはsite.cssではなくJquery-ui.mincss（Contentに含まれる）からの相対リンクであるため、PNGが見つかりませんでした。

JQuery-ui.min.cssのパスを変更した後

themes/base/images/image.png

今では完全に動作します。

0
Bassie