如何在 JQuery Steps 中有两个按钮

Question

我真的需要一些帮助。所以我使用了一个Jquery Steps PlugIn。现在在这个插件中，当我们转到last tab 时，它有一个按钮名称为“完成”，当点击调用"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.');
                }
            }); 
        }

现在上面的工作非常好。但我的经理希望我在那里有两个按钮。一个作为“保存”，另一个作为“提交”。单击它们中的每一个都会执行不同的操作。但是这个插件只有一个“完成”按钮。它是通过 PlugIn 的 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

Answer 2

无论使用步骤插件，您都可以在最后一步添加一个保存按钮，并像使用任何普通按钮一样绑定一个点击处理程序：

<input id='btnSave' name='btnSave' value='Save' type='button'>

在你的 javascript 中：

$('#btnSave').click(function() {
    $.ajax({
            type: 'POST',
            url: '/Settings/SavePrefix',
            data: { newPrefix: inputBoxPrefix, prefixLoadedFromDB: loadedPrefix },
            success: function (data) {
                  // do some stuff here
                }
            },
            error: function () {
                DisplayError('Failed to save the data.');
            }
        }); 
});

您还可以根据需要注入按钮。

使用带有#steps-uid-8 的标签内的默认插件，您可以获得带有$('#steps-uid-8 a').last() 的finish 元素；它嵌套在 <li> 内，而 <ul> 内则您可以获得对 ul $('#steps-uid-8 a').last(),parent().parent() 的引用

使用该引用，您可以添加一个超链接，以便您的“按钮”具有与插件相同的样式，如下所示：

$('#steps-uid-8 a').last().parent().parent().prepend("<li><a id='btnSave' name='btnSave'>Save</a></li>");

如果需要，您还可以在设置中添加一个功能，仅在最后一步显示“保存”按钮

var numberOfSteps=3,// change as needed

var settings = {
    onStepChanged: function (event, currentIndex, priorIndex) 
    { 
    if(currentIndex==numberOfSteps) $('#btnSave').show();
    else $('#btnSave').hide();
    }
}

使用你的小提琴，onload Javascript 被简单地改变了。

<script>
      function saveMe() {
        alert('Saving');
      }
      $(window).load(function() {
        var lastStep = 2;
        $("#example-basic").steps({
          headerTag: "h3",
          bodyTag: "section",
          transitionEffect: "slideLeft",
          onStepChanged: function(event, currentIndex, priorIndex) {
            //console.log(currentIndex);
            if (currentIndex == lastStep) $('#btnSave').show();
            else $('#btnSave').hide();
          },
          autoFocus: true,
          onFinishing: function() {
            alert("Hello");
          },
        }).find('a')
        .last().parent().parent()
        .prepend("<li><a style='display:none' href='#save' id='btnSave' name='btnSave' onclick='saveMe()'>Save</a></li>");
      });
    </script>

这是一个工作副本：https://jsfiddle.net/rwh64ja8/