0

我正在尝试将进度条集成到我的应用程序中。我使用表格来显示作业项目。在表格行内，我在水平面板中有一个标签。标签宽度在布局选项中设置为 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();

现在，要实现一个非常简单的事情很麻烦。有什么建议你可以给出还是我应该放弃这个？

4

2 回答 2

2

为达到这个：

在此处输入图像描述

  • 为标签添加 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;
}
于 2017-02-27T14:11:56.750 回答
0

在 App Maker 中创建进度条的一个有趣的解决方案是使用带有一些自定义 CSS 的星级小部件。除了显示星级，您可以显示一个圆形或方形并获得看起来像进度条的东西，例如，您可以为星级小部件创建一个进度条变体：

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

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

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

于 2017-02-27T22:31:56.977 回答