2

今日、Select2プラグインを使用しているときに、一見単純なスタイリングタスクに遭遇しましたが、達成したいことは思ったより難しいようです。これが私がやりたいことです：

ユーザーは、ドロップダウンメニューから連絡先を選択できる必要があります。各連絡先エントリは、連絡先のプロフィール写真とその横にあるデータとして表示されます。折りたたむと、ドロップダウンに選択した連絡先（つまり、選択した連絡先のプロフィール写真とその横にあるデータ）が表示され、その横に「ドロップダウンの三角形」が表示されます。展開された状態では、ドロップダウンに他の連絡先が追加で表示され、それぞれにプロフィール写真とデータが表示されます。簡単に言えば、select2の例のページの「テンプレート」の例で説明されているように、より複雑なレイアウト（左側のプロファイル画像と画像のすぐ隣に3行のテキスト）を使用してテンプレートを作成したいと思います。

select2オプションを使用し、画像とデータをスタイル付きのdiv要素でラップするformat関数を使用して、結果に目的のスタイルを適用することができました（スタイル設定には、Twitter Bootstrapの「media」cssクラスを使用していることに注意してください）。formatResult

function formatContactResult(item) {
 if(!item.id)
    return "No contact selected";

 var contact = JSON.parse(item.text);
 return "<div class='media'><a class='pull-left' href='#'><img style='margin-top: 5px;' class='media-object' data-src='holder.js/64x64' src='" + contact.thumbUrl + "' /></a><div class='media-body' style='font-size: 11px;'><strong>" + contact.displayName + "</strong><br />" + contact.jobTitle + "</div></div>"
};

私の問題：このような複雑なレイアウトを選択に適用する方法がわかりません。このオプションは知っていますが、関数formatSelectionの戻り値は、複雑なレイアウトには適切なラッパーではない要素でラップされています。有効ではないことはわかっていますが、上記と同じレイアウト関数を適用しようとしましたが、予想どおり、奇妙な結果になりました（目的のレイアウトが右端に押し出されました）。formatSelectionspan

select2を使用して説明されたレイアウトを実現する方法について誰かが手がかりを持っていますか？

興味がある場合は、Knockout.jsとTwitterBootstrapでSelect2プラグインを使用しています。

4

1 に答える 1

2

私はそれを理解しました-問題は、コンポーネントdivに含まれるすべての要素select2-choiceが絶対的に配置され、スタイルが設定されていることでしたselect2.css：

.select2-container .select2-choice div {
    display: block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    [...]
}

このスタイルは、ドロップダウンボックスの「ドロップダウン三角形」をレンダリングするために使用されます。これはたまたまdiv要素です。残念ながら、三角形にdivは、スタイルを設定するために使用する必要のある独自のCSSクラス名がありません。

そのため、回避策として、新しいCSSクラスを作成し、それをコンポーネントdiv内でレンダリングしたい要素に適用しましたselect2-choice。アイデアは、位置と幅の属性をオーバーライドすることです。

.innerDiv {
    position: relative !important; 
    width: auto !important;
}
于 2013-03-27T13:01:33.703 に答える