如何自定义kendo步？

Question

我想动态更改 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>

Answer 1

想法是在 activate 事件中捕获它。在 select 事件上处理它也可能有效。在事件处理程序上，获取向导实例，等待 Kendo 向导完成它的工作（更新 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元素是关键！我热切希望到现在为止，你已经明白了。

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

如何自定义kendo步？

How to customize kendo step?

javascript

jquery

wizard

kendo-ui

stepper