この記事について
| 環境 | jQuery UI |
|---|---|
| 目的 | dialogのタイトルを変数を使って条件によって変更する |
| 結果 | $(‘#dialog’).dialog(‘option’, ‘title’, ‘新しいタイトル’); で上書きできた |
つまずきポイント要約
- タイトルの初期設定はjQuery側とhtml側の2箇所にあり、両方設定するとjQuery側が優先される
- 初期設定の2箇所をいじっても、タイトルはうまく動的に更新できなかった
jQuery ui の dialog で タイトルを設定する場所は主に二箇所ある。
ひとつは jQuery ファイル内
//jQuery_ui の詳細設定
$('#dialog').dialog({
autoOpen: false,
width: 600,
title: 'ここがタイトルになる',
modal:false,
resizable:false,
buttons: {
"元に戻す": function() {
//$(this).dialog("close");
alert('元に戻す');
},
"閉じる": function() {
$(this).dialog("close");
}
}
});もうひとつは html（PHP）ファイル内
<div id="dialog" title="ここがタイトルになる">
<p>ここがダイアログの内容</p>
</div>二箇所どちらにもタイトルを設定すると jQuery ファイルの情報が優先される。
このたび、タイトルに変数を用いて、条件によってタイトルの内容を変更したかったのだが少し苦戦した。上記二箇所をいじってもタイトル文章がうまく更新できなかったのだ。
結論だけ言うと、タイトルはオプションを使っても指定できる。
jQuery ファイル内でダイアログのタイトルを上書き
$('#dialog').dialog('option', 'title', '新しいタイトル');ここに変数を持ってきて、希望通りに表示できた。
