kendo ui on-demand RTL支持脚本 [英] kendo ui on-demand RTL support with script
问题描述
我创建了一个自动填充表单。我按照这个简单的文档创建了一个按钮及其点击处理程序脚本单击此按钮将切换表单的RTL支持。
I created an Autocomplete form. I followed this simple documentation to create a button together with its click handler script. Clicking this button shall toggle RTL support for the form.
我遇到了问题。当我单击该按钮时，它不会切换表单的RTL支持。
I have a problem. When I click the button, it does not toggle RTL support for the form.
<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>
推荐答案
我认为你在教程中遗漏了一些内容：
I think you missing some point from the tutorial :
- 您需要将所有组件放入容器 元素并应用 k-rtl class 到容器
- 你的js上有一个问题，你没有id speakerForm
- you need to put all of your component to a container element and apply the k-rtl class to the container
- you have a problem on your js where you dont have element with id speakerForm
UPDATE
3.作为你的评论i，我观察了k-rtl和kendo自动完成小部件的行为，结果是如果我们首先创建小部件然后添加k-rtl clas，则建议仍然在左侧。那么我们需要的是首先拥有k-rtl类的容器然后初始化小部件。
4.我更新了我的代码，这样每次单击按钮时，＃autoCross div将被删除，其父级（来自kendo autocomplete的结果是一个span）然后追加新元素并重新初始化kendo autocompelete小部件
UPDATE 3. as your comment i, i observe the behavior of the k-rtl and kendo autocomplete widget and the result is the suggestion will be still on the left side if we create the widget first then adding the k-rtl clas. So what do we need is the container having the k-rtl class first then initializing the widget. 4. i updated my code so that every time you click the button the #autocomplete div will be removed with its parent( result from kendo autocomplete which is a span) then append new element and re-initializing the kendo autocompelete widget
我认为如果您按照这样做，它会起作用
I think it's working if you follow it like this
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>
这篇关于kendo ui on-demand RTL支持脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
