jQueryUI:dialog()标题栏没有改变

时间:2014-09-29 16:51:07

标签: javascript jquery jquery-ui

看到这个小提琴:http://jsfiddle.net/590hbj9y/5/

单击不同的按钮会生成不同的对话框主体,但对话框标题保持不变。如何才能让标题改变?

这是小提琴的代码。 (如果StackOverflow为此写了一个自动导入程序,那会很好!)

HTML

<section id="dialog" title="hi">Hello</section>
<input type="button" msg="Sup" value="Say Sup">
<input type="button" msg="Yo" value="Say Yo">
<input type="button" msg="Foo" value="Say Foo">

JS

function showMessage(evt) {
    var msg = $(evt.target).attr('msg');
    var dialog = $("#dialog");
    dialog.attr('title', "Showing " + msg);
    dialog.text(msg);
    dialog.dialog();
}

$(function () {
    $("input").click(showMessage);
});

CSS

#dialog {
    display: none;
}

1 个答案:

答案 0 :(得分:3)

您需要将标题作为选项传递。

http://api.jqueryui.com/dialog/#option-title

function showMessage(evt) {
    var msg = $(evt.target).attr('msg');
    var dialog = $("#dialog");
    dialog.text(msg);
    dialog.dialog({
		title: "Showing "+ msg
	});
}

$(function () {
    $("input").click(showMessage);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css"/>

<section id="dialog" title="hi">Hello</section>
<input type="button" msg="Sup" value="Say Sup">
<input type="button" msg="Yo" value="Say Yo">
<input type="button" msg="Foo" value="Say Foo">