1

私はdjango-taggitでdjango-autocomplete-lightを使用しています。ドキュメントに従えば、統合は非常に簡単です。

import autocomplete_light
from taggit.models import Tag
autocomplete_light.register(Tag)

と

class NewActivityForm(forms.ModelForm):
    tags = TagField(widget=TagWidget('TagAutocomplete'))
    [...]

これにより、適切なインライン スタイルのウィジェットがレンダリングされます。入力すると、以下のオートコンプリート リストが表示されます。すべて問題ありません。

ただし、私のタグは色分けされているため、2 つのことをカスタマイズする必要があります。

a) まず、オートコンプリート リストで、各タグの css クラスをカスタマイズする必要があります。テンプレートをある程度制御できますが、クラスをオーバーライドする [data-value] を探している css セレクターがあるようです。autocomplete_template_html のコードは次のとおりです。

<div>
    {% for choice in choices %}
        <span class="tag tag--{{choice.pk}}" data-value="{{choice.pk}}" >{{choice}}</span>
    {% endfor %}
</div>

b) 2 番目に、タグを選択して入力に追加したら、そこにその CSS クラスを維持して、カスタムの外観を得る必要があります。生成された DOM 要素を見ると、おそらく使用できる隠しスパンがいくつかあることがわかりますが、その方法は明確ではありません。

これどうやってするの？独自のウィジェットを作成する必要がありますか、それともサブクラス化できるものはありますか?

4

1 に答える 1

1

A) CSS クラスをオーバーライドできません

CSS の特異性の問題のようです。

これを試してみましたが、ロード後に設定されている場合autocomplete_light/style.css（または「autocomplete_light/static.html」テンプレート）に設定されている場合に機能します：

    .yourlabs-autocomplete .choice, .yourlabs-autocomplete [data-value], .yourlabs-autocomplete em
    {   
        color: red;
    }

それ以外の場合は、単にオーバーライドautocomplete_light/static/autocomplete_light/style.cssできます。

B) 選択肢が選択されたときのスタイルは同じでなければならない

選択肢が選択されると、その HTML がデッキにコピーされ、span.remove追加されるだけです。スタイルは維持する必要があります。

ただし、CSSを投稿すると非常に役立ちます!

于 2014-01-16T01:07:35.543 に答える