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支持

回答

相關問題