1

私のサイトでの検索にjqueryuiオートコンプリートを使用しています。結果を返しながら、単純なローディングスピナーを追加したいと思います。jquery uiは、結果がロードされるときにクラス'ui-autocomplete-loading'を自動的に追加します。このクラスにいくつかのcssを追加して、アクティブなときに背景画像を追加しました。奇妙なことに、クラスは完全に追加および削除されますが、スタイルは適用されません。ただし、ui-autocomplete-loadingクラスを手動で追加すると、スタイルが表示されます。私はこれを理解しようとして髪を引っ張ってきました！

自動的に追加された「ui-autocomplete-loading」

http://i.stack.imgur.com/DyLNj.jpg

手動で追加された「ui-autocomplete-loading」

http://i.stack.imgur.com/BReHS.png

CSS：

.ui-autocomplete-loading {
  background: red url('/static/images/ajax-loader.gif') no-repeat right center!important;
}
4

3 に答える 3

3

jQuery UI スクリプトを見ると、.ui-autocomplete-loadingクラスが自動的に適用されていることがわかります。このスタイルは、css でオーバーライドして、選択した画像またはスタイルを表示できます。

問題の 1 つは、CSS が他のスタイルと競合する可能性があることです。これが問題かどうかは、DevTools、Firebug などでスクリプトをデバッグし、適用された要素スタイルを調べることで確認できます。

簡単な修正は、クラスの特異性を高めることです。たとえば、inputCSS に要素を追加するとうまくいく場合があります。input.ui-autocomplete-loading { background:url('img/loading.gif') no-repeat right center; }

以下の例でわかるように、CSS ルールを調べたところ、Foundation フレームワークのスタイルが私の.ui-autocomplete-loadingスタイルをオーバーライドしていることがわかりました。スクリプトのデバッグ中にスタイルのチェックを外すことで、それを確認できました。

ここに画像の説明を入力

そのため、CSS を変更しました。更新されたスタイルはこちらで確認できます。

ここに画像の説明を入力

于 2013-11-15T14:50:25.360 に答える
2

既存の背景を上書きしようとしているので、ここでは少し難しいです。

できることは、入力フィールドにボタンを追加することです。次に、オートコンプリートの読み込み用のスタイルを追加できます。アイコンを配置するには、負のマージンを使用してください。

例えば

<input><button class="search_icon"><button></input>

.search_icon 
{
    margin-left: -20px;
    background: #fff url(/assets/images/search-icon.png) no-repeat;
    border-style: none;
    width: 15px;
}

.ui-autocomplete-loading
{
   background: #fff url(/assets/images/ajax-loader.gif) no-repeat 95%;  
}
于 2012-06-29T09:23:25.100 に答える
1

これは、 https: //jqueryui.com/autocomplete/#remote の Web サイトで jquery-ui 自体によって使用されるコードです 。

画像ディレクトリに「ui-anim_basic_16x16.gif」が含まれていることを確認してください。

<style>

       .ui-autocomplete-loading {

       background: white url("/images/ui-anim_basic_16x16.gif") right center no-repeat;

       }

</style>
于 2019-04-05T10:09:53.677 に答える