jQWidgets jqxNavigationBar showArrow 属性(1)

📌 相关文章

📜 jQWidgets jqxNavigationBar showArrow 属性(1)

📅 最后修改于: 2023-12-03 15:32:18.929000 🧑 作者: Mango

jQWidgets jqxNavigationBar showArrow 属性

简介

jqxNavigationBar 是 jQWidgets Web 应用程序 UI 框架的一部分，它提供了一个具有可扩展性和自定义能力的导航栏控件。而 showArrow 属性则是这个导航栏控件的一个属性，在设置为 true 后，将在导航栏条目旁边显示一个箭头指示器，以帮助用户辅助标识当前活动的条目。

使用方法

语法

$('#jqxNavigationBar').jqxNavigationBar({ showArrow: true });

参数

true/false : 指示导航栏条目旁是否显示箭头指示器

上手指南

引入 jQWidgets 的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

在 HTML 中添加 jqxNavigationBar 控件的占位符：

<div id="jqxNavigationBar"></div>

在 JavaScript 中使用 jqxNavigationBar 函数初始化控件：

$('#jqxNavigationBar').jqxNavigationBar({
    showArrow: true,
    // 其它选项...
});

示例代码

<!DOCTYPE html>
<html>
<head>
    <title>jqxNavigationBar showArrow 属性示例</title>
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
    <script>
        $(document).ready(function () {
            $('#jqxNavigationBar').jqxNavigationBar({
                showArrow: true,
                width: '400px',
                height: '30px'
            });
        });
    </script>
</head>
<body>
    <div id="jqxNavigationBar"></div>
</body>
</html>

效果图：

jqxNavigationBar showArrow 属性示例