jQuery Mobile 导航栏动态控制与响应式设计指南

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul id="mainNavbar">
            <li><a href="#" class="footerNavbar" data-icon="back" data-role="button">返回</a></li>
            <li id="itemA"><a href="#" class="footerNavbar" data-icon="check" data-role="button">选项A</a></li>
            <li id="itemB"><a href="#" class="footerNavbar" data-icon="check" data-role="button">选项B</a></li>
            <li id="itemC"><a href="#" class="footerNavbar" data-icon="forbidden" data-role="button">选项C</a></li>
            <li id="itemD"><a href="#" class="footerNavbar" data-icon="delete" data-role="button">删除</a></li>
            <li id="itemE"><a href="#" class="footerNavbar" data-icon="check" data-role="button">确认</a></li>
            <li id="itemF"><a href="#" class="footerNavbar" data-icon="check" data-role="button">保存</a></li>
        </ul>
    </div>
</div>

$(document).on("pagecreate", "#yourPageId", function() {
    function updateNavbar(appState) {
        // 隐藏所有可能需要动态控制的项
        $("#itemA, #itemB, #itemC, #itemD, #itemE, #itemF").hide();

        if (appState === 'state1') {
            $("#itemC").show();
            $("#itemD").show();
            $("#itemE").show();
            $("#itemF").show();
        } else if (appState === 'state2') {
            $("#itemD").show();
            $("#itemE").show();
            $("#itemF").show();
        }
        // ... 其他状态 ...

        // 关键步骤：刷新导航栏，使其重新渲染并应用样式
        // jQuery Mobile 的 Navbar 组件在 DOM 更改后需要刷新
        $("#mainNavbar").navbar('refresh');
    }

    // 示例：在某个事件触发时调用
    // var currentAppState = 'state1'; // 假设这是当前的应用程序状态
    // updateNavbar(currentAppState);

    // 或者，在页面加载完成后根据初始状态设置
    // var initialAppState = 'state1';
    // updateNavbar(initialAppState);

    // 假设有一个按钮点击事件来改变状态
    // $("#changeStateButton").on("click", function() {
    //     var newAppState = 'state2'; // 假设切换到state2
    //     updateNavbar(newAppState);
    // });
});

$(document).on("pagecreate", "#yourPageId", function() {
    // 定义一个媒体查询规则
    var mediaQuery = window.matchMedia("(max-width: 700px)");

    function handleMediaQueryChange(x) {
        if (x.matches) { // 如果媒体查询匹配 (屏幕宽度小于等于700px)
            console.log("屏幕宽度 <= 700px，执行小屏幕导航栏逻辑");
            // 例如：隐藏一些不重要的导航项，或改变其样式
            $("#itemA").hide();
            $("#itemB").hide();
            $("#mainNavbar").navbar('refresh');
        } else { // 如果媒体查询不匹配 (屏幕宽度大于700px)
            console.log("屏幕宽度 > 700px，执行大屏幕导航栏逻辑");
            // 例如：显示所有导航项
            $("#itemA").show();
            $("#itemB").show();
            $("#mainNavbar").navbar('refresh');
        }
    }

    // 页面加载时立即执行一次，检查当前状态
    handleMediaQueryChange(mediaQuery);

    // 监听媒体查询状态的变化
    mediaQuery.addListener(handleMediaQueryChange);
});

/* 默认样式：在大屏幕上显示所有导航项 */
#itemA, #itemB {
    display: block; /* 默认显示 */
}

/* 当屏幕宽度小于或等于 700px 时 */
@media screen and (max-width: 700px) {
    #itemA, #itemB {
        display: none; /* 在小屏幕上隐藏 */
    }
}

/* 如果需要，也可以根据其他条件调整布局或样式 */
@media screen and (orientation: landscape) {
    /* 横屏时的样式 */
}