以編程方式控制窗口小部件的寬度

我試圖將一個進度條集成到我的應用程序中。我使用表來顯示作業項目。在錶行內部，我有一個標籤在水平面板內。佈局選項內的標籤寬度設置爲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();

現在，這是一個很大的麻煩，實現了非常簡單的事情。有沒有什麼建議可以讓我放棄呢？

來源

2017-02-26 Morfinismo

要做到這一點：

的標籤
```
drawProgress(widget); 
```
添加風格progress添加onDataLoad處理程序標籤和它的寬度設置爲100

In客戶端腳本（修改第一線捕捉你的數據）：

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-27 14:11:56

你是天才！非常感謝。我修改了你的實現，以便它適合地雷，它工作的很好！ – Morfinismo

用於創建應用程序製作一個進度條，一個有趣的解決方案是使用帶有一些自定義CSS的星級小部件。您可以顯示一個圓圈或正方形，並獲得看起來像是進度條的內容，而不是顯示評分星級。您可以爲星級控件創建進度條變種：

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

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

然後，您可以設置星級評價控件的值來表示的水平的進步。

來源

2017-02-27 22:31:56

以編程方式控制窗口小部件的寬度

回答

相關問題