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 と剣道オートコンプリート ウィジェットの動作を観察しました。その結果、最初にウィジェットを作成してから k-rtl クラスを追加すると、提案は左側に残ります。必要なのは、最初に k-rtl クラスを持つコンテナーで、次にウィジェットを初期化することです。4.コードを更新して、ボタンをクリックするたびに#autocomplete divがその親（スパンである剣道オートコンプリートの結果）とともに削除され、新しい要素を追加して剣道オートコンプリートウィジェットを再初期化するようにしました

このようにフォローすればうまくいくと思います

 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 に答える