0

UI-dialogを使用してダイアログを部品化しています。

部品化してて思ったのですが、display_dialogの引数todoを実行させたいのですが上手く行きません。
OKボタンを押した時に、例えば以下の様なイベントを発生させられないかを模索しています。

  • OKボタンを押した時にリンク先へ飛ぶ
  • ダイアログをクローズさせる
  • ブラウザ自体を閉じる

HTMLから渡した引数だけではイベント処理の実行は無理なのでしょうか?

例えばtodoの引数にlocation.href=./menu.htmlと記述してdisplay_dialogメソッドのOKボタンを押した際に、location.href=./menu.htmlを実行する、といった具合です。

どうぞ宜しくお願い致します。

function display_dialog(message,title,todo,can) {

    var msg = "<div>" + message + "</div>";
    var defer = $.Deferred();

    //%表記に変換
    var wWidth = $(window).width();
    var dWidth = wWidth * 0.6;          //60%
    var wHeight = $(window).height();
    var dHeight = wHeight * 0.4;        //40%

    //$.fn.modal.Constructor.prototype._enforceFocus = function() {};

    //キャンセルボタンが不要な場合
    if (can=="") {
        $(msg).dialog({
            dialogClass:"wkDialogClass",
            modal:false,                                          //モーダル表示
            width:dWidth,                                         //ダイアログの横幅(%)
            height:dHeight,                                       //ダイアログの縦幅(%)
            position: {my: "center", at: "center", of: window},   //位置
            hide:500,                                             //消える時のアニメーション処理ミリ秒
            show:500,                                             //表示の時のアニメーション処理ミリ秒
            title:title,                                          //タイトル
            buttons:[
                {tabIndex: -1,
                text:"OK",
                class:"wkBtnOk",
                click:
                    function() {
                        todo();
                        //ダイアログを閉じる
                        $(this).dialog("close");
                        defer.resolve(true);
                    }
                },
                {tabIndex: -1,
                 text:"閉じる",
                 class:"wkBtnNg",
                 click:
                    function() {
                    //ダイアログを閉じる
                        $(this).dialog("close");
                        defer.resolve(false);
                    }
                }
            ]
        });
    } else {
    //キャンセルボタンが必要な場合
        $(msg).dialog({
            dialogClass:"wkDialogClass",
            modal:false,                                          //モーダル表示
            width:dWidth,                                         //ダイアログの横幅(%)
            height:dHeight,                                       //ダイアログの縦幅(%)
            position: {my: "center", at: "center", of: window},   //位置
            hide:500,                                             //消える時のアニメーション処理ミリ秒
            show:500,                                             //表示の時のアニメーション処理ミリ秒
            title:title,                                          //タイトル
            buttons:[
                {tabIndex: -1,
                text:"OK",
                class:"wkBtnOk",
                click:
                    function() {
                        todo();
                        //ダイアログを閉じる
                        $(this).dialog("close");
                        defer.resolve(true);
                    }
                },
                {tabIndex: -1,
                     text:"キャンセル",
                     class:"wkBtnCancel",
                     click:
                        function() {
                        //ダイアログを閉じる
                            $(this).dialog("close");
                            defer.resolve(false);
                        }
                },
                {tabIndex: -1,
                 text:"閉じる",
                 class:"wkBtnNg",
                 click:
                    function() {
                    //ダイアログを閉じる
                        $(this).dialog("close");
                        defer.resolve(false);
                    }
                }
            ]
        });
    }
     return defer.promise();
}

//ダイアログを2回呼ぶ場合
function message_dialog(message1,message2,title,url,can) {
    display_dialog(message1,title,url,can).then(function (answer) {;
        if(answer){
            display_dialog(message2,title,url,can);
        }
    });
}
.wkDialogClass {
    background-color: #f5f5f5;
    z-index: 1060;
}

/*ヘッダー:タイトル*/
.wkDialogClass .ui-dialog-titlebar {
  color:black;
  background:#dcdcdc;
}

/*本文*/
.wkDialogClass .ui-dialog-content {
  color:black;
  background:#ffffe0;
}

/*フッター:ボタン*/
.wkDialogClass .ui-dialog-buttonpane {
    background-color: #dcdcdc;
}

/*OKボタン*/
.wkBtnOk {
    color: white;
    background-color: #4169e1;
}
/*OKボタン<カーソルが当たった時>*/
.wkBtnOk:hover {
    color:green;
	background-color:orange;
}
/*OKボタン<フォーカスが当たった時>*/
.wkBtnOk:focus{
	color:green;
	background-color:orange;
}
/*OKボタン<ボタンを押した時>*/
.wkBtnOk:active{
	color:green;
	background-color:orange;
}

/*キャンセルボタン*/
.wkBtnCancel {
    color: white;
    background-color: #4169e1;
}
/*キャンセルボタン<カーソルが当たった時>*/
.wkBtnCancel:hover {
    color:green;
	background-color:orange;
}
/*キャンセルボタン<フォーカスが当たった時>*/
.wkBtnCancel:focus{
	color:green;
	background-color:orange;
}
/*キャンセルボタン<ボタンを押した時>*/
.wkBtnCancel:active{
	color:green;
	background-color:orange;
}

