使用 Zurb Foundation 在一行中动态添加 div 作为列

Question

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

我想要这样的布局： Layout I want

我一直在使用下面的代码在 "graph1" 面板中创建行 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 创建图形的函数。这段代码的工作原理是 divs 是动态创建的，图表放在其中。我遇到的问题是布局：因为我会有很多图表，我希望它们在页面的列中，而不是页面的行中（我最终必须有行和列，但现在我只是想解决列问题）。

我尝试删除图像中的列宽和高度属性 div 但这也不起作用（只得到全宽图像 / divs）。

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

<div id="dynRow1">

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

我尝试像这样在行中插入一个额外的列 class 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'>.

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

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

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

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

添加新的div应该如下...（注意 classList.add("row")):

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

这是一个代码笔示例，它添加了所有内容以创建具有多个列的行并利用基础 classes： 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 提供的有用建议。我已将 Chris 的建议作为以下有效解决方案的基础。

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 作为列

dynamically adding div's as columns in a row with Zurb Foundation

html

layout

dynamic

zurb-foundation-6