创建后显示新的 Jquery UI 选项卡

Posted 2023-05-08

【中文标题】创建后显示新的 Jquery UI 选项卡

【英文标题】：Show new Jquery UI Tab after creating it

【发布时间】：2019-01-07 00:56:22

【问题描述】：

当用户添加新选项卡时，我正在尝试让 jQuery UI 选项卡在浏览器中显示（打开与选项卡关联的面板）。目前这就是我的标签添加功能的样子。

let tabs = $("#tabs")
        .tabs(
            heightStyle: "content",
        )
        .on("click", ".delete-tab", function () 
            let panelName = $(this).closest("li").children('a').text();
            $('#deleteLocationModal').addClass('open');
            $('.locationNameHere').text(panelName);
            tabDelete = $(this).closest("li");
            deleteLocationNum = $(this).attr('data-locNum');
            console.log(deleteLocationNum);
        );

let locationNum = 1; //Tracks the number of tabs created, NOT the number of tabs on the screen

/**
 * Create a new tab
 * Create a new panel
 */
$("#addTab").on("click", function (evt) 
    /*addTab();*/
    locationNum++;
    let newTab = (generateTab(locationNum));
    $("#tabs").find("#addTab").before(newTab);
    let newPanel = (generatePanel(locationNum));
    $("#tabs").append(newPanel);
    $('#tabs').tabs("refresh");
    evt.preventDefault();
);

function generateTab(num) 
        return '<li class="tab"><a href="#location_' + num + '">New Location</a> <span data-locNum="' + num + '" class="delete-tab">&times;</span></li>';

    

我曾尝试查看文档，但并不清楚在创建任何选项卡时显示选项卡的命令是什么。

【问题讨论】：

generateTab函数代码在哪里？你可以给你的 html 做广告吗？

让我补充一下。

【参考方案1】：

您可以使用 jQuery 选择器而不是实际的 DOM 元素或操作选项卡对象来将某个选项卡设置为活动选项卡。

使用 jQuery 选择器：

function generateTab() 
  return $('<li>Some Tab</li>');

然后

$tab = generateTab();
$tab.someFocusFunction();

直接修改标签对象：

$('#tabs').tabs( 
  active: $tab.attr('id');
);

【讨论】：

before() 添加了我认为的标签

当我点击它时，它似乎正在添加标签并工作。

您对before 函数的看法是正确的。编辑答案以不再包含注释。

唯一的问题是，因为它是为我的代码编写的，所以选项卡本身是一个字符串，直到它与 BEFORE 一起放置。它实际上并不包含对 before() 命令创建的对象的实际引用。

我不认为这真的有效，因为我什至用触发器模拟了一次点击（'click'）并制作了一个 top.alert（'tab was clicked'）。它会以某种方式到达那个锚点，而不是显示对它的重写。