问题标签 [gridster]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 动态添加的 Gridster 小部件无法关闭
我添加了一个带有关闭按钮的动态网格小部件。
所有数据都被加载到它没有任何问题,当我单击关闭按钮时,它会进入登录屏幕,调用 javascipt。
这不会发生在已经创建的小部件上。gridster.add_widget
仅适用于使用方法动态创建的。
请帮助解决这个问题。提前致谢.....
javascript - 为什么javascript gridster插件调整大小不起作用
这是我的代码,请问为什么我的 glister resize 功能无法正常工作?
javascript - 一个 gridster 实例中的多个网格区域
可以说我有一个正常运行的Gridster网格
现在我想让一个网格可以包含三个部分:页眉、正文和页脚。
例如
我想要实现的是在一个 gridster 实例中拥有三个独立的网格部分。页眉和页脚都没有固定的行数。用户应该能够在页眉、正文和页脚之间拖动小部件,然后相应地增加页眉和页脚的高度。
我想避免为此使用多个 gridster 实例,因为网格的数据将被保存,并且正文甚至可以是 12 A4 页长,并且多个实例的执行时间和内存使用量要大得多。
有没有人对如何实现这一目标有任何可能的想法?
更新(29/04):
在布局方面,我发现最好的解决方案是:
有了这个,我可以在调用时拥有三个网格区域$(".gridster ul").gridster();
。
当我静态加载了一些小部件时,我可以很好地移动它们,ul
但是当我使用该功能动态添加一个小部件时,add_widget
该小部件只添加到第一个ul
(在这种情况下.gheader
)并且在它们之间拖动仍然需要被弄清楚。
我当前初始化 gridster 的代码:
javascript - Gridster.js - 调整大小并保持纵横比
我目前正在使用 Gridster.js,我想知道是否有任何有插件经验的人知道如何在调整大小时保持小部件的纵横比。
目前我的网格中有正方形,我想保持 1:1 和矩形,我想保持 3:2。
我在想我可以在 resize.resize 函数中进行某种检查。这听起来相当昂贵,因为它会在每次鼠标移动时触发。
有没有更好的方法来解决这个问题?
meteor - 将 Gridster 小部件动态添加到 DOM 时 UI.renderWithData 出现流星问题
我正在尝试使用 gridster.add_widget 方法将预渲染模板传递到 DOM 中。
我一定不明白如何使用 UI.renderWithData 因为每次调用 UI 命令时都会在最底部收到错误消息消息。
我对文档的理解是,这些命令将返回传入模板的完整 HTML。我已经通过为每个被调用的“项目”创建一个红色框来验证 gridster 工作正常。
任何帮助将不胜感激。谢谢!
javascript - gridster 在按钮单击时添加小部件
我正在评估用于自定义仪表板的 gridster jquery 插件,它似乎非常适合我的需求。但是有些事情我无法工作。我想在单击“添加按钮”时动态添加一个新小部件,使用库中记录的 add_widget 函数。结果是小部件似乎被添加,但随后消失,一切都回滚到初始状态。
看看这个 jsfiddle。
正如您在示例中看到的那样,我使用相同的函数首先在一般范围内添加小部件(并且它可以工作),然后在按钮单击事件处理程序中,但它不能正常工作。
怎么了?
jquery - 等待 jquery 中的 css3 转换结束
我实际上使用的是 gridster.js jquery 模块,但我遇到了 CSS3 转换的问题。
我将一些内容放在我的“li”标签中,当页面加载时,我会根据内容调整小部件的大小(以避免文本溢出)。
如果我保留原始的 gridster css,我的 while 循环查看小部件的宽度和高度会变得无限......
有没有办法避免这种情况??(当我只删除 css 文件中的过渡效果时,它工作得很好)。
这是我用来在我的块上设置正确高度的函数的一部分(以避免溢出)
当我使用此功能并在 css 上删除了过渡时,它会起作用,如果我再次放置过渡,则时间会变得无限。
javascript - 拖入gridster之前的延迟
我在项目中使用 gridster.net,我遇到了问题。
我试图让小部件在单击后按住鼠标一秒钟后才开始拖动。我正在使用下一个代码:
但它没有用。似乎我必须调用开始拖动的函数,例如gridsterObj.on_start_drag.call(gridsterObj, e, ui);
,但是我在哪里可以获得 UI 对象?它在 gridster 代码中随处可见,但我找不到它创建的位置。它似乎是 jquery UI 对象。我怎样才能创建它?
gridster - 从 gridster 添加/删除单个小部件
我正在尝试基于按钮单击功能添加和或删除小部件。它可以工作,但是一旦调用该函数,它就会做一些奇怪的事情,即在任何鼠标单击时调用代码,而不仅仅是在 html 页面上单击按钮。因此,如果我单击 html 页面上的删除按钮,它将删除该小部件,但如果我单击任何其他小部件(不在按钮上),它仍会删除该小部件。我只想要在 html 按钮单击时调用的函数,而不是任何鼠标单击。就像按钮正在初始化页面上的某些内容以使任何鼠标单击都调用删除功能。谁能解释为什么会发生这种情况以及我该如何解决?我的代码如下:
感谢您的任何帮助!
javascript - 在gridster上,拖动期间将小部件保持在鼠标下
我实际上使用 gridster 来拖动一些项目。
我的容器比我的窗口大,所以,像往常一样,我在右侧有一个滚动条。现在,如果我想将一个项目从顶部拖到底部,我需要单击它并同时滚动鼠标。
正如你在这个小提琴上看到的那样,如果你拿起项目并开始滚动,项目会停留在他的第一个位置,你需要移动鼠标才能将它带到它。
即使滚动,也有办法将项目保持在鼠标下方?
示例 html 代码:
示例 CSS 代码:
示例 jQuery 代码: