javascript - 在不刷新页面的情况下更改调整大小的内容？

Question

我正在使用 ShieldUI 的“选项卡”，并且有一个选项卡位置属性。我希望屏幕宽度 >= 768px 时在“左侧”显示标签，而 <= 768px 时在“顶部”显示标签。我来到这里:

var $window = $(window);
var $pane = $('#tabsDiv');

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize < 768) {
        $pane.shieldTabs({
            position: "top"
        });
    } else {
        $pane.shieldTabs({
            position: "left"
        });
    }
}

checkWidth();

$(window).resize(checkWidth);

但是当我全宽并且我进入“移动”时，我必须刷新页面才能获得我想要的内容，有没有办法在不刷新页面的情况下做到这一点？

Answer 1

我们对您的代码有一些问题，以及 Shield UI 的限制。让我们看看其中的一些:

• 首先，对于我在 official docs 中检查过的内容，框架确实支持组件刷新，但仅支持 for new options you'd like to add to your widgets .因此，当您尝试更新选项卡的特定功能(如 position)时，您的代码将不起作用。这意味着最好有一个全局函数(initTabs，在我们的例子中)来销毁和重建整个选项卡结构；
• 其次，一旦你这样做了，不要在这个全局新函数中声明调整大小函数，以排除递归问题；
• 创建一个全局变量来存储选项卡位置的状态也是一个好主意，因为我们现在要处理本地/全局函数。

查看最终工作代码:https://jsfiddle.net/ro0a5bhv/4/

注意:看到我必须针对 CSS 属性 min-height 做一个变通方法，它总是由切换选项卡 View 时的框架。