Google app maker 控件控件'；s宽度的编程

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

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();

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

function setProgress(){  

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

}

setProgress();

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();

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

要实现这一点：

• 为标签添加onDataLoad处理程序

  drawProgress(widget);
  

• 向标签添加样式

  progress

  ，并将其宽度设置为100

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

• 添加到样式：

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

要实现这一点：
• 为标签添加onDataLoad处理程序

  drawProgress(widget);
  

• 向标签添加样式

  progress

  ，并将其宽度设置为100

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

• 添加到样式：

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

---

在App Maker中创建进度条的一个有趣的解决方案是使用带有一些自定义CSS的星级小部件。您可以显示一个圆圈或正方形，而不是为评级显示星星，并获得类似进度条的内容，例如，您可以为“星星评级”窗口小部件创建一个进度条变体：

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

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

---

然后，您可以设置星级评定小部件的值以指示进度级别。
在App Maker中创建进度条的一个有趣的解决方案是将星级评定小部件与一些自定义CSS一起使用。您可以显示一个圆圈或正方形，而不是为评级显示星星，并获得类似进度条的内容，例如，您可以为“星星评级”窗口小部件创建一个进度条变体：

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

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

---

然后，您可以设置star rating小部件的值以指示进度级别。
您真是天才！非常感谢你。我修改了你的实现，使它适合我的，它是伟大的工作！你这个天才！非常感谢你。我修改了你的实现，使它适合我的，它是伟大的工作！