kendo ui 脚本的按需 RTL 支持

Question

我创建了一个自动完成表单。我按照 this simple documentation 创建了一个按钮及其点击处理程序脚本。单击此按钮将切换窗体的 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 class到容器
你的 js 有问题，你没有带有 id speakerForm

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

我认为如果你像这样遵循它是有效的

 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

我已经更新了你的道场。

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

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

我添加了缺少的表单元素 speakerForm，然后添加了一些额外的 console.log() 语句来显示正在执行的操作。

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

kendo ui 脚本的按需 RTL 支持

kendo ui on-demand RTL support with script

javascript

jquery

kendo-ui

kendo-autocomplete