3

我正在为我的应用程序使用 Zurb Foundation 4.1.5，并且我正在尝试使用 Zurb Section Javascript 来管理页面上的“选项卡”。但是，我页面上选项卡中的数据是动态的，并且由 Ajax 调用加载。我需要知道如何在部分内容上呈现或绘制这些数据。

我的 javascript 方法

a) need to be notified whenever a Tab is selected.

b) 需要能够以编程方式显示或选择活动选项卡

c) 为每个选项卡动态设置 HTML 内容：我有一个小胡子 js 模板，它将结合 jquery Ajax 回调的结果来设置选项卡的 html。

4

2 回答 2

1

记录我的解决方案，因为我在其他地方找不到这种方法。

这是部分/选项卡定义html

 <div class="section-container auto" data-section>
            <section>
                <p class="title" data-section-title><a href="#p1">Section 1</a></p>
                <div class="content" data-section-content>
                    <p>Content of section 1.</p>
                </div>
            </section>
            <section>
                <p class="title" data-section-title><a href="#p2">Section 2</a></p>
                <div class="content" data-section-content>
                    <p>Content of section 2.</p>
                </div>
            </section>
        </div>

以下代码用于添加用于选项卡选择的 javascript 事件处理程序

script>
    $(document).foundation();
</script>
<script type="text/javascript">

    $(document).ready(function() {
            $("a[href='#p1']").bind("click", function(){
                alert(" panel 1"); //panel 1 is about to be opened by user
        });

        $("a[href='#p2']").bind("click", function(){
            alert(" panel 2"); // panel 2 is about to be opened
        });

    });

另请注意，标签面板或部分可以通过您的 javascript 传递点击事件来打开，如下所示：

  $("a[href='#p2']").click(); // this open tab p2

注意问题：第一次加载页面时，默认情况下会显示第一个选项卡，并且不会调用第一个选项卡的处理程序；如果您计划为选项卡 1（本示例中的面板 1）加载 ajax 数据，则不能这样做。

于 2013-05-07T21:15:18.143 回答
0

对于那些使用 Foundation 5 的人来说，这对我很有效：

HTML：

<dl class="tabs" id="clientTabs" data-tab>
    <dd class="active">
        <a id="GeneralInformationTab" href="#GeneralInformationTab">
            General Information
        </a>
    </dd>
    <dd>
        <a id="ContactDetailsTab" href="#ContactDetailsTab">
            Contact Details
        </a>
    </dd>
</dl>
<div class="tabs-content">
    <div class="content active" id="tabContent">
        <p>First panel content goes here...</p>
    </div>
</div>

JS：

<script>
    $('#clientTabs').on('toggled', function (event, tab) {
        var currentTab = tab.context.id;        
        $('#tabContent').empty();
        $('#tabContent').load('/Home/' + currentTab);
    });
</script>

控制器：

public ActionResult GeneralInformationTab()
{
    return PartialView("Partials/GeneralInformation");
}

public ActionResult ContactDetailsTab()
{
    return PartialView("Partials/ContactDetails");
}

它动态加载每个选项卡的内容，在 load() 中构建一个请求 URL，获取部分视图。我很快就会用表单和回发来尝试这个，如果需要的话会更新这个答案。

这对我来说很新，所以我接受它可能不是一个完美的解决方案。请通过评论提出任何改进建议，我会更新我的答案。

于 2014-02-25T16:23:29.263 回答