jQWidgets jqxNavBar columns 属性介绍

jQWidgets是一款优秀的Web前端UI组件库，jqxNavBar是其中的一个导航栏控件。本文将介绍jqxNavBar中的columns属性，帮助程序员更好地使用jqxNavBar实现导航栏功能。

columns属性介绍

每一个jqxNavBar导航栏组件都由多个项（item）组成，columns属性指定了每组项的数量。该属性是用来设置导航栏包含几列，每列显示几个项。该属性接受一个数字参数。

$('#jqxNavBar').jqxNavBar({
    columns: 2
});

以上代码设置导航栏包含两列，每列显示默认数量的项数。

当导航栏项的数量超出(column数量) * (每列项数) 时，超出的项会自动放到下一列中。在多列模式下，若导航栏中存在下拉菜单组件时，其下拉列表会横向扩展到所属的列数。

columns属性示例

以下示例展示了如何设置导航栏为一列，并设置每列最多显示7个项。

$('#jqxNavBar').jqxNavBar({
    columns: 1,
    items: [
        { text: '首页', icon: 'home' },
        { text: '导航一', icon: 'folder' },
        { text: '导航二', icon: 'folder' },
        { text: '导航三', icon: 'folder' },
        { text: '导航四', icon: 'folder' },
        { text: '导航五', icon: 'folder' },
        { text: '导航六', icon: 'folder' },
        { text: '导航七', icon: 'folder' },
        { text: '导航八', icon: 'folder' },
        { text: '导航九', icon: 'folder' },
        { text: '导航十', icon: 'folder' }
    ],
    columnsMax: 7
});

以上代码设置导航栏为1列，每列最多显示7个项，若所有项数量超过7个，则会自动分配到下一列中。

columns属性注意事项

1. columns属性值必须为正整数，建议值为1或2；
2. columnsMax属性可以限制每列最多显示项数，当项数超过限制时会分配到下一列中；
3. 每列的高度会自适应，若每列中的项高度有所不同，则会以列中最高的项高度作为该列的高度；
4. 导航栏项的顺序默认是从左到右，从上到下。

以上就是jQWidgets jqxNavBar columns属性的介绍，希望能帮助您更好地使用jqxNavBar实现导航栏功能。