如何自定义剑道步法？答案

【问题标题】：How to customize kendo step?如何自定义剑道步法？
【发布时间】：2021-06-09 04:35:04
【问题描述】：

我想动态更改 KENDO UI 向导步骤。例如，每一步更改图标背景颜色和标题。我试图搜索文档，但找不到正确的答案。如何在每个步骤中添加 Id 或属性？我已尝试更改标题属性，但无法正常工作。

有没有办法自定义向导以动态步进？我将不胜感激任何帮助。谢谢。

   <div id="wizard"></div>

  <script>
$("#wizard").kendoWizard({
  steps: [{
    title: "ONE",

    content: "Step 1 Content"

  }, {  
    
    title: kendo.template($("#stepTemplate").html()),  
    error: true,
    content: "Step 2 Content" 
  },{
    title: "THREE",
    content: "Step 3 Content"
  }]
});
 </script>

 <script id="stepTemplate" type="text/x-kendo-template">
    <div>
        <span><strong>TWO</strong></span> 
   </div>
 </script>

【问题讨论】：

标签： javascript jquery kendo-ui wizard stepper

【解决方案1】：

我们的想法是在activate 事件中捕获它。在select 事件上处理它也可能有效。在事件处理程序上，获取向导实例，等待 Kendo Wizard 完成其工作（更新 HTML） - 因此是 setTimeout，然后找到焦点列表项并随心所欲。下面的示例更改了背景颜色。在 Telerik DOJO 上试一试。这应该可以帮助您入门。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="wizard"></div>

<script>
    var $wizard = $("#wizard");
    var wizard = $wizard.kendoWizard({
        contentPosition: "right",
        steps: ["Initial step", "Second step", "Third step"],
        activate: function(e) {
            var wizard = e.sender;
            setTimeout(function() {
                wizard.element.find('li.k-step').each(function(){
                    $(this).css("background-color", "initial");
                })
                var $li = wizard.element.find('li.k-step-focus');
                $li.css("background-color", "blue");
            }, 100);
        },
    }).data('kendoWizard');
    
    
</script>
</body>

要更改步骤的标签，请在$li.css("background-color", "blue");之后插入以下代码

var step = wizard.activeStep();
var $label = $li.find('span.k-step-text');
switch (step.options.index) {
    case 1:
        $label.text('Two');
        break;
    case 2:
        $label.text('Three');
        break;
    default:
        $label.text('One');
        break;
}

li 元素是关键！我热切希望到现在你已经明白了。

【讨论】：

感谢您的回答，不过，我只需要更改步数指示器。不是 li 元素。谢谢。
就像我说的。这个想法是在activate 事件中捕捉到它。在事件处理程序上，获取向导实例，等待 Kendo 向导完成其工作（更新 HTML） - 因此 setTimeout，然后找到焦点列表项并按照您的意愿进行操作。示例代码是您解决问题的起点。

【解决方案2】：

<div id="wizard"></div>

<script type="text/javascript">
    function onActivate(e) {
        var as = e.sender.activeStep();
        var jQueryElement = $(as.element).find(".k-wizard-content");
        const asIndex = as.options.index;
        jQueryElement.append("<h3> Mãe fez cuca no index " + asIndex +  " </h3>");
    }

    $(document).ready(function() {
        var prodWizard = $("#wizard").kendoWizard({
            steps : [ {
                title : "Passo 1",
                buttons : ["previous", "next"]
            }, {
                title : "Passo 2",
                buttons : ["previous", "next"]
            } ],
            
            activate : onActivate
        });
        onActivate({
            sender : prodWizard.data('kendoWizard')
        });
    });
</script>

【讨论】：