如何使 Kendo 响应

Question

我是 Jquery 的新手。如果有任何评论，我将不胜感激。

我想在 Jquery 中集成 windows 大小的 KENDO 向导。我想根据 windows 大小绑定 contentPosition 值。但是，它 return 不是正确的值。如何将return的String值绑定到正确的地方？提前致谢。

   var navValue = "";
    $(window).resize(function() { 
        if($(window).width() > 768) 
         {   
            return navValue ="right";  
         }   
    });

    $("#wizard").kendoWizard({
        pager: true, 
        contentPosition : navValue.toString()  , //default "bottom" // I would like to bind this value form the function

        done: function (e) {
            e.originalEvent.preventDefault();
            kendo.alert("Thank you for registering! Registration details will be sent to your email.");
        },
        steps: [
            {
                title: "Account Details",
                buttons: ["next"],
                form: {
                    orientation: "vertical",
                    formData: { 
                     .........

Answer 1

我推断您的实际问题是“如何使 Kendo 向导响应”。我猜想当 window 调整大小时，当 window 宽度大于 768 时，您会希望步进器位于左侧。

尝试了几件事。首先，操纵向导 CSS 几乎可以，但不完全是。试过 setOptions 但没有效果。所以我最终在 window 调整大小时销毁并重新创建了向导小部件。在 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"]
    }).data('kendoWizard');
    
    $(window).resize(function() { 
        if($(window).width() > 768) {       
            if (wizard.options.contentPosition != "right") {
                var options = wizard.options;
                var step = 0;
                var steps = options.stepper.steps;
                for (let i = 0; i < steps.length; i++) {
                    var step = steps[i];
                    if (step.selected) {
                        step = i;
                        break;
                    }
                }
                options.contentPosition = "right";
                wizard.destroy();
                $wizard.empty();
                $wizard.removeAttr('class');
                $wizard.removeAttr('data-role');
                $wizard.removeAttr('role');
                
                wizard = $wizard.kendoWizard(options).data('kendoWizard');
                wizard.select(step);
            }
        } else {            
            if (wizard.options.contentPosition != "bottom") {
                var options = wizard.options;
                var step = 0;
                var steps = options.stepper.steps;
                for (let i = 0; i < steps.length; i++) {
                    var step = steps[i];
                    if (step.selected) {
                        step = i;
                        break;
                    }
                }
                options.contentPosition = "bottom";
                wizard.destroy();
                $wizard.empty();
                $wizard.removeAttr('class');
                $wizard.removeAttr('data-role');
                $wizard.removeAttr('role');
                
                wizard = $wizard.kendoWizard(options).data('kendoWizard');
                wizard.select(step);
            }
        }
    });
</script>
</body>

如何使 Kendo 响应

how to make the Kendo responsive

arrays

jquery

resize

kendo-ui