1

jQuery UI Themeroller を介したスタイリングをサポートする優れたドロップダウン jQuery UI Multiselect ウィジェットは、ドロップダウン行内に画像を含めることをまだサポートしていません。

Stackoverflow 内でこの問題に対する回答は見当たりませんでしたが、インターネットのさまざまな分野で定期的に尋ねられているようです。そのため、この質問に対する回答を以下に示します..

4

1 に答える 1

6

(これを実際に見るには、私の FIDDLE の例も参照してください)

ここに画像の説明を入力

以下は、この優れた UI Multiselect for jQuery 内で画像の使用を導入するための「pdlove」による最初のアイデアに基づいています。

チェック ボックスのテキスト領域のライン アイテムに画像サポートを追加するには、次のようにセレクター オプション行 html を設定します。

<option value="somevalue" image="yourimage.jpg" class="multSelktrImg">
    normal visible text
</option>

また、スタイル シートの css ファイルにクラス コントロールを追加して、ドロップ ダウンのオプション ライン アイテムでレンダリングされる画像サイズを設定し、画像、ラベル、スパン テキストの位置設定をいくつか設定します。この例では、クラス名「multSelktrImg」を使用しているため、css ファイル内では次のようになります。

.multSelktrImg span{position: relative;top: 10px;vertical-align: middle;
    display: inline-flex;}
.multSelktrImg input {vertical-align: -2px;}
.multSelktrImg img {position: relative;height: 30px;margin: 2px 6px;top: -10px;}

src/jquery.multiselect.js ファイルの変更について

130 行目あたりで次の一致するコードを検索します (使用しているスクリプトのバージョン ID によって異なります)。

// build items
    el.find('option').each(function( i ){
        var $this = $(this),
            parent = this.parentNode,
            title = this.innerHTML,
            description = this.title,
            ....

「title = this.innerHTML ,」の上に次の行を追加します。

image = this.getAttribute("image");

次のようになります。

// build items
    el.find('option').each(function( i ){
        var $this = $(this),
        parent = this.parentNode,
        image = this.getAttribute("image");
        title = this.innerHTML,
        description = this.title,

ここで、180 行目あたりで次の一致するコードを検索します。

// add the title and close everything off
    html += ' /><span>' + title + '</span></label></li>';
    ....

コード行を次のように置き換えて、画像をレンダリングできるようにします。

// add the title and close everything off
    html += ' /><span>';
            if (image != null) {
                html += '<img src="'+image+'" class="multSelktrImg">';
            }
            html += title + '</span></label></li>';

スクリプト src/jquery.multiselect.js ファイルの新しいバージョンを保存すると、画像が複数選択ドロップダウンに表示されます。「multSelktrImg」クラス値を使用して、css ファイル内のクラスのピクセル サイズを変更することにより、表示される画像のサイズを制御します。

FIDDLE バージョンでは、最小化されたバージョンの jQuery スクリプトを変更し、Select オブジェクトの初期化を作成しました。

于 2014-03-08T20:05:06.677 に答える