更改内容大小时无需刷新页面？

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限制都有一些问题。 让我们看看其中的一些：

• 首先，对于我在官方文档中检查过的内容，该框架确实支持组件刷新，但仅适用于要添加到小部件中的新选项 。 因此，当您尝试更新选项卡的特定功能（例如position ）时，您的代码将无法工作。 这意味着最好有一个全局函数（在我们的例子中为initTabs ）来销毁和重新创建整个标签结构。
• 其次，一旦这样做，就不要在此全局新函数中声明调整大小的功能，以免出现递归问题；
• 创建全局变量来存储制表符位置的状态也是一个好主意，因为我们现在可以处理本地/全局函数。

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

注意： 看到我不得不对CSS属性min-height进行变通，该属性始终由框架在切换标签视图时设置。