Question

我希望有人可以了解如何创建堆叠/分段条或指向现有控件，而不是尝试重新发明轮子。这就是我需要的：

单杠
标准HTML
每个细分都需要使用css
每个细分市场需要占总数的百分比（即，如果总价值= 100，则其中一个细分受众群的值将小于50的值）
应该能够无缝地融入html表格单元格
不应该是图像
只应创建包含细分的单个栏（不是多个栏/分段栏）
服务器端生成，没有AJAX

给定x个值，这应该尽可能简单，创建x段。

我正在寻找代码示例或已经构建的控件。

编辑：为了完整性：

int[] segments = { 10, 5, 45, 20, 20 };
Panel horizontalBar = new Panel();
for(int segmentIndex = 0; segmentIndex < segments.Length; ++ segmentIndex)
{
    horizontalBar.Controls.Add(new Panel() { ID = String.Format("segment-{0}", segmentIndex), Width = Unit.Percentage(segments[segmentIndex]), CssClass = "segment" });
}
this.Page.Form.Controls.Add(horizontalBar);

Answer 1

HTML：

<div class="segment-bar">
    <div id="segment-1" width="10%" class="segment"></div>
    <div id="segment-2" width="20%" class="segment"></div>
    <div id="segment-3" width="70%" class="segment"></div>
</div>

CSS：

#segment-1
{
    background: red;
}
#segment-2
{
    background: blue;
}
#segment-2
{
    background: green;
}

.segment
{
    float: left;
    height: 20px;
}

在ASP.NET中，您可以使用简单的for循环实现它，并且可以将其封装在服务器控件中。你还需要帮助吗？

简单的堆叠/分段html栏

1 个答案: