如何在我的javascript Ajax中使用Zurb Foundation 4 Sections（标签）？ [英] How do I use Zurb Foundation 4 Sections (tabs) with my javascript Ajax?

问题描述

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

I am using the Zurb Foundation 4.1.5 for my application and I am trying to use Zurb Section Javascript to manage "tabs" on the page. However, the data in the tabs on my page is dynamic and loaded by Ajax calls. I need to know how to render or draw this data on the sections content.

我的javascript方法

My javascript methods

a ）每当选择一个标签时都需要通知。

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

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

b) need to be able to programmatically display or select the active tab

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

c) dynamically set the HTML content for each Tab: I have a moustache js template that will be combined with the result of jquery Ajax Call back to set the html for the tab.

推荐答案

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

Documenting my solution as I could not find this approach documented elsewhere.

这是Section /标签定义html

This was the Section / Tabs definition 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事件处理程序

The following code is use to add javascript event handlers for tab selection

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
        });

    });

另请注意Tab面板或您可以通过javascript传递部分，例如：

Also note that Tab panels or sections can be opened by your javascript passing a click event like so :

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

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

Note the Gotcha : The first time the page is loaded, the first tab will be displayed by default and your handler for the first tab will not be called; If you are planning on loading ajax data for tab 1 (panel 1 in this example), you can not do it .

这篇关于如何在我的javascript Ajax中使用Zurb Foundation 4 Sections（标签）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！