我正在写一个网格来显示任务持续时间。
我在 display:block 中有一组 div，当文档准备好时，我使用 javascript 和 jqueryui 来： 1）将子 div 添加到块 div 2）使子 div 可拖动和调整大小 这很好用。我还想预设 div 的宽度（任务持续时间），但是有一个奇怪的行为：加载文档后 div 不会调整大小。但是，只要我单击 div 边框来调整它的大小，宽度就会“弹出”到我在脚本中使用的值。
这是简化的 HTML
<div id="gridcontainer">
<div id="railing_1" class="railing"></div>
<div id="railing_2" class="railing"></div>
</div>
这是 html 文档头部的 JS：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
var displayRange = { "slots": "24", "unit":"h","start":"0" };
var taskList = {
"tasks": [
{ "id":"1" , "line":"1", "start":"0","duration":"72" },
{ "id":"2" , "line":"1", "start":"73","duration":"48" },
{ "id":"3" , "line":"2", "start":"0","duration":"120" }
]
};
</script>
<script type="text/javascript">
$().ready(function(){
var railingId;
var taskId;
var jTaskId;
var oNewP;
var oText;
var displayRange = { "slots": "24", "unit":"h","start":"0" };
var taskList = {
"tasks": [
{ "id":"1" , "line":"1", "start":"0","duration":"72" },
{ "id":"2" , "line":"1", "start":"73","duration":"48" },
{ "id":"3" , "line":"2", "start":"0","duration":"120" }
]
};
//get the task list and create/append the children to each line
for(var i = 0; i<taskList.tasks.length; i++){
//alert(taskList.tasks[i].duration);
railingId = "railing_" + taskList.tasks[i].line;
taskId = "task_" + taskList.tasks[i].id;
oNewP = document.createElement("div");
oText = document.createTextNode(taskList.tasks[i].id);
oNewP.setAttribute("id",taskId);
oNewP.setAttribute("class","taskbar");
oNewP.appendChild(oText);
document.getElementById(railingId).appendChild(oNewP);
jTaskId = "#" + taskId;
$(jTaskId)
.draggable({
grid: [ 24, 44 ],
containment: "#gridcontainer",
axis: "x, y"
})
.resizable({
grid: [ 24, 0 ],
handles: "e, w",
containment: "#gridcontainer"
});
}
});
/*
Here is where I try to preset one of the tasks as an example; I've also
tried using $('#task_2').width("100");
but didn't work
*/
$('#task_2').css("width","100px");
</script>
我已经为这个问题设置了一个 Jsfiddle：
您会注意到，如果您尝试调整数字 2 的大小，它会弹出 100px，然后它能够根据可调整大小的网格（24px）调整大小
当然，我希望将任务 2 预设为 100...
有任何想法吗？
为混乱的代码道歉。
编辑 这似乎与 Jquery 没有任何关系——我尝试过简单地使用 Javascript width 和 setAttribute 方法，而不关心 JQ——但结果是没有调整大小。关于 JQ 的有趣部分是，当我单击以调整大小时，div 会弹出到尝试的大小——这似乎表明文档没有正确“重新加载”（？？）当我单击 div 时，会发生一些神奇的事情。