0

我创建了一个自动完成表单。我按照这个简单的文档创建了一个按钮及其单击处理程序脚本。单击此按钮将切换表单的 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>
4

2 回答 2

0

我认为您在本教程中遗漏了一些要点：

  1. 您需要将所有组件放入容器 元素并将k-rtl 类应用于容器
  2. 你的js有问题，你没有id为speakerForm的元素

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

于 2015-10-27T02:16:38.903 回答
0

我已经更新了你的道场。

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

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

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

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

于 2015-10-27T09:56:32.283 回答