Question

我正在尝试使用Foundation 6动态地将div（它将是jqplot图的目标）添加到选项卡面板。我希望div在行中的列布局中。我可以连续获得div，但每个div最终都是连续的，而不是行中的列元素。

我想要这个布局： Layout I want

我一直在使用以下代码在＆＃34; graph1＆＃34;中创建行div。面板：

var dynDivR1 = document.createElement("div");
dynDivR1.id = ("dynRow1");
dynDivR1.class = "row"; 
document.getElementById("graph1").appendChild(dynDivR1);

然后我进入一个循环来创建实际图像（获取数据，创建jqplot图）。在循环中，我使用以下代码创建图形div：

    var dynDiv2 = document.createElement("div");
dynDiv2.id = ("dynDiv2" + divno2);
dynDiv2.class = "small-7 medium-3 large-3 columns";
dynDiv2.style.height = "200px";
dynDiv2.style.width = "200px";     
dynDiv2.style.backgroundColor = 'white';
document.getElementById("dynRow1").appendChild(dynDiv2);

var plotInDiv2 = simplePlot(dynDiv2.id, lineDat2, sensorNames);
    divno2 +=1;

simplePlot是一个使用jqplot创建图形的函数。此代码的工作原理是动态创建div，将图形放在其中。我遇到的问题是布局：因为我会在页面中的列中有很多图表，而不是页面中的行（我最终必须有行和列但是现在我只是想解决列问题）。

我尝试删除图像div中的列宽和高度属性但是也没有用（只有全宽图像/ div）。

当我查看生成的HTML时，我创建的div似乎不包含类信息。例如，dynRow1 div看起来像这样（参见下面的实际HTML）：

<div id="dynRow1">

它没有class = row属性。当我在创建后立即查看div（console.log）时，class = row就在那里。

我尝试在这样的行中插入一个额外的列类div（然后将绘图div附加到那个）但它不起作用：

<div class="medium-6 columns">

我很困惑，非常感谢其他人可以给出的任何建议或指示。

非常感谢。

已添加26/12/16这是我得到的HTML（我没有包含结束标记 - 它们在那里，页面加载并在Firebug中正常工作：

<div class="tabs-content" data-tabs-content="dy-tabs-2">
<div id="data1" class="tabs-panel" role="tabpanel" aria-hidden="true" aria-labelledby="data1-label">
<div id="graph1" class="tabs-panel is-active" role="tabpanel" aria-hidden="false" aria-labelledby="graph1-label">
<div id="dynRow1">
<div id="dynDiv21" class="jqplot-target" style="height: 200px; width: 200px; background-color: white; position: relative;">
<div id="dynDiv22" class="jqplot-target" style="height: 200px; width: 200px; background-color: white; position: relative;">

然后，这是生成的HTML的屏幕截图的剪辑 Clipped screen shot from HTML page

再次感谢

Answer 1

添加一行<div class='row'>您有<div class='column row'>。

在类中使用列和行都会创建一个12行宽的div。您添加的任何新div列都将转到新行。

此外，您需要为列添加所需的宽度（以网格块为单位）（每行最多12个）。

<div class='small-7 medium-3 large-3 columns'>

此代码显示一个列div，在小屏幕上为7个网格空间，3个在中等，3个为大。

添加新div应如下所示 ...（通知 classList.add（＆＃34; row＆＃34;））：

  // create a new ROW div  
  var dv = document.createElement("div");
  dv.id = ("newDiv");
  dv.classList.add("row");

以下是添加所有内容的codepen示例，以创建包含多个列的行并使用基础类： https://codepen.io/cmodesign/pen/woEpEd

http://foundation.zurb.com/sites/docs/grid.html

Answer 2

亲爱的，请检查一下代码段，我已将display:inline-block添加到您生成的div中，这是您需要的吗？

<div class="tabs-content" data-tabs-content="dy-tabs-2">
  <div id="data1" class="tabs-panel" role="tabpanel" aria-hidden="true" aria-labelledby="data1-label">
    <div id="graph1" class="tabs-panel is-active" role="tabpanel" aria-hidden="false" aria-labelledby="graph1-label">
      <div id="dynRow1">
        <div id="dynDiv21" class="jqplot-target" style="height: 200px; display:inline-block; width: 200px; background-color: orange; position: relative;"></div>
        <div id="dynDiv22" class="jqplot-target" style="height: 200px; display:inline-block; width: 200px; background-color: black; position: relative;"></div>
      </div>
    </div>
  </div>
</div>

Answer 3

感谢Chris O提供了有用的建议。我已经使用克里斯的建议作为以下解决方案的基础。

function staticPlots (selectDataSet) {
/* Function to create row and column div's for each variable in SelectDataSet and then plot
the data for each variable using jqplot line graph.
Temporary data in dataToPlot.
Temporary list of variables in selectVar
*/

// Temporary selection of variables to plot
selectVar = ["R1_","R2_","R3_","R4_","C1_","C2_","C3_","C4_","C5_","C6_","C7_","C8_","C9_","C10_","C11_","C12_"];

/* Create divs and place plots in them
First calculate the number of rows needed with four plots per row
lx is iterator to set unique col ids
*/

var x = selectVar.length;
var y = 4;
var z = Math.ceil(x / y); 
var lx = 0;

for(var r=1; r<=z; r++) {
    var dv = createRowColDivs();
    dv.id = ("newRow"+r);
    dv.classList.add("row");
    document.getElementById("graph1").appendChild(dv);

    var newCol;
    for(var i=1; i<=4; i++) {
        newCol = document.createElement("div");
        newCol.classList.add("small-3");
        newCol.classList.add("columns");
        newCol.id = "col"+lx; 
        dv.appendChild(newCol);
        var names = selectVar[lx];

        // Temporary data for illustration so the database is not used
        dataToPlot = [[1,4,5,6,8,2,3],[2,8,7,6,3,2,3]];
        var plotInDiv2 = simplePlot(newCol.id, dataToPlot, names);
        lx ++;
    }
}
};

createRowColDivs函数只是创建了行div，所以我可以在其他进程中使用它。可以很容易地将这些进程保存在staticPlots函数中。

function createRowColDivs() {

  // create a new ROW div  
  var dv = document.createElement("div");
  dv.id = ("newDiv");
  dv.classList.add("row");
  return(dv);
};

这段代码为我提供了我所追求的逐列图布局。

感谢克里斯在我路上看到我的片段。我必须在代码中更改的一件事是在定义col div之前附加行div。它也花了我太长时间才弄明白我需要使用lx来为每个情节创建唯一的id。

如果有人关心，请始终感谢有关改进代码的建议。

使用Zurb Foundation动态添加div作为行的列

3 个答案: