Bootbox js：如何更改“确定”按钮的位置

Question

在bootbox.js中，默认情况下，确定按钮显示在取消按钮之后。我希望确定按钮先显示，然后是取消按钮。以下是当前情况的情景图：

http://paynedigital.com/img/confirm-simple.png

我需要先显示确定按钮。我已经查看了它的文档，但没有找到如何实现的方法。

- Maha Dev

---

你的意思是说我们不能通过这个插件来完成吗？ - Maha Dev

嗯，我还没有使用过 bootbox js，所以无法说。; - Kartikeya Khosla

if possible create a fiddle. - Kartikeya Khosla

这实际上是一个非常好的和有效的问题。到目前为止，我见过的大多数对话框都把确认按钮放在第一个位置。在 Windows 中，这是每个对话框的默认设置。据我了解，大多数 Linux 系统把它放在左侧。只有 Mac OS 是反过来的。简而言之：由于默认设置似乎并不是全世界的默认设置，所以真正应该有一种易于使用和内置的方法来更改此设置。 - Semmel

Answer 1

您可以更改按钮的顺序。 请尝试：

 bootbox.confirm({
     title: "danger - danger - danger",
     message: "Are you sure of this?",
     buttons: {
        cancel: {
        label: "Cancel",
        className: "btn-default pull-right"
     },
     confirm: {
        label: "Delete",
        className: "btn-danger pull-left"
    }
  },
  callback: function(result) {
    // Do your stuff here
  }
});

希望这对你有帮助。

- khushboo29

---

我已经尝试过这个方法，虽然它改变了按钮的顺序，但也将第一个按钮完全拉到了左边。因此，对我来说，CSS解决方案更好地完成了任务，并且正好符合我的要求。 - Semmel

这是一个精确的解决方案，但你仍然可以修改它。 - Ananda G

Answer 2

同时，Bootbox团队新增了一个名为swapButtonOrder的选项，您需要将其设置为true以轻松实现它。

查看我使用Bootbox v5的演示：http://jsfiddle.net/2z8tb6fk/1/

- b126

Answer 3

你可以通过CSS实现它。

.modal-footer button {
  float:right;
  margin-left: 10px;
}

这里是一个可工作的 JSFiddle 示例: http://jsfiddle.net/9L3A9/51/

- Ankush Jain

---

我们也可以通过创建自定义按钮来实现这一点，但如果我只需要两个按钮，那么为什么要这样做呢？谢谢 :) - Maha Dev

这完美地解决了问题，只是改变了按钮的顺序。谢谢 :) - Semmel

Answer 4

我曾经也遇到同样的需求。我是这样解决的：我参加了一个课程，学习如何在按钮之间设置10像素的差距。

<style>
    .margin-left-10px {
        margin-left: 10px;
    }
</style>

然后我使用了Bootstrap类来应用于按钮，它完美地运行。

<script>
    buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-danger'
            },
            cancel: {
                label: 'No',
                className: 'btn-success pull-right  margin-left-10px'
            }
    }
</script>

这里我的“不”按钮将永远出现在右侧。

- Ananda G

Answer 5

我花了一个小时查看这个问题，然后我修改了bootbox.js文件。

在按钮的枚举之前，我添加了：

    var list = Object.keys(buttons).map(
    function (key) {
        return buttons[key];
    });

    buttons = list.sort(function (a, b) {
        return b.order -a.order ;
    });

然后您可以为按钮设置顺序。

哦，够了！

- Thomas

Answer 6

我在 JavaScript 中改变了顺序

exports.confirm = function () {
    var options;

    // changed the order of the buttons
    //options = mergeDialogOptions("confirm", ["cancel", "confirm"], ["message", "callback"], arguments);
    options = mergeDialogOptions("confirm", ["confirm", "cancel"], ["message", "callback"], arguments);

- nuander