Question

我正在尝试将进度条集成到我的应用中。我使用表来显示分配项。在表格行内，我在水平面板中有一个标签。布局选项中的标签宽度设置为0。我从另一个小部件获得所需的标签宽度百分比，标签 onAttach 事件具有以下代码：

function setProgress(){  

  var percent = widget.parent.parent.descendants.Label8.text;      
  widget.getElement().setAttribute("width", percent);
  //widget.getElement().width = percent;
  //this.widget.getElement().setAttribute("width", percent);    

}

setProgress();

以上根本不起作用。如果我使用JQuery，它可以通过以下方式工作：

function setProgress(){  

  var percent = widget.parent.parent.descendants.Label8.text;          
  $(".app-DashboardAdmin-Label9").css("width", percent);

}

setProgress();

问题是通过使用JQuery，表中所有项目的进度条的宽度是相同的。我假设唯一可能的方法是创建匹配所有可能的百分比结果的样式并相应地匹配它们。这需要我创建大约50个样式，然后执行以下操作：

function setProgress(){  

  var percent = widget.parent.parent.descendants.Label8.text;          

  if(percent === "0%") {
    widget.styles = ["zeropercent"];
  } else if (percent === "10%"){
      widget.styles = ["tenpercent"];
  } else if (percent === "12.5%"){
      widget.styles = ["12pointfivepercent"];
  } else if (percent === "15%"){
      widget.styles = ["fifteenpercent"];
  } etc, etc, etc.

}

setProgress();

现在，实现一件非常简单的事情是很麻烦的。有什么建议你可以给我或者我应该放弃吗？

Answer 1

实现这一目标：

为标签
添加onDataLoad处理程序
```
drawProgress(widget);
```
将样式progress添加到标签并将其宽度设置为100.

在客户端脚本中（修改第一行以捕获数据）：

function drawProgress(widget){
  var progress=widget.datasource.item.progress;
  var div=widget.getElement();
  div.innerText='';
  var innerDiv=document.createElement('div');
  innerDiv.setAttribute('class','progress-bar');
  innerDiv.setAttribute('style','width:'+progress+'px');
  div.appendChild(innerDiv);
}

添加到款式：

.progress-bar{
  background-color: navy;
  height: 10px;
}
.app-Label.progress{
   border: 1px solid silver;
}

Answer 2

在App Maker中创建进度条的一个有趣的解决方案是使用星级评分小部件和一些自定义CSS。您可以显示一个圆圈或正方形，并获得看起来像进度条的内容，而不是为评级显示星标。您可以为星级评分小部件创建进度条变体：

.app-StarRating--ProgressBar .app-StarRating-Star {
   color:blue;
   font-family: Arial;
}

.app-StarRating--ProgressBar .app-StarRating-Star::after {
  content: '\25AE';
}

然后，您可以设置星级评分窗口小部件的值以指示进度级别。

以编程方式控制窗口小部件的宽度

2 个答案: