jQWidgets jqxNavigationBar add() 方法

简介

jQWidgets jqxNavigationBar是一个适用于Web应用程序的JavaScript UI库。它包含多个用户界面控件，其中之一是jqxNavigationBar。jqxNavigationBar可以用于创建具有多个面板或选项卡的导航条。

jqxNavigationBar.add()方法用于添加一个新面板到jqxNavigationBar控件中。该方法返回一个布尔值，指示操作是否成功。

语法

$("#jqxNavigationBar").jqxNavigationBar('add', item);

• #jqxNavigationBar是指jqxNavigationBar控件的选择器；

• add是指要执行的方法；

• item是一个包含面板信息的对象，至少应包含text属性来指定面板的显示文本。其他可选属性如下：

  属性名 | 说明 --- | --- text | 面板的显示文本 icon | 面板的图标，可以是字符串（图标的路径）或数组（图标的类名） content | 面板包含的内容，可以是HTML字符串或jQuery对象 expanded | 面板是否默认为展开状态 disabled | 面板是否禁用

示例

以下示例演示如何使用jqxNavigationBar.add()方法添加一个面板：

$("#jqxNavigationBar").jqxNavigationBar({
    width: '600px',
    height: '400px'
});
 
var item = { text: '新建面板', icon: 'my-icon.png', content: '<p>这是新建的面板。</p>' };
$("#jqxNavigationBar").jqxNavigationBar('add', item);

该代码将创建一个宽度为600px、高度为400px的jqxNavigationBar控件，并在其中添加一个名为“新建面板”的面板，面板内容为一段简单的HTML代码。

注意事项

• 添加的面板默认位于jqxNavigationBar控件的末尾；
• 如果需要将新面板添加到指定位置，可以先使用jqxNavigationBar.getItems()方法获取已有的面板列表，并插入到合适的位置，然后再使用jqxNavigationBar.add()方法添加新面板；
• 对于包含表单等元素的内容，建议使用表单和输入控件的内置样式，以避免外观出现异样。