jQWidgets jqxNavBar 完整参考

jQWidgets jqxNavBar 是一个用于创建导航栏的 jQuery 插件，支持多种风格和样式，并可以自定义其外观和行为。

基本用法

引入库文件

在使用 jQWidgets jqxNavBar 之前，需要先引入相关的库文件和样式文件。

<!-- 引入 CSS 样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.3/jqwidgets/styles/jqx.base.css">

<!-- 引入 jQuery 库文件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jQWidgets 库文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.3/jqxcore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.1.3/jqxnavBar.js"></script>

创建导航栏

下面的示例展示了如何使用 jQWidgets jqxNavBar 创建一个简单的导航栏。

<div id="jqxNavBar"></div>

<script>
$(document).ready(function () {
    $('#jqxNavBar').jqxNavBar({
        width: '300px',
        height: '30px',
        selectedItem: 0,
        items: [
            { text: 'Home', icon: 'home' },
            { text: 'Products', icon: 'shoppingcart' },
            { text: 'Contact', icon: 'email' }
        ]
    });
});
</script>

以上代码定义了一个宽度为 300 像素、高度为 30 像素的导航栏，包含三个菜单项：Home、Products 和 Contact，并分别使用了三个图标：home、shoppingcart 和 email。

自定义样式

可使用 jqxNavBar 的 style 和 template 属性来自定义导航栏的样式。

style 属性

<div id="jqxNavBar"></div>

<style>
.custom-item {
    color: #ffffff;
    background-color: #4272d7;
    border-style: solid;
    border-color: #2958b3;
    border-width: 0 1px 1px 0;
}
</style>

<script>
$(document).ready(function () {
    $('#jqxNavBar').jqxNavBar({
        width: '300px',
        height: '30px',
        selectedItem: 0,
        style: {
            item: 'custom-item'
        },
        items: [
            { text: 'Home', icon: 'home' },
            { text: 'Products', icon: 'shoppingcart' },
            { text: 'Contact', icon: 'email' }
        ]
    });
});
</script>

以上代码定义了一个自定义样式类 .custom-item，并将 style 属性设置为这个类，使得每个菜单项的背景色、边框样式和文字颜色都发生了改变。

template 属性

<div id="jqxNavBar"></div>

<script>
$(document).ready(function () {
    var template = '<div style="padding: 3px;"><div style="float: left;"><img src="../img/NavBar/{icon}.png"/></div><div style="float: left; margin-left: 5px;">{text}</div></div>';

    $('#jqxNavBar').jqxNavBar({
        width: '300px',
        height: '30px',
        selectedItem: 0,
        template: template,
        items: [
            { text: 'Home', icon: 'home' },
            { text: 'Products', icon: 'shoppingcart' },
            { text: 'Contact', icon: 'email' }
        ]
    });
});
</script>

以上代码定义了一个模板字符串并将 template 属性设置为这个字符串，使得每个菜单项都包含一个图标和一个文字，并且使用了不同的图标。

API 参考

属性

| 名称 | 类型 | 描述 | | -------- | -------- | -------- | | width | string | 导航栏的宽度。默认值是 auto。 | | height | string | 导航栏的高度。默认值是 30px。 | | selectedItem | number | 导航栏的当前选中项的索引。默认值是 0。 | | items | array | 导航栏的菜单项。默认值是 []。 | | style | object | 导航栏的自定义样式。默认值是 null。 | | template | string | 导航栏的自定义模板。默认值是 null。 |

事件

| 名称 | 描述 | | -------- | -------- | | select | 当用户点击导航栏中的某个菜单项后触发。 |

方法

| 名称 | 描述 | | -------- | -------- | | addAt | 在指定位置添加一个菜单项。 | | clear | 移除所有菜单项。 | | disableAt | 禁用指定位置的菜单项。 | | destroy | 销毁导航栏并释放相关资源。 | | enableAt | 启用指定位置的菜单项。 | | getItems | 获取所有菜单项的信息。 | | hideFirstArrow | 隐藏导航栏的第一个箭头。 | | hideLastArrow | 隐藏导航栏的最后一个箭头。 | | removeAt | 移除指定位置的菜单项。 | | selectAt | 在指定位置选中一个菜单项。 | | setHeaderContent | 设置导航栏的头部内容。 | | showFirstArrow | 显示导航栏的第一个箭头。 | | showLastArrow | 显示导航栏的最后一个箭头。 | | updateAt | 更新指定位置的菜单项。 |