Question

我使用的是ShieldUI＆＃34; Tabs＆＃34;并且标签位置有一个属性。我希望当屏幕宽度> = 768px时，显示标签位于＆＃34;左边＆＃34;并且＆lt; = 768px在＆＃34; top＆＃34;上显示它们。我来到这里：

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

但是当我全宽并且我去了'＃34;移动＆＃34;我必须刷新页面才能得到我想要的东西，有没有办法在没有页面刷新的情况下做到这一点？

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进行解决方法，该属性在切换选项卡时始终由框架设置视图。

调整大小时更改内容而不刷新页面？

1 个答案: