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

Question

我正在使用 ShieldUI 的 "Tabs" 并且选项卡位置有一个属性。我希望当屏幕宽度 >= 768px 时在 "left" 处显示选项卡，当 <= 768px 时在 "top" 处显示选项卡。我来到这里：

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);

但是当我全宽时 "mobile" 我必须刷新页面才能获得我想要的内容，有没有办法在不刷新页面的情况下做到这一点？

Answer 1

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

首先，对于我在 official docs, the framework does support component refreshing, but only for new options you'd like to add to your widgets 上检查过的内容。因此，当您尝试更新选项卡的特定功能（如 position）时，您的代码将不起作用。这意味着最好有一个全局函数（initTabs，在我们的例子中）来销毁和重建整个选项卡结构；
其次，一旦你这样做了，不要在这个全局新函数中声明调整大小函数，以排除递归问题；
创建一个全局变量来存储选项卡位置的状态也是一个好主意，因为我们现在有 local/global 个函数要处理。

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

注意：看到我不得不对CSS属性min-height做一个解决方法，这是切换选项卡视图时始终由框架设置。

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

change content on resize without page refresh?

javascript

jquery

tabs

shieldui