如何在 JQuery 步中有两个按钮

Question

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

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

JS FIDDLE 样本：JS FIDDLE SAMPLE

图 1：

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

示例示例： JS FIDDLE

Answer 1

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

<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.');
            }
        }); 
});

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

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

的引用

使用该引用，您可以添加一个超链接，这样您的 "button" 就具有与插件相同的样式，如下所示：

$('#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();
    }
}

使用你的 fiddle，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/

Answer 2

使用在 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

如何在 JQuery 步中有两个按钮

How to have two buttons in JQuery Steps

javascript

jquery

jquery-steps