jQWidgets jqxNavBar close() 方法介绍

概述

jQWidgets jqxNavBar 是一个专用于网页导航条设计的 Javascript 组件库，其中包含了许多方法用于控制导航条的行为。其中，close() 方法用于关闭导航条中的选项卡或子菜单。

语法

$("#jqxNavBar").jqxNavBar('close', item);

其中，

• jqxNavBar 表示导航条实例的 ID，可以是任意有效的选择器；
• item 是一个 Number 或 JSON 对象，表示要关闭的选项卡或菜单项。

参数

• item：

  • 类型：Number 或 JSON 对象；
  • 描述：要关闭的选项卡或菜单项。如果类型为 Number，则表示要关闭的选项卡的序号，从 0 开始计数；如果类型为 JSON 对象，则表示要关闭的菜单项的键名和键值，例如 { parent: "文件", label: "新建" }。

返回值

无返回值。

示例

HTML 代码：

<div id="navBar"></div>

Javascript 代码：

$("#navBar").jqxNavBar({
    width: "300px"
});

$("#navBar").jqxNavBar('addFirst', "文件", [
    { label: "新建", icon: "new.png", action: function () { alert("新建"); } },
    { label: "打开", icon: "open.png", action: function () { alert("打开"); } },
    { label: "保存", icon: "save.png", action: function () { alert("保存"); } }
]);

$("#navBar").jqxNavBar('addFirst', "编辑", [
    { label: "剪切", icon: "cut.png", action: function () { alert("剪切"); } },
    { label: "复制", icon: "copy.png", action: function () { alert("复制"); } },
    { label: "粘贴", icon: "paste.png", action: function () { alert("粘贴"); } }
]);

// 关闭第一个选项卡
$("#navBar").jqxNavBar('close', 0);

// 关闭 "编辑" 菜单中的 "复制" 项
$("#navBar").jqxNavBar('close', { parent: "编辑", label: "复制" });

在上述示例中，我们首先创建了一个宽度为 300px 的导航条。然后，我们向导航条中添加了两个选项卡，分别为 "文件" 和 "编辑"。每个选项卡中又包含了若干菜单项，其中每个菜单项都有自己的标签、图标和回调函数。

最后，我们使用 close() 方法从导航条中删除了第一个选项卡和 "编辑" 菜单中的 "复制" 项。这样，导航条中就只剩下了 "新建"、"打开"、"保存" 和 "剪切"、"粘贴" 两个菜单。