/*閉じるボタン*/
.wkBtnNg {
    color: white;
    background-color: green;
}
/*閉じるボタン<カーソルが当たった時>*/
.wkBtnNg:hover {
    color:green;
	background-color:orange;
}
/*閉じるボタン<フォーカスが当たった時>*/
.wkBtnNg:focus{
	color:green;
	background-color:orange;
}
/*閉じるボタン<ボタンを押した時>*/
.wkBtnNg:active{
	color:green;
	background-color:orange;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  </head>
  <body>
    <input type="button" onClick="display_dialog('登録せずに戻りますが、よろしいですか?','画面','location.href=./menu.html','')" value="ボタン">
  </body>
</html>

1
  • 1
    編集ありがとうございます。除々に使い慣れて行きたいと思います。
    – toshissk
    Commented 2019年5月8日 8:05

1 件の回答 1

1

todoは関数として実行しているので引数で渡すときも関数として渡してください。

function display_dialog(message,title,todo,can) {

	var msg = "<div>" + message + "</div>";

	var defer = $.Deferred();

	//%表記に変換
	var wWidth = $(window).width();
    var dWidth = wWidth * 0.6;			//60%
    var wHeight = $(window).height();
    var dHeight = wHeight * 0.4;		//40%


    //$.fn.modal.Constructor.prototype._enforceFocus = function() {};

  //キャンセルボタンが不要な場合
	if (can=="") {
		$(msg).dialog({
			dialogClass:"wkDialogClass",
			modal:false,													//モーダル表示
			width:dWidth,													//ダイアログの横幅(%)
			height:dHeight,													//ダイアログの縦幅(%)
			position: {my: "center", at: "center", of: window},				//位置
			hide:500,														//消える時のアニメーション処理ミリ秒
			show:500,														//表示の時のアニメーション処理ミリ秒
			title:title,													//タイトル
	        buttons:[
	        	{tabIndex: -1,
	        	text:"OK",
	        	class:"wkBtnOk",
	        	click:
					function() {
	        			todo();
						//ダイアログを閉じる
						$(this).dialog("close");
						defer.resolve(true);
					}
				},
	        	{tabIndex: -1,
				 text:"閉じる",
				 class:"wkBtnNg",
				 click:
			 		function() {
					//ダイアログを閉じる
						$(this).dialog("close");
						defer.resolve(false);
					}
				}
			]
		});
	} else {
	//キャンセルボタンが必要な場合
		$(msg).dialog({
			dialogClass:"wkDialogClass",
			modal:false,													//モーダル表示
			width:dWidth,													//ダイアログの横幅(%)
			height:dHeight,													//ダイアログの縦幅(%)
			position: {my: "center", at: "center", of: window},				//位置
			hide:500,														//消える時のアニメーション処理ミリ秒
			show:500,														//表示の時のアニメーション処理ミリ秒
			title:title,													//タイトル
	        buttons:[
	        	{tabIndex: -1,
	        	text:"OK",
	        	class:"wkBtnOk",
	        	click:
					function() {
	        			todo();
						//ダイアログを閉じる
						$(this).dialog("close");
						defer.resolve(true);
					}
				},
	        	{tabIndex: -1,
					 text:"キャンセル",
					 class:"wkBtnCancel",
					 click:
				 		function() {
						//ダイアログを閉じる
							$(this).dialog("close");
							defer.resolve(false);
						}
				},
	        	{tabIndex: -1,
				 text:"閉じる",
				 class:"wkBtnNg",
				 click:
			 		function() {
					//ダイアログを閉じる
						$(this).dialog("close");
						defer.resolve(false);
					}
				}
			]
		});
	}
	 return defer.promise();
}


//ダイアログを2回呼ぶ場合
function message_dialog(message1,message2,title,url,can) {
	display_dialog(message1,title,url,can).then(function (answer) {;
        if(answer){
        	display_dialog(message2,title,url,can);
        }
    });
}
.wkDialogClass {
    background-color: #f5f5f5;
    z-index: 1060;
}


/*ヘッダー:タイトル*/
.wkDialogClass .ui-dialog-titlebar {
  color:black;
  background:#dcdcdc;
}

/*本文*/
.wkDialogClass .ui-dialog-content {
  color:black;
  background:#ffffe0;
}

/*フッター:ボタン*/
.wkDialogClass .ui-dialog-buttonpane {
    background-color: #dcdcdc;
}



/*OKボタン*/
.wkBtnOk {
    color: white;
    background-color: #4169e1;
}
/*OKボタン<カーソルが当たった時>*/
.wkBtnOk:hover {
    color:green;
	background-color:orange;
}
/*OKボタン<フォーカスが当たった時>*/
.wkBtnOk:focus{
	color:green;
	background-color:orange;
}
/*OKボタン<ボタンを押した時>*/
.wkBtnOk:active{
	color:green;
	background-color:orange;
}



/*キャンセルボタン*/
.wkBtnCancel {
    color: white;
    background-color: #4169e1;
}
/*キャンセルボタン<カーソルが当たった時>*/
.wkBtnCancel:hover {
    color:green;
	background-color:orange;
}
/*キャンセルボタン<フォーカスが当たった時>*/
.wkBtnCancel:focus{
	color:green;
	background-color:orange;
}
/*キャンセルボタン<ボタンを押した時>*/
.wkBtnCancel:active{
	color:green;
	background-color:orange;
}


/*閉じるボタン*/
.wkBtnNg {
    color: white;
    background-color: green;
}
/*閉じるボタン<カーソルが当たった時>*/
.wkBtnNg:hover {
    color:green;
	background-color:orange;
}
/*閉じるボタン<フォーカスが当たった時>*/
.wkBtnNg:focus{
	color:green;
	background-color:orange;
}
/*閉じるボタン<ボタンを押した時>*/
.wkBtnNg:active{
	color:green;
	background-color:orange;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  </head>
  <body>
    <input  type="button" onClick="display_dialog('登録せずに戻りますが、よろしいですか?','画面', function() {location.href='./menu.html'},'')" value="ボタン">
  </body>
</html>

1
  • なるほど、functionをそのまま引数として渡せば良いのですね。もう少し色々出来ないか実験してみたいと思います。
    – toshissk
    Commented 2019年5月8日 8:03

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。