Question

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

现在上面的工作非常好。但我的经理要我在那里有两个按钮。一个＆＃34; Save＆＃34;和另一个＆＃34;提交＆＃34;。点击它们中的每一个都会执行不同的操作。但是这个插件只有一个＆＃34; Finish＆＃34;按钮。它是通过PlugIn的Javascript代码生成的。我可以以某种方式使用JQuery / Javascript在那里再添一个按钮，然后针对它编写一些代码。

JS FIDDLE SAMPLE：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()的默认插件，您可以使用<li>获取结束元素;它嵌套在<ul>内的$('#steps-uid-8 a').last(),parent().parent()内，因此您可以获得对ul $('#steps-uid-8 a').last().parent().parent().prepend("<li><a id='btnSave' name='btnSave'>Save</a></li>");

的引用

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

var numberOfSteps=3,// change as needed

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

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

<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>

使用你的小提琴，onload Javascript只是改变了。

class InquiryViewSet(viewsets.ModelViewSet):
    queryset = Inquiry.objects.all()
    serializer_class = InquirySerializer

    def get_serializer(self, *args, **kwargs):
        serializer_class = self.get_serializer_class()
        context = self.get_serializer_context()
        return serializer_class(*args, company_id=self.kwargs['company_id'], context=context, **kwargs)

以下是工作副本：https://jsfiddle.net/rwh64ja8/

如何在JQuery Steps中有两个按钮

2 个答案: