如何在我的javascript Ajax中使用Zurb Foundation 4 Sections（标签）？

Question

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

我的javascript方法

a）每当选择Tab时都需要通知。

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

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

Answer 1

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

这是Section / Tabs定义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传递Tab面板或部分来传递点击事件，如下所示：

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

注意疑难杂症 ：加载页面的第一次，第一个选项卡将被默认显示和你的第一个选项卡处理程序不会被调用; 如果您计划为选项卡1（此示例中的面板1）加载ajax数据，则无法执行此操作。

Answer 2

对于使用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。 我将很快尝试使用表单和回发，并在需要时更新此答案。

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