15

我对 jQuery 和 Web 开发比较陌生。

我正在使用 jQuery UI 选项卡来创建选项卡。

但是我希望仅在选择特定选项卡时才加载内容。

4

5 回答 5

28

好的，我假设当用户单击选项卡时，您打算通过 AJAX 动态获取内容。这实际上涉及两件事，甚至为您的选项卡设置 onclick并通过 ajax 获取数据。

设置 onclick 事件

给你的标签一个类，例如my_tab。假设当用户单击选项卡时，您希望触发 handle_tab_click()函数。这是将onclick事件绑定到my_tab选项卡的示例：

$(".my_tab").bind("click", handle_tab_click);

您的handle_tab_click()函数将获得一个事件参数，该参数能够为您提供有关触发事件的元素（在本例中为类名为my_tab的元素）的信息。

function (event) {
    if ($(event.target).hasClass("my_tab")) { /* handle tab click */ }
    if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ }
    if ($(event.target).hasClass("my_tab_3")) { /* ... */ }
}

在此处查看 JQuery事件文档以获取更多详细信息。

通过ajax获取数据

获取数据将要求您调用远程脚本，同时提供有关单击了哪个选项卡的信息（以便获取适当的信息）。在下面的代码片段中，我们调用远程脚本myscript.php，提供 HTTP GET 参数tab_clicked=my_tab并在脚本返回时调用函数tab_fetch_cb 。最后一个参数是返回的数据类型（由您选择）。

$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml")

由您来设计myscript.php来处理tab_clicked参数，获取适当的数据并将其返回（即，将其写回客户端）。

这是tab_fetch_cb的示例：

function tab_fetch_cb(data, status) {
    // populate your newly opened tab with information 
    // returned from myscript.php here
}

您可以在此处阅读有关 JQuery get函数的更多信息，并在此处阅读有关JQuery ajax 函数的更多信息

很抱歉，我无法在示例中更具体，但很多处理确实取决于您的任务。正如它已经指出的那样，您可能会寻找一些 JQuery 插件来解决您的问题。话虽如此，学习如何使用 JQuery 手动完成这些工作永远不会受到伤害。

祝你好运。

于 2009-02-02T07:16:09.670 回答
14

UI/Tabs 支持通过 Ajax 按需加载选项卡内容，请查看此示例。

于 2009-02-02T06:56:57.260 回答
1

通过 Ajax 加载内容增加了处理书签/浏览器后退按钮的复杂性。根据您的情况，您应该考虑使用整页请求加载新内容。处理书签/浏览器返回涉及使用在 URL 中添加锚信息。

此外，请查看LavaLamp以进行选项卡选择。它看起来很漂亮。

于 2009-02-02T06:59:56.847 回答
1

默认情况下，选项卡小部件将在 onClick 选项卡部分之间交换，但可以通过选项将事件更改为 onHover。通过在选项卡上设置 href，可以通过 Ajax 加载选项卡内容。

来源：http ://docs.jquery.com/UI/Tabs

于 2011-02-15T21:58:23.457 回答
0

如果你使用 Rails，你可以试试这个 gem bettertabs

它支持 ajax 选项卡。

于 2014-10-03T13:30:10.743 回答