javascript - ブートボックス内の複数の入力

Question

Bootstrap の Bootbox に入力を 1 つではなく 2 つにするにはどうすればよいですか?

モーダル ダイアログで 2 つの値を受け取る必要があります。

Answer 1

実際には、ブートボックス コードを変更する必要のない、より簡単な方法があります。

ブートボックスの作成時に渡す文字列は、テキストだけである必要はありません。html コードでもかまいません。つまり、ほとんどすべてをボックスに含めることができます。

カスタム フォームをブートボックスに配置するには、次のように作成します。

bootbox.confirm("<form id='infos' action=''>\
    First name:<input type='text' name='first_name' /><br/>\
    Last name:<input type='text' name='last_name' />\
    </form>", function(result) {
        if(result)
            $('#infos').submit();
});

Answer 2

そのための関数を作成しました。チェックしてください-こちら

使用例

bootbox.form({
    title: 'User details',
    fields: {
        name: {
            label: 'Name',
            value: 'John Connor',
            type:  'text'
        },
        email: {
            label: 'E-mail',
            type:  'email',
            value: 'johnconnor@skynet.com'
        },
        type: {
            label: 'Type',
            type:  'select',
            options: [
                {value: 1, text: 'Human'},
                {value: 2, text: 'Robot'}
            ]
        },
        alive: {
            label: 'Is alive',
            type: 'checkbox',
            value: true
        },
        loves: {
            label: 'Loves',
            type: 'checkbox',
            value: ['bike','mom','vg'],
            options: [
                {value: 'bike', text: 'Motorbike'},
                {value: 'mom', text: 'His mom'},
                {value: 'vg', text: 'Video games'},
                {value: 'kill', text: 'Killing people'}
            ]
        },
        passwd: {
            label: 'Password',
            type: 'password'
        },
        desc: {
            label: 'Description',
            type: 'textarea'
        }
    },
    callback: function (values) {
        console.log(values)
    }
})

Answer 3

私にとって、これはそれを行うための最もクリーンな方法です:

var form = $('<form><input name="usernameInput"/></form>');
bootbox.alert(form,function(){
    var username = form.find('input[name=usernameInput]').val();
    console.log(username);
});

Answer 4

必要なものの基本的な例を次に示します（ノックアウトを使用）

<button data-bind="click: select">Button</button>
<script type="text/html" id="add-template">
    <div style="display:none">
        <input data-bind='value: name' placeholder="Name">
    </div>
</script>


var viewModel = function () {
    var self = this;
    self.name = ko.observable();
    self.select = function () {
        var messageTemplate = $($("#add-template").html());
        ko.applyBindings(self, messageTemplate.get(0));
        messageTemplate.show();
        bootbox.confirm({
                title: "Add new",
                message:  messageTemplate,
                callback: function (value) {
                    // do something
                }
            });
    }
}

ko.applyBindings(new viewModel());

フィールドをいくつでも追加してビューモデルにバインドするだけです

http://jsfiddle.net/6vb7e224/2/

Answer 5

ブートボックスからダイアログ関数をロードする独自の関数を作成する必要があります。

最も簡単な方法は、プロンプト機能をソースからコピーすることです: https://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js

新しい入力（または必要なもの）を追加するためにこの部分を変更します

    // let's keep a reference to the form object for later
    var form = $("<form></form>");
    form.append("<input autocomplete=off type=text value='" + defaultVal + "' />");

結果を取得するためのこの部分：

    var confirmCallback = function() {
        if (typeof cb === 'function') {
            return cb(form.find("input[type=text]").val());
        }
    };