54819


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

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

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

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

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

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

[code]

    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:"ＯＫ",
                    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:"ＯＫ",
                    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);
            }
        });
    }
[/code]

[code]

    .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;
    }
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2019-05-08T07:21:31.243
54818
2019-05-08T07:44:24.150
2019-05-08T07:44:24.150
3060
34228
question
javascript
JavaScriptの引数を実行させたい


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

[code]

    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:"ＯＫ",
              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:"ＯＫ",
              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);
            }
        });
    }
[/code]

[code]

    .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;
    }
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2019-05-08T07:42:27.150
54819
2019-05-08T07:42:27.150
22665
54818
answer