2011年3月17日

jQuery UIのダイアログで特定のボタンをデフォルトにする方法

======================================================
漢(オトコ)のコンピュータ道: 地震による災害復旧に対して今我々が出来ること。
======================================================


jQuery UIのダイアログを使って見て、デフォルトボタンの指定をするオプションが見当たらなかったので、調査した結果をメモ。

今回の情報元:
javascript - jquery-ui Dialog: Make a button in the dialog the default action (Enter key) - Stack Overflow

javascript - Submit jQuery UI dialog on <Enter> - Stack Overflow

調べた結果によると、
$("#myDialog").dialog({
    open: function() {
        $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus(); 
    }
});

という感じで、ダイアログを開いた時の処理でボタンにフォーカスを当ててあげれば良いとの事。このボタンの指定方法を自分で調べるのが面倒だったので時間の節約になった。

2番目のボタンをデフォルトにしたい場合は、eq(0)の所をeq(1)にすればOK。

同じ考え方で下の様にすればボタンのテキストの色を変える事も出来た。

$(this).parents('.ui-dialog-buttonpane button:eq(0)').css('color', '#F00');


なるほど!




======================================================
漢(オトコ)のコンピュータ道: 地震による災害復旧に対して今我々が出来ること。
======================================================



.