1

私のページは次のようになります。選択したタブのインデックスに応じて、[保存] ボタンの動作が異なる必要があります。

メニュー

これは jQuery コードです。

$("#btnSave").click(function () {
    var selectedTabIndex = $('#TabStrip').select().index()

    if (selectedTabIndex == 1) {
        InflowsSave();
    }

    if (selectedTabIndex == 2) {
        OutflowsSave();
    }

});

$('#TabStrip').select().index()Inspect Elements コンソール内で入力しました。どのタブが選択されていても、常に 2 を返します。

>>> $("#TabStrip").select().index()

2

$("#TabStrip").select()

<ul class="t-reset t-tabstrip-items">
    <div id="TabStrip-1" class="t-content">
    <div id="TabStrip-2" class="t-content t-state-active" style="display:block">
    <div id="TabStrip-3" class="t-content">
4

3 に答える 3

4

Telerik Extensions for ASP.NET MVCを使用している場合は、TabStripのクライアント側のイベント処理に関する次のドキュメントを参照してください。

TabStripクライアントAPIとイベント

JavaScriptからTelerikExtensionコントロールを選択する方法は次のとおりです。

意見：

<%= Html.Telerik().TabStrip()
        .Name("TabStrip")
        .Items(items =>{/*items definition */})
%>

JavaScript：

<script type="text/javascript">
        function getTabStrip(){

            var tabStrip = $("#TabStrip").data("tTabStrip");

            return tabStrip;

        }
</script>

シナリオでは、どのタブが選択されているかを知るために、タブストリップ選択イベントをリッスンし、どのタブストリップが選択されているかを示すフラグを設定することをお勧めします。クライアント側のイベントを処理するコードは次のとおりです。

意見：

<% 
  Html.Telerik().TabStrip()
  .Name("TabStrip")
  .Items(items =>{/*items definition */})
  .ClientEvents(events =>
    {
        events.OnSelect("Select");
        events.OnError("Error");
        events.OnContentLoad("ContentLoad");
        events.OnLoad(() =>
            {%>
                function(e) {
                /*TODO: actions when the control is loaded.*/
                // "this" is the tabstrip.
                }
            <%});
    })
  .Render(); %>

Javascript：

<script type="text/javascript">              
      function Select(e) {
              // "this" in this event handler will be the component.
              // the "e" is an object passed by the jQuery event trigger. 
      }
      function Error(e) {
        //code handling the error
      }
      function ContentLoad(e) {
        //code handling the content load
      }
</script>

ご覧のとおり、Select（）メソッドでどのタブが選択されているかを示すフラグを設定し、保存ボタンをクリックしてフラグを確認し、それに応じて行動します。

上部にあるドキュメントリンクを確認すると、コントロールによって公開されているすべてのクライアント側イベントとAPIがわかります。

これがあなたの質問に答えることを願っています

于 2012-11-01T06:07:51.977 に答える
3

答えは明らかではありませんでした。アクティブなタブには.t-item.t-state-activecss クラスがあります。したがって、jQuery を使用して検索する必要があります。これが将来誰かに役立つことを願っています。

var selectedTabIndex = $("#TabStrip > ul").find(".t-item.t-state-active").index();
于 2012-11-01T08:54:45.377 に答える