jQuery选项卡 - 仅在单击时加载内容

Question

我对jQuery和web开发相对较新.

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

但我希望只有在选择特定选项卡时才会加载内容.

Answer 1

好吧,我假设当用户点击一个标签时,你打算通过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的获取功能在这里,和JQuery AJAX功能在这里

对不起,我的示例中没有更具体,但很多处理实际上取决于您的任务.看起来已经有人指出,你可能会看一些JQuery插件来解决你的问题.话虽这么说,学习如何用JQuery手动完成这些东西永远不会伤害.

祝好运.

Answer 2

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