Bootbox js：更改确定按钮的位置答案

【问题标题】：Bootbox js : Change placement of Ok ButtonBootbox js：更改确定按钮的位置
【发布时间】：2016-05-02 04:22:57
【问题描述】：

在 bootbox.js 中，默认情况下确定按钮显示在取消按钮之后。我希望它是第一个然后取消。这是当前场景的情况，

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

我首先需要确定按钮。我有现场它的文档，但没有找到办法。

【问题讨论】：

你的意思是我们不能通过这个插件做到这一点？
好吧..我还没有使用过bootbox js..所以不能说..;(
如果可能，创建一个小提琴。
这实际上是一个非常好的和有效的问题。到目前为止，我看到的大多数对话框都将确认按钮作为第一个按钮。在 Windows 上，这是每个对话框的默认设置。大多数Linux系统都有它在左边。只有 Mac OS 反其道而行之。 TL;DR：由于默认值似乎不是世界其他地方的默认值，因此确实应该有简单且内置的方法来改变它。

标签： jquery twitter-bootstrap-3 bootbox

【解决方案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
  }
});

希望这对你有用。

【讨论】：

我已经尝试过了，虽然它改变了按钮的顺序，但它也将第一个按钮完全拉到了左边。所以对我来说，CSS 解决方案做得更好，并且完全符合我的要求。
这是一个精确的解决方案，但您仍然可以修改它。

【解决方案2】：

你可以通过 CSS 来实现。

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

这是工作小提琴http://jsfiddle.net/9L3A9/51/

【讨论】：

我们也可以通过创建自定义按钮来实现这一点，但如果我只需要两个按钮，我为什么要这样做。谢谢:)
这完美解决了问题，只是改变了按钮的顺序。谢谢。 :)

【解决方案3】：

与此同时，Bootbox 团队添加了一个名为 swapButtonOrder 的新选项，您必须将其切换为 true 才能轻松完成。

在这里查看我使用 Bootbox v5 的工作演示：http://jsfiddle.net/dng3z18v/1/

【讨论】：

【解决方案4】：

我也面临同样的需要。我已经解决了这种方式。我上了一门课，使按钮之间的差异为 10 像素。

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

然后我对按钮使用了引导类，它工作得很好。

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

这里我的no按钮会永远出现在右边。

【讨论】：

【解决方案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 ;
    });

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

哎呀！

【讨论】：

【解决方案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);

【讨论】：