zurb-foundation - 更新已有插件的元素
问题描述
Zurb 基金会 6.5.3
我有一个手风琴菜单,需要在初始页面加载后通过 ajax 进行更新。所以最初菜单包含 2 个项目,然后$(document).foundation();
被调用。稍后在收到 ajax 响应后,在菜单中添加(并可能删除/替换)元素。
我希望能够重新使用相同的元素,但是我无法更新插件来重新设置更改元素的样式。我试过了:
$("#my-menu").foundation();
这不起作用并显示错误:试图在已经有 Foundation 插件的元素上初始化手风琴菜单。
Foundation.reflow(menu, 'accordion');
这是行不通的。menu.foundation('reflow');
这不起作用并显示错误:未捕获的 ReferenceError:很抱歉,“reflow”不是 AccordionMenu 的可用方法。
我通过销毁和删除现有菜单,重新创建整个菜单,然后调用它来使它工作,$("#my-menu").foundation();
但是在我看来这并不理想。
解决方案
我发现我的问题是由于没有一种解决方案适用于所有 3 种情况:
- 基金会尚未初始化
- 基础被初始化并且整个元素已经被替换
- 基础被初始化并且元素已经被更新
除非有人有更好的答案,否则我使用这种方法解决了:
// this can happen before, or after code creates the menu
$(document).foundation();
console.log("foundation run");
__foundationRun = true;
...
function foundationUpdate(el) {
if (__foundationRun) {
if (el.data('zfPlugin'))
// already initialised, update it
Foundation.reInit(el);
else
// new element, initialise it
el.foundation();
}
// else leave for foundation initialise
}
....
// ... do updates (modify or replace entirely) and then:
foundationUpdate($("#my-menu"));
推荐阅读
- excel - 如何优化 VBA 代码以比较信息
- scala - 导入带有伴生对象的类时,实际导入的是什么?
- c# - 当我的异步方法从 api 检索用户数据时显示消息“用户正在加载”
- html - 使用 CSS 顺序显示 flex
- json - 如何解压缩变量中的数据(在 Post Man 中,使用 json,并且已经完成解密)?
- spring - 根据 PropertyValue 设置 Spring SolrDocument 集合名称
- c# - 泛型类型约束 - 我可以在方法级别扩展类约束吗?
- c++ - 循环中的模块检查不起作用
- go - 如何加密可以在固定期限内解密的数据
- javascript - 我不明白为什么一些随机颜色与图像重叠?