如何在JQuery中有两个按钮步骤

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

不管使用的步骤插件，您可以添加保存b utton的最后一步，并且绑定click处理就像你使用任何正常的按钮：

<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>这是<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/