kendo ui按需RTL支持和脚本

Question

我创建了一个自动完成表格。 我按照这个简单的文档来创建一个按钮及其单击处理程序脚本。 单击此按钮将切换该表单的RTL支持。

我有个问题。 当我单击按钮时，它不会切换表单的RTL支持。

<body>

<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
<script>
$('#toggleRTL').on('click', function(event) {
    var form = $('#speakerForm');
    if (form.hasClass('k-rtl')) {
        form.removeClass('k-rtl')
    } else {
        form.addClass('k-rtl');
    }
})
</script>

<input id="autocomplete" type="text" />
<script>
    $("#autocomplete").kendoAutoComplete({
        dataSource: {
            data: [
            {name: "Google"}, 
            {name: "Bing"}
            ]
                     },
        dataTextField: "name",
     })
</script>

</body>

Answer 1

我认为您缺少本教程的要点：

您需要将所有组件放入容器元素并将k-rtl类应用于容器
您在js上遇到问题，其中没有ID为SpeakerForm的元素

更新3。作为您的评论，我观察到k-rtl和kendo自动完成小部件的行为，结果是，如果我们先创建小部件然后添加k-rtl clas，则建议仍然在左侧。 因此，我们需要的是首先具有k-rtl类的容器，然后初始化小部件。 4.我更新了代码，以便每次您单击按钮时，#autocomplete div都将与其父级一起删除（来自kendo autocomplete的结果，这是一个跨度），然后追加新元素并重新初始化kendo autocompelete小部件

我认为，如果您遵循这样的方法，它会起作用

  function createAutoComplete(){ if($("#autocomplete").data("kendoAutoComplete") != null){ $("#autocomplete").parent().remove(); $("#container").append("<input id='autocomplete' type='text' />") } $("#autocomplete").kendoAutoComplete({ dataSource: { data: [{ name: "Google" }, { name: "Bing" }] }, dataTextField: "name", }); } createAutoComplete(); $('#toggleRTL').on('click', function(event) { var form = $('#container'); console.log(form); if (form.hasClass('k-rtl')) { console.log("test1"); form.removeClass('k-rtl') } else { console.log("test2"); form.addClass('k-rtl'); } createAutoComplete(); })

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script> <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script> </head> <body> <div id="container"> <input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" /> <input id="autocomplete" type="text" /> </div> </body> </html>

Answer 2

我已经更新了您的dojo。

http://dojo.telerik.com/AfeNi/4

但是正如@machun所说，您缺少此过程机制的某些要素。

我添加了缺少的表单元素SpeakerForm，然后添加了一些其他的console.log（）语句来显示正在执行的操作。

如果您需要更多信息，请告诉我。

kendo ui按需RTL支持和脚本

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-10-27 02:16:38

解决方案2
0 2015-10-27 09:56:32

kendo ui按需RTL支持和脚本

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-10-27 02:16:38

解决方案2 0 2015-10-27 09:56:32

解决方案1
0 已采纳 2015-10-27 02:16:38

解决方案2
0 2015-10-27 09:56:32