- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
是否可以只调整一个 gridster 小部件的大小?
我这样做是为了让用户可以单击小部件标题,使其展开和收缩。
我想让它在展开小部件时可以调整大小。
这可以做到吗?如果是这样,怎么办?
最佳答案
您只能使用一些可调整大小的“特定”小部件来修改库(仅 4 行),如下所示(请参阅 gridster.js - v0.5.1 - 2014-03-26)..
1)更新add_widget函数(修改的行在注释中标记为“自定义”):
fn.add_widget = function(html, size_x, size_y, col, row, max_size, min_size, resizable) { //custom
var pos;
size_x || (size_x = 1);
size_y || (size_y = 1);
if (!col & !row) {
pos = this.next_position(size_x, size_y);
}else{
pos = {
col: col,
row: row
};
this.empty_cells(col, row, size_x, size_y);
}
var $w = $(html).attr({
'resizable' : (resizable === true), //custom
'data-col': pos.col,
'data-row': pos.row,
'data-sizex' : size_x,
'data-sizey' : size_y
}).addClass('gs-w').appendTo(this.$el).hide();
[...]
2)更新register_widget函数(再次注意评论中的“自定义”一词):
fn.register_widget = function($el) {
var resizable = $el.attr('resizable'); //custom
var wgd = {
'col': parseInt($el.attr('data-col'), 10),
'row': parseInt($el.attr('data-row'), 10),
'size_x': parseInt($el.attr('data-sizex'), 10),
'size_y': parseInt($el.attr('data-sizey'), 10),
'max_size_x': parseInt($el.attr('data-max-sizex'), 10) || false,
'max_size_y': parseInt($el.attr('data-max-sizey'), 10) || false,
'min_size_x': parseInt($el.attr('data-min-sizex'), 10) || false,
'min_size_y': parseInt($el.attr('data-min-sizey'), 10) || false,
'el': $el
};
if (this.options.avoid_overlapped_widgets &&
!this.can_move_to(
{size_x: wgd.size_x, size_y: wgd.size_y}, wgd.col, wgd.row)
) {
$.extend(wgd, this.next_position(wgd.size_x, wgd.size_y));
$el.attr({
'data-col': wgd.col,
'data-row': wgd.row,
'data-sizex': wgd.size_x,
'data-sizey': wgd.size_y
});
}
// attach Coord object to player data-coord attribute
$el.data('coords', $el.coords());
// Extend Coord object with grid position info
$el.data('coords').grid = wgd;
this.add_to_gridmap(wgd, $el);
this.options.resize.enabled && (resizable === "true") && this.add_resize_handle($el); //custom
return this;
};
完成!
add_widget 函数的新签名现在是:
.add_widget( html, [size_x], [size_y], [col], [row], [resizable] )
如果您希望小部件可调整大小,只需将“可调整大小”参数设置为 true!
关于jquery - 仅使一个 gridster 小部件可调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22107062/
我正在尝试添加和/或删除基于按钮单击功能的小部件。它可以工作,但是一旦调用该函数,它就会执行一些奇怪的操作,即在任何鼠标单击时调用代码,而不仅仅是在 html 页面上单击按钮。因此,如果我单击 htm
我刚开始使用 Gridster jQuery 插件,但在使用时遇到了问题gridster.序列化()。根据该网站,它应该创建一个 JavaScript 对象数组,其中包含所有小部件的位置,准备好编码为
我在 之上构建了一个表单设计应用程序 dsmorse(dsmorse.github.io/gridster.js/) grister 和我无法添加超过 15 行的小部件。我尝试了 gridster.o
gridster 的规范用法似乎是可以触摸整个对象来指示要开始拖动操作。是否可以将可触摸区域限制为对象中的特定区域(div),也许由某种图标指示?我希望能够将 gridster 与包含其他(鼠标敏感)
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我是 gridster 新手,我正在尝试调整小部件的大小。当我创建一个小部件时,我添加了一个 在每个 内。我发现它被用在 gridster 网站上的一些小部件调整大小示例中。 当我将鼠标悬停在跨度上
我想为我的网站使用 Gridster,但我需要使用“add_widget”命令添加很多小部件。我做了一个测试,我认为“add_widget”功能存在问题:网格越来越慢并且存在内存泄漏。 您可以在此视频
我正在评估用于自定义仪表板的 gridster jquery 插件,它似乎非常适合我的需求。但是有些事情我无法工作。我想在单击“添加按钮”时动态添加一个新的小部件,使用库中记录的 add_widget
我有以下代码,当我将小部件正确添加到 (1,1) 时可以正常工作,但是当我将 (row, col) 用作 (2,2) 时,它会将小部件添加到 (1,2)。我做错了什么? gridster = $(".
JSFiddle 示例:https://jsfiddle.net/27t0jymr/ PROJECT LOAD PER PE
我使用 gridsterJS 和 12 列的网格。 我使用 add_widget() 方法动态添加小部件。 小部件正确显示。但是如果我放置一个 sizex 为 6 或更大的小部件,它会出现在 DOM
我正在将 Gridster 用于我的第一个 Javascript 项目,但遇到了问题。 当我向网格中添加一个小部件时,它没有到达我想要的位置,这里是 jsfiddle我的项目示例。 $('#b
我正在尝试为像 gridster 这样的自动调整大小的网格系统找到类似的解决方案。 基本上我正在创建一个网格/仪表板/表格系统,我在其中接收这样的元素的动态结构: rowPos:1,colPos:1,
我正在使用 Gridster 的“add_widget”方法添加网格。小部件已成功添加,但无序列表 (ul) 宽度小于其内容。 谁能告诉我如何根据内容在 Gridster 中调整高度和宽度。 最佳答案
我正在尝试找到一种自动调整 gridster 容器大小的方法。 在某种程度上,当用户更改浏览器大小时,相应的 gridster 小部件也会调整大小。(其中列数和行数不变,但实际大小会) 我可以在浏览器
有谁知道是否可以将可拖动元素放入 gridster 中? http://gridster.net/#documentation 这似乎很适合我的目的,但是您可以通过删除它来将它们添加到网格中吗? 我想
我在项目中使用gridster.net,但遇到了问题。 我试图让小部件仅在单击后按住鼠标一秒钟后才开始拖动。我正在使用下一个代码: $(".gridster .gs-w").on('mousedown
我正在网页中使用 Gridster.js,并尝试删除带有图像悬停时出现的按钮的小部件。要执行此操作,我使用函数 gridster.remove_widget() 我在插件网站的文档中找到了这里 htt
我正在尝试使用 Angular-Gridster 模块创建一个基于 AngularJS 的 Web 仪表板。 gridster 工作正常,我在将内容绑定(bind)到它时没有任何问题(例如使用 ng-
是否可以只调整一个 gridster 小部件的大小? 我这样做是为了让用户可以单击小部件标题,使其展开和收缩。 我想让它在展开小部件时可以调整大小。 这可以做到吗?如果是这样,怎么办? 最佳答案 您只
我是一名优秀的程序员,十分优秀!