jQuery Accordion / Tabs - 在加载内容时调用不同的函数

Question

I have the following markup: 我有以下标记：

<body>
    <div id="tabs" style="float: left">
        <ul>
            <li><a href="ajax/question_0.html" title="Question 1"><span>Question 1</span></a></li>
            <li><a href="ajax/question_1.html" title="Question 2"><span>Question 2</span></a></li>
            <li><a href="ajax/question_2.html" title="Question 3"><span>Question 3</span></a></li>
            <li><a href="ajax/question_3.html" title="Question 4"><span>Question 4</span></a></li>
            <li><a href="ajax/question_4.html" title="Question 5"><span>Question 5</span></a></li>
            <li><a href="ajax/question_5.html" title="Question 6"><span>Question 6</span></a></li>
        </ul>
        <div id="dynamicContent">
        </div>
    </div>
    <div class="demo-description">
        <p>Click tabs to see answers to Questions</p>
    </div>
</body>

I would like to utilize an accordion or the tabs plugin from the UI. 我想使用UI中的手风琴或标签插件。 Upon completion of the load event, I'd like to call a JavaScript function, but a different function for each tab -- almost like calling onDocumentReady for a page. 完成加载事件后，我想调用一个JavaScript函数，但每个选项卡都有一个不同的函数 - 就像调用onDocumentReady一样。

I have the following JavaScript: 我有以下JavaScript：

$(function() {
    $('#tabs').tabs().bind('tabsselect', function(event, ui) {
        console.log("Loading: ajax/question_" + ui.index + ".html");
        return true;    //Ensure that the tab gets selected
    });
);

That's properly loading the Ajax file and all, but whenever I attempt to do something such as evaluating a statement in the JS, it seems to be ignored. 这是正确加载Ajax文件和所有，但每当我尝试做一些事情，如评估JS中的语句，它似乎被忽略。 Is there any way I can do this, so that once the file is loaded my function is called -- needs to be a different function for each tab. 有什么方法可以做到这一点，所以一旦文件加载我的函数被调用 - 需要是每个选项卡的不同功能。

Edit below: 编辑如下：

Switching does in fact alleviate my problem of calling a different function. 事实上，切换确实减轻了我调用不同功能的问题。 I wasn't thinking... 我没在想......

However, what I'm after is having an empty div in each of these tabs which is used for logging (in case I'm in a web environment without Firebug). 但是，我所追求的是在每个选项卡中都有一个空div用于记录（如果我在没有Firebug的Web环境中）。

I have the following function: 我有以下功能：

if (typeof console === 'undefined') {
    var console = { };
    console.log = function(msg) {
        $('#dynamicContent').append(createElement('p', msg));
    };
}

Which is supposed to log messages to a div which is loaded in each of the fragments, but none of the logging is done when a new tab is loaded. 应该将消息记录到每个片段中加载的div，但是在加载新选项卡时不会记录任何日志。

My tabs are setup with the following: 我的标签设置如下：

$('#tabs').tabs({

    select: function(event, ui) {
        log.debug("Loading: ajax/question_" + ui.index + ".html");
    },

    show: function(event, ui) {
        log.debug("Finished Loading: ajax/question_" + ui.index + ".html");
    }
});

Answer 1

I'm not exactly what you're after, but there's a tabsload event you can use, like this: 我不完全你后是什么，但有一个tabsload事件，您可以使用，就像这样：

$(function() {
  $('#tabs').tabs().bind('tabsselect', function(event, ui) {
    console.log("Loading: ajax/question_" + ui.index + ".html");
    return true;    //Ensure that the tab gets selected
  }).bind('tabsload', function(event, ui) {
    switch(ui.index) {
      case 0:
        //do something for first tab...
        break;
      case 1:
        //do something for second tab...
        break;
      //etc...
    }
  });
);

I used a switch statement for your "needs to be a different function for each tab", but whatever you need to do, call an external function, etc, you can do that here. 我使用switch语句来表示“需要为每个选项卡提供不同的功能”，但无论你需要做什么，调用外部函数等，你都可以在这里做。 You can use ui.tab for the anchor element if you need to do a switch on the href for example, whatever fits best. 如果你需要在href进行切换，你可以使用ui.tab作为锚元素，无论什么最合适。

jQuery Accordion / Tabs - 在加载内容时调用不同的函数

问题描述

1 个解决方案

解决方案1
1 2010-05-26 21:47:52

jQuery Accordion / Tabs - 在加载内容时调用不同的函数

问题描述

1 个解决方案

解决方案1 1 2010-05-26 21:47:52

解决方案1
1 2010-05-26 21:47:52