在不刷新页面的情况下更改内容大小?
我使用了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);
但是,当我全宽,我走“移动”我需要刷新页面来获得我想要的东西,是有办法做到这一点不刷新页面?
我们对您的代码有一些问题,以及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
,这是由框架切换标签视图时,总是设置一个解决方法。
您可以在所有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 –
提供演示问题的工作示例(jsfiddle/codepen/snippet)。 – Dekel
https://jsbin.com/kiribot/edit?output – Denisx