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

我使用了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);

但是，当我全宽，我走“移动”我需要刷新页面来获得我想要的东西，是有办法做到这一点不刷新页面？

来源

2016-11-04 Denisx

提供演示问题的工作示例（jsfiddle/codepen/snippet）。 – Dekel

https://jsbin.com/kiribot/edit?output – Denisx

我们对您的代码有一些问题，以及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，这是由框架切换标签视图时，总是设置一个解决方法。

来源

2016-11-06 16:44:52 bosco

您可以在所有Shield UI插件实例上使用.refresh（）来刷新任何组件。它应该是一个基本方法。您还可以传递正确排列的选项字典的子集，您希望将其与原始属性合并，从而覆盖它们。 –

@VladimirGeorgiev，刷新任何组件不是文档说的。这里唯一可用的'.refresh（）'函数用于Grid部件（https://www.shieldui.com/documentation/grid/javascript/api/methods/refresh）。直接点击API演示（https://demos.shieldui.com/web/tabs/api），即使他们使用* destroy/recreate *策略...您是否有任何功能性代码来压缩/丰富这些点？ – bosco

据我所知，.refresh（）方法是为所有小部件实现的，但没有完整记录......在这里你可以看到它是在基础屏蔽ui小部件类中：https：//github.com/shieldui /shieldui-lite/blob/master/common/core.js#L769 –

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

回答

相关问题