- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有以下代码,当我将小部件正确添加到 (1,1) 时可以正常工作,但是当我将 (row, col) 用作 (2,2) 时,它会将小部件添加到 (1,2)。我做错了什么?
gridster = $(".gridster ul").gridster({widget_selector: "li", widget_margins: [5, 5], widget_base_dimensions: [120, 40], min_cols: 0, min_rows: 0, max_size_x: false, avoid_overlapped_widgets: true}).data('gridster');
gridster.add_widget('<li><div>'+docItem.description+'</div><div>'+docItem.vals+'</div></li>', 1, 1, docItem.col, docItem.row);
生成的 HTML 如下...
<div class="gridster ready">
<ul id="gridData" style="width: 260px; position: relative; height: 50px;">
<li data-col="1" data-row="1" data-sizex="1" data-sizey="1" class="gs-w" style="display: list-item;"><div>Total</div><div>1</div></li>
<li data-col="2" data-row="1" data-sizex="1" data-sizey="1" class="gs-w" style="display: list-item;"><div>John</div><div>2</div></li>
</ul>
</div>
我想检查一下 gridster 是否可以在任何我想要的地方添加一个小部件,而不是以线性增量模式。
编辑:功能正常,完整示例如下。
客户端/myCell.js
Template.cellular.created= function() {
Session.set('idxX',0);
Session.set('idxY',0);
Session.set('gridInit', 0);
currentFileId = "someId";
console.log("Setting file id");
Meteor.call('setFileId', currentFileId, function() {
console.log("published");
if(Session.get('gridInit') == 0) {
gridster = $(".gridster ul").gridster({widget_selector: "li", widget_margins: [5, 5], widget_base_dimensions: [120, 40], min_cols: 0, min_rows: 0, max_size_x: false, avoid_overlapped_widgets: true}).data('gridster');
Session.set('gridInit',1);
}
Meteor.subscribe("myCells"+currentFileId, function() {
cells = cellItems.find({owner: 1, myFileId: currentFileId}).fetch();
console.log(cells);
cells.forEach(function(docItem, idx){
console.log("inserting = " +idx + " item.row = "+docItem.row + " item.col = " + docItem.col);
//Blaze.renderWithData(Template.cells, docItem, $('#data').get(0));
gridster.add_widget('<li><div>'+docItem.description+'</div><div>'+docItem.vals+'</div></li>', 1, 1, docItem.col, docItem.row);
});
});
});
};
Template.cellular.events({
'keydown .newCellDesc': function (e, t) {
if (event.keyCode == 13 || event.keyCode == 9) {
$('.newCellFormula').focus();
event.stopPropagation();
return false;
}
},
'keydown .newCellVal': function (e, t) {
if (event.keyCode == 13 || event.keyCode == 9) {
$('.newCellDesc').focus();
event.stopPropagation();
return false;
}
},
'keydown .newCellFormula': function (e, t) {
if (event.keyCode == 13 || event.keyCode == 9) {
$('.newCellVal').focus();
event.stopPropagation();
return false;
}
},
'click #newCellUse': function (e, t) {
$('#gridData').empty();
if(Session.get('gridInit') == 0) {
gridster = $(".gridster ul").gridster({autogenerate_stylesheet: true, widget_selector: "li", widget_margins: [5, 5], widget_base_dimensions: [120, 40], min_cols: 0, min_rows: 0, max_size_x: false, avoid_overlapped_widgets: true}).data('gridster');
Session.set('gridInit',1);
}
Session.set('idxX', Session.get('idxX') + 1);
Session.set('idxY', Session.get('idxY') + 1);
var idxX = Session.get('idxX');
var idxY = Session.get('idxY');
console.log("Adding new cell to cell list ");
if($('.newCellDesc').text().trim() != '' && $('.newCellVal').text().trim() != '' && $('.newCellFormula').text().trim() != '') {
Meteor.call('insertCell', "someId", {owner: 1, myFileId: currentFileId, description: $('.newCellDesc').text().trim(), vals: $('.newCellVal').text().trim(), formula: $('.newCellFormula').text().trim(), col: idxX, row: idxY}, function() {
console.log("updating gridster with data");
Meteor.subscribe("myCells"+currentFileId, function() {
cells = cellItems.find({owner: 1, myFileId: currentFileId}).fetch();
console.log(cells);
cells.forEach(function(docItem, idx){
console.log("inserting = " +idx + " item.row = "+docItem.row + " item.col = " + docItem.col);
//Blaze.renderWithData(Template.cells, docItem, $('#data').get(0));
el = '<li><div>'+docItem.description+'</div><div>'+docItem.vals+'</div></li>'
gridster.add_widget(el, 1, 1, docItem.col, docItem.row);
});
});
});
}
event.stopPropagation();
return false;
}
});
客户端/myCell.css
.container { width: auto; }
客户端/newCell.css
#newCell
{
width:400px;
height: 40px;
background-color: white;
border: transparent;
}
.newCellDesc
{
width:30%;
height: 40px;
background-color: white;
border: 0.5px solid black;
float: left;
}
.newCellVal
{
width:25%;
height: 40px;
background-color: white;
border: 0.5px solid black;
float: left;
}
.newCellFormula
{
width:30%;
height: 40px;
background-color: white;
border: 0.5px solid black;
float: left;
}
客户端/myCell.html
<body>{{> cellular}}</body>
<template name="cellular">
<div id='cellPane'>
<div id='newCell'>
<div class='newCellDesc' contenteditable="true" display="block" placeholder="Description">
</div>
<div class='newCellFormula' contenteditable="true" display="block" placeholder="Formula">
</div>
<div class='newCellVal' contenteditable="true" display="block" placeholder="Value">
</div>
<button id='newCellUse' class="btn-sm btn-primary" type="submit">Add</button>
</div>
<div id='data' class='container-fluid'>
<div class="gridster">
<ul id="gridData">
</ul>
</div>
</div>
</div>
</template>
服务器/cell.js
var fileId;
cellItems.allow({
'insert': function (userId,doc) {
return true;
},
'update': function (userId,doc) {
return true;
}
});
Meteor.methods({
setFileId: function (theId) {
console.log(theId);
fileId = theId;
Meteor.publish('myCells'+fileId, function(){
console.log("using "+fileId + " to publish");
return cellItems.find({owner: 1, myFileId: fileId});
});
},
insertCell: function (fileId,item) {
console.log(item);
cellItems.insert(item);
console.log(cellItems.find({owner: 1, myFileId: fileId}).fetch());
return true;
}
});
lib/collection.js
items = new Mongo.Collection("folders");
cellItems = new Mongo.Collection("cells");
currentFileId = null;
myId = null;
最佳答案
这是一个 much-requested Gridster 的功能,但好消息是 a fix for it在 fork 中可用。
老ducksboard repo的 Gridster 已经休眠了一年多,但其他维护者已经介入合并最近的贡献。 强烈推荐the dsmorse fork of Gridster ,并在我自己的项目中使用了它(并对其进行了微小的修复,与这个问题无关)。
这是 main demo & download page对于 dsmorse fork 。
在其他功能改进中,此分支有一个选项 shift_widgets_up: false
可防止小部件吸附到网格中最上方的可用位置。玩the demo这一点,看起来它可能不是完全没有错误,但这是我所知道的最接近你所问的事情。
关于javascript - Gridster 没有在我想要的地方添加小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33086619/
我正在尝试添加和/或删除基于按钮单击功能的小部件。它可以工作,但是一旦调用该函数,它就会执行一些奇怪的操作,即在任何鼠标单击时调用代码,而不仅仅是在 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 小部件的大小? 我这样做是为了让用户可以单击小部件标题,使其展开和收缩。 我想让它在展开小部件时可以调整大小。 这可以做到吗?如果是这样,怎么办? 最佳答案 您只
我是一名优秀的程序员,十分优秀!