7

Kendo UI TabStrip コントロールで新しいタブを開く関数を作成しました。

function AddTab(targetUrl, title) {
        $("#tabstrip").data("kendoTabStrip").append({ text: title, contentUrl: targetUrl });
    }

これにより、タブが最後に追加されますが、選択されません。それを選択してアクティブなタブにするにはどうすればよいですか!? タブを作成するときに ID を設定してから select(..) 関数を呼び出す必要がありますか? それとも 1 行で実行できますか?

大量のリンクを自動的に生成する必要があり、それぞれが異なるタイトルと targetUrl を受け取ります。

4

4 に答える 4

8

これを試して

<div id="tabstrip">
  <ul>
    <li class="k-state-active">First Tab</li>
    <li>Second Tab</li>
  </ul>
  <div>
    First text
  </div>
  <div>
    Second text
  </div>
</div>
<input type="button" value="Add Tab" onclick="AddTab('google', 'http://google.com')" />


<script>
function AddTab(targetUrl, title) {
  var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
  tabStrip.append({ text: title, contentUrl: targetUrl, content: "Your content" });
  tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
</script>

参考リンク

于 2013-02-19T12:06:00.680 に答える
3

このようにしてみてください。//ドキュメントからKendoUiタブストリップ

var tabStrip = $("#tabStrip").data("kendoTabStrip");
tabStrip.insertAfter(
    { text: "New Tab" },
    tabstrip.tabGroup.children("li:last")
);

それを選択するため

$(document).ready(function(){
    var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    tabstrip.select(yourIndexoftheTab);
});
于 2013-02-19T11:39:01.747 に答える
0

新しいタブを追加して選択するコード:

  var tabs = $('#tabs').data('kendoTabStrip');
  var tabNum = tabs.items().length;
  var closeButton = 
    "<span unselectable='on' class='k-icon k-delete'>delete</span>";

  tabs.append( {
    encoded: false, //allow HTML
    text: team.name + ' ' + closeButton,
    contentUrl: 'teamschedule.html'
  });
  // make new tab the active tab
  tabs.select(tabNum);

  var tab = $(tabs.items()[tabNum]);
  //attach delete handler to the delete icon
  tab.on('click','.k-delete', tab, $scope.removeTab);

タブを削除して前のタブを選択するコードは次のとおりです (削除されたタブが選択されている場合)。

$scope.removeTab = function(e) {
  var tabs = $('#tabs').data('kendoTabStrip');
  if (e.data.hasClass('k-state-active')) {
    //select previous tab if the active tab is removed
    tabs.select(e.data.prev());
  }
  tabs.remove(e.data);
}

私は角度を使用しているため、$scope を使用しています。

于 2014-10-14T20:31:03.587 に答える