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类应用于容器
你的js上有一个问题，你没有id speakerForm

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

如果您像这样关注它，我认为它正在发挥作用

＆＃13;

 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();
   
 })

＆＃13;

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

＆＃13;

Answer 2

我更新了你的道场。

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

但正如@machun所说，你遗漏了这个过程的一些机制元素。

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

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

kendo ui on-demand RTL支持脚本

2 个答案: