kendo ui对脚本的按需RTL支持

我创建了一个自动填充表单。我跟着this simple documentation与它的点击处理程序脚本一起创建一个按钮。点击这个按钮应该为表格提供RTL支持。kendo ui对脚本的按需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>

来源

2015-10-26 Basem

我认为你缺少从教程一些点：

你需要把所有的成分相对于A 容器元素并应用K- rtl类到容器
你有一个问题，你的js在哪里哟üdont有元素与ID speakerForm

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

我认为它的工作，如果你遵循它像这样

function createAutoComplete(){ 
 
    \t if($("#autocomplete").data("kendoAutoComplete") != null){ 
 
     \t $("#autocomplete").parent().remove(); 
 
     $("#container").append("<input id='autocomplete' type='text' />") 
 
    \t } 
 
    
 
    \t $("#autocomplete").kendoAutoComplete({ 
 
    \t \t \t dataSource: { 
 
     \t \t \t data: [{ 
 
     \t \t \t name: "Google" 
 
     \t \t \t \t }, { 
 
     \t \t \t name: "Bing" 
 
     \t \t \t }] 
 
    \t \t \t }, 
 
    \t \t \t dataTextField: "name", 
 
    \t \t \t }); 
 
} 
 
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-27 02:16:38

非常感谢您的时间和您的更正。应用您的代码后，单击该按钮可将表单方向更改为右侧。表格中的文字-google和bing-仍然是LTR指示的。如果您能进一步协助这一点，我们将非常感激。这是一个非常简单的示例演示：（http://dojo.telerik.com/UhuNu） – Basem

非常感谢您的更新3.它完美地工作，没有任何副作用。根据您的代码，我创建了一个非常简单的演示（http://dojo.telerik.com/AwomI），只添加了一个数据href模板来打开相同选项卡中的链接。当我将数据移至单独的json文件时，链接无效？可否请您协助[this]（http://fastrezult.com/kendo-autocomplete-test）？我应该开始这个新的“问题问题”吗？再次感谢您的解决方案。 – Basem

@Basem是的，你需要解释更多关于这个问题本身，所以如果我无法回答，别人也许能解决它 –

我已经更新您的道场。

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

但作为@machun曾表示你缺少这一过程的机制的一些元素。

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

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

来源

2015-10-27 09:56:32

非常感谢您的时间和您的更正。也感谢更新的道场。点击按钮将表格方向更改为右侧。表格中的文字-google和bing-仍然是LTR指示的。如果您能进一步协助这一点，我们将非常感激。下面是一个非常简单的示例演示：（http://dojo.telerik.com/UhuNu） – Basem

因此，您还需要google和bing来获得r-tl elgoog和gnib？ –

再次感谢您的关心。我不想要像elgoog和gnib这样的逆转字符。我希望将整个单词-google和bing-放在表单框的右侧，如下例所示：（http://dojo.telerik.com/UhuNu） – Basem

kendo ui对脚本的按需RTL支持

回答

相关问题