jquery-ui – jQuery Tabs – 仅当单击时加载内容

我比较新的jQuery和web开发.

我使用jQuery UI标签来创建选项卡.

但是,只有当我选择特定标签时,我才想要加载内容.

解决方法

好的,我假设当用户点击一个标签时,你打算通过 AJAX动态地获取内容.这真的涉及两件事情,即使您的标签设置一个单击并通过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事件文档here.

通过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 function here和JQuery ajax函数here

对不起,我的例子不能更具体,但是很多处理的确依赖于你的任务.正如它已经被指出的那样,你可能会看一些JQuery插件来解决你的问题.话虽如此,它并没有伤害学习如何手动这样做与JQuery.

祝你好运.

原文地址：https://www.jb51.cc/jquery/179979.html