如何在JQuery步骤中具有两个按钮 [英] How to have two buttons in JQuery Steps

问题描述

我真的需要这里的帮助.因此，我正在使用一个 Jquery步骤插件.现在，在该插件中，当我们转到last tab时，单击该按钮时，其按钮名称为完成"，调用"onFinishing"方法.

I really need some help here. So I am using one Jquery Steps PlugIn. Now in this PlugIn when we go to the last tab it has a button name as "Finish" when clicked calls "onFinishing" Method.

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在此处再有一个按钮，并针对它编写一些代码.

Now above works perfectly fine. But my manager wants me to have two button there. One as "Save" and another as "Submit". And clicking on each of them will perform a different action. But this plugin has only one "Finish" button. And it is getting generated via PlugIn's Javascript code. Can I somehow use JQuery/Javascript to have one more button there, and write some code against it.

JS样本: JS样本

图片1:

我想要下面类似的东西 图片2:

I want something like below Image 2:

示例: JS场

推荐答案

使用onStepChanged事件"rel =" nofollow noreferrer>步骤插件文档 ...

Using the onStepChanged event found in the Steps plugin documentation...

您可以这样做:

$( 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!");
  });
});

更新了JSFiddle

这篇关于如何在JQuery步骤中具有两个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！