Question

我有两个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>

JQUERY

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代码here ...

Answer 1

在打开之前，您需要使用.dialog("option", "title", newValString)设置标题。

解决此问题的一种方法是在对话框中添加数据徽标值

<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");

在开场功能中，将图像设置为标题。我留给你适当的风格。

Answer 2

将图像显示为标题：

$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");
});

工作fiddle

在对话框标题上显示来自DIV的图像作为图标

2 个答案: