web-dev-qa-db-ja.com

Bootbox.jsプロンプトオプションをカスタマイズする方法

Bootboxjs.Promptオプションをカスタマイズしようとしていますが、オプションオブジェクトをパラメーターとして使用できないようです

これは http://bootboxjs.com/index.html#api の例です

bootbox.Prompt("What is your name?", function(result) {                
  if (result === null) {                                             
    Example.show("Prompt dismissed");                              
  } else {
    Example.show("Hi <b>"+result+"</b>");                          
  }
});

これは私が渡そうとしているものです：

var promptOptions = {
  title: "Custom label",
  buttons: {
    confirm: {
      label: "Save"
    }
  }
};

bootbox.Prompt(promptOptions, function(result) {                
  if (result === null) {                                             
    console.log("Prompt dismissed");                              
  } else {
    console.log("Hi "+result);                          
  }
});

タイトルとボタンのラベルをカスタマイズするにはどうすればよいですか？

bootbox
12
Mariano J. Ponce

カスタムダイアログを使用して、カスタムプロンプトを作成できます。知っておくべき唯一のことは、bootboxに与えるメッセージ文字列はプレーンテキストである必要はないということです。 HTMLにすることもできるので、独自のプロンプトをカスタムブートボックスダイアログに配置できます。

あなたがやろうとしているのはこれです（Bootbox 4.xを使用）：

bootbox.dialog({
  message: "First name:<input type='text' id='first_name'>",
  title: "Custom label",
  buttons: {
    main: {
      label: "Save",
      className: "btn-primary",
      callback: function() {
        console.log("Hi "+ $('#first_name').val());
      }
    }
  }
});
21
haradwaith

bootbox.Promptは、カスタムラベルを持つオブジェクトを渡す場合に1つのパラメーターのみを受け取ります。したがって、それを機能させるためには、設定オブジェクトにコールバックを配置する必要があります。

var promptOptions = {
  title: "Custom label",
  buttons: {
    confirm: {
      label: "Save"
    }
  },
  callback: function(result) {                
      if (result === null) {                                             
        console.log("Prompt dismissed");                              
      } else {
        console.log("Hi "+result);                          
      }
    }
};

bootbox.Prompt(promptOptions);
20
mseo