javascript - Jquery SmartWizard 添加额外按钮

Question

如何在jquery 智能向导中添加额外的按钮

试过的代码：

我已经添加了工具栏部分代码..仍然无法正常工作。有人可以帮我吗？

JSFIDDLE 演示

$('#wizard').smartWizard({
            transitionEffect: 'slide',
            keyNavigation: false,
            onLeaveStep:leaveAStepCallback,
            onShowStep:showAStepCallBack,
            labelNext:'Save', 
            labelPrevious:'Back',
            labelFinish:'Finish',
      enableFinishButton: true,
            selected: 0,
        // step bar options
        toolbarSettings: {
          toolbarPosition: 'bottom', // none, top, bottom, both
          toolbarButtonPosition: 'left', // left, right
          showNextButton: false, // show/hide a Next button
          showPreviousButton: true, // show/hide a Previous button
          toolbarExtraButtons: ['NextBtn']
        }, 
        });

预期产出

我正在尝试在“下一步”按钮附近再添加一个按钮。

Answer 1

如果有人有同样的问题，试试这个方法：

    $('#smartwizard').smartWizard({
        toolbarSettings: {
            toolbarExtraButtons: [
                $('<button></button>').text('Finish')
                            .addClass('btn btn-info')
                            .on('click', function(){ 
                                alert('Finish button click');                            
                            }),
                $('<button></button>').text('Cancel')
                            .addClass('btn btn-danger')
                            .on('click', function(){ 
                                alert('Cancel button click');                            
                            })
            ]
        },
    });

Answer 2

在 document.ready() 函数中，您可以附加额外的按钮，例如：

$('.actionBar').append("<button class='buttonNext'>Extra</button>")

您可以提供您的班级和 ID，以便您可以在单击按钮时调用任何函数。