2

目标： 如何在初始化后更改 ui 选项卡的内容。

请参阅下面的代码。 $tabs.find(content-1) 等之后的可能内容

  1. 实际上，我的选项卡具有基于 json 请求的内容，然后将根据要求（图形、表格等）对其进行解析和显示。
  2. 我不能使用
  3. 用于 ajax 内容的 ui 文档中描述的 tab1 方法，因为我需要所有选项卡分别具有数据并同时加载。Ajax 方法不断用其他选项卡数据替换一个选项卡数据，这不是我的要求。

所以理想情况下，

  1. 选项卡应以“正在加载..”消息初始化。
  2. 然后 Afetr 我检测到它的 init 事件，我应该说 3 个不同的 ajaxcalls ，处理数据，无论哪个完成，“正在加载..”消息应该替换为它的内容。

我的 JSFIDDLE

HTML：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab1</a>
        </li>
        <li><a href="#tabs-2">tab2</a>
        </li>
        <li><a href="#tabs-3">tab3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>loading...</p>
    </div>
    <div id="tabs-2">
        <p>loading...</p>
    </div>
    <div id="tabs-3">
        <p>loading...</p>
    </div>
</div>

JS

$tabs = $('#tabs').tabs({
    cache: false,
});
//
$tabs.do something here
$tab. detect evet if tabs have initialized ..
then send ajax requests and append to tabs content area ..
4

1 回答 1

1

工作演示

尝试这个

我想这就是你需要的

$(document).ready(function () {

    $tabs = $('#tabs').tabs({
        cache: false,
    });
    if ($('#tabs').hasClass('ui-tabs')) { // check if tabs initilized
        $('.tab').each(function () {
            var tab = $(this);
            $.ajax({
                url: '/echo/html/',
                success: function (data) {
                    tab.html("success"); // for demo
                }

            });

        });
    }
});
于 2013-09-26T07:33:05.763 回答