1

2 つの DIV 要素があり、背景としてアイコン イメージが含まれています。それらをクリックすると、それぞれのダイアログ ウィンドウが表示されます。各ダイアログ ウィンドウが開いたときにやりたいことは、DIV のイメージをダイアログのタイトルのアイコンとして取得することです。何か案が？これが私のコードです...

HTML

<div id="opener_1"></div>
<div id="dialog_1" title="FIREFOX">This is a Firefox window...</div>
<div id="opener_2"></div>
<div id="dialog_2" title="CHROME">This is a Chrome window...</div>

Jクエリ

var $JQ_ = jQuery.noConflict();

$JQ_(function () {
    $JQ_('[id^="dialog"]').dialog({
        autoOpen: false,
        width: 'auto',
        height: 'auto',
        resizable: false,
        show: {
            effect: "fade",
            duration: 250
        },
        hide: {
            effect: "fade",
            duration: 250
        }
    });
    $JQ_("#opener_1").click(function () {
        $JQ_("#dialog_1").dialog("open");
    });
    $JQ_("#opener_2").click(function () {
        $JQ_("#dialog_2").dialog("open");
    });
});

ここにもjsfiddleコードがあります...

4

2 に答える 2

0

.dialog("option", "title", newValString)開く前に, でタイトルを設定します。

これにアプローチする 1 つの方法は、ダイアログに data-logo 値を追加することです。

<div id="dialog_1" title="FIREFOX" data-logo="http://theurl">

次に使用します。

var $dialog = $JQ_('#dialog_1');
var strImg = '<img width="20" height="20" src="' + $dialog.data('logo') + '" />';
$dialog.dialog("option", "title", strImg);
$dialog.dialog("open");

タイトルに画像を設定するオープナー関数内。スタイリングはお任せします。

于 2013-09-01T15:05:13.767 に答える
0

画像をタイトルとして表示するには:

$JQ_("#opener_1").click(function () {
    var bg = $JQ_(this).css('background-image');
    bg = bg.replace('url(', '').replace(')', '');
    var image = "<img src='" + bg + "' alt='image' width='20' height='20' />";
    $JQ_("#dialog_1").dialog('option', 'title', image);
    $JQ_("#dialog_1").dialog("open");
});

働くフィドル

于 2013-09-01T15:16:05.457 に答える