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 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 元素是关键！我热切希望你现在明白了。

如何自定义剑道步骤？

1 个答案: