javascript - 如何在 JQuery Steps 中有两个按钮

Question

我真的需要一些帮助。所以我正在使用一个 Jquery Steps PlugIn .现在在这个插件中，当我们转到最后一个选项卡时，它有一个名为“Finish”的按钮，当单击调用 “onFinishing” 方法时。

onFinishing: function () {
            var loadedPrefix = MyNamespace.loadedPrefix;
            var inputBoxPrefix = $('#SitePrefix').val();
            $.ajax({
                type: 'POST',
                url: '/Settings/IsPrefixExists',
                data: { newPrefix: inputBoxPrefix, prefixLoadedFromDB: loadedPrefix },
                success: function (data) {
                      // do some stuff here
                    }
                },
                error: function () {
                    DisplayError('Failed to load the data.');
                }
            }); 
        }

现在上面的工作完全正常。但是我的经理希望我在那里有两个按钮。一个作为“保存”，另一个作为“提交”。单击它们中的每一个将执行不同的操作。但是这个插件只有一个“完成”按钮。它是通过插件的 Javascript 代码生成的。我能以某种方式使用 JQuery/Javascript 在那里多一个按钮，并针对它编写一些代码吗？

JS fiddle 示例:JS FIDDLE SAMPLE

图片 1:

我想要下面这样的东西图片 2:

示例示例: JS FIDDLE

Answer 1

使用在 Steps plugin documentation 中找到的 onStepChanged 事件...

你可以这样做:

$( window ).load(function() {
  $("#example-basic").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true,
    onFinishing: function () {
      alert("Hello");
    },
    onStepChanged:function (event, currentIndex, newIndex) {
      console.log("Step changed to: " + currentIndex);

      if(currentIndex == 2){
        console.log("ok");
        var saveA = $("<a>").attr("href","#").addClass("saveBtn").text("Save");
        var saveBtn = $("<li>").attr("aria-disabled",false).append(saveA);

        $(document).find(".actions ul").prepend(saveBtn)
      }else{
        $(".actions").find(".saveBtn").remove();
      }
      return true;
    },

  });


  // on Save button click
  $(".actions").on("click",".saveBtn",function(){
    alert("Saving!");
  });
});

Updated JSFiddle