jQWidgets jqxNavBar 方向属性介绍

jqxNavBar是一款基于jQuery的导航栏组件，提供了丰富的配置选项和方向属性。方向属性决定了导航栏中项目的排列顺序和方向，可根据实际需求进行灵活调整。

方向属性列表

• orientation：导航栏中项目的排列方向，可选值为'horizontal'或'vertical'。
• scrollStep：水平滚动时每次滚动的像素数，默认为40。
• scrollDelay：水平滚动时滚动后延迟多少毫秒才可重复滚动，默认为200。
• showArrow：是否显示向左/向右箭头，默认为true。
• arrowPosition：箭头显示位置，可选值为'near'或'far'，默认为'near'。
• autoSize：是否根据内容自动调整导航栏尺寸大小，默认为true。

方向属性详解

orientation

导航栏中项目的排列方向，可选值为'horizontal'或'vertical'，默认为'horizontal'。当值为'horizontal'时，项目横向排列，当值为'vertical'时，项目纵向排列。

示例代码：

$("#jqxNavBar').jqxNavBar({
    orientation: 'vertical'
});

scrollStep

水平滚动时每次滚动的像素数，默认为40。当导航栏项目过多超出容器范围时，可滚动查看所有项目。设置scrollStep属性可调整滚动时每次滚动的距离。

示例代码：

$("#jqxNavBar').jqxNavBar({
    scrollStep: 60
});

scrollDelay

水平滚动时滚动后延迟多少毫秒才可重复滚动，默认为200。设置scrollDelay属性可控制滚动的灵敏度。

示例代码：

$("#jqxNavBar').jqxNavBar({
    scrollDelay: 100
});

showArrow

是否显示向左/向右箭头，默认为true。当导航栏项目过多超出容器范围时，可通过箭头滚动查看所有项目。

示例代码：

$("#jqxNavBar').jqxNavBar({
    showArrow: false
});

arrowPosition

箭头显示位置，可选值为'near'或'far'，默认为'near'。'near'表示箭头位于导航栏容器靠近项目的一侧，'far'表示箭头位于导航栏容器远离项目的一侧。

示例代码：

$("#jqxNavBar').jqxNavBar({
    arrowPosition: 'far'
});

autoSize

是否根据内容自动调整导航栏尺寸大小，默认为true。当项目内容发生变化时，导航栏尺寸会自动调整以适应内容。

示例代码：

$("#jqxNavBar').jqxNavBar({
    autoSize: false
});

总结

方向属性是jqxNavBar组件中的重要配置选项，可根据实际需求灵活调整导航栏中项目的排列顺序和方向。通过对方向属性的设置，可实现丰富多彩的导航栏效果。