我如何使我的进度条响应它所设置的值?

Question

我有一个JQuery UI进度条，到目前为止，我已经让它工作，如果屏幕尺寸大。然而，我被困在如何使进度条和进度显示内部缩小和调整到不同的屏幕大小。

下面是我的JQuery UI进度条的简化代码。在我的实际代码中，我的值确实改变了，但是，即使我将其设置为固定值，它也不会工作。 HTML

<div id="progressbar"></div>

CSS

.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}

JS

$('#progressbar').progressbar({
value: 37
});

可以看到，我的值是37。然而，当我尝试缩小浏览器宽度时，进度条只是填充它，使值更改为100。

进度条中的进度不响应

我试着搜索解决方案，但没有一个工作。我尝试设置宽度:100%和/或在另一个div中包装进度条等，但没有一个不工作。

我真的希望它保持它填充在只有37%的整个进度条，即使我缩小窗口的大小，就像它是如何在JQuery的链接:https://jqueryui.com/progressbar/.

Answer 1

练习以下内容。

$(function() {
$('#progressbar').progressbar({
value: 37
});
$("#setWidth").change(function() {
$(".progress-wrapper").css("width", $(this).val());
});
});

.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div><label>Set Width</label><input type="text" id="setWidth" /></div>
<div class="progress-wrapper" style="width: 100%;">
<div id="progressbar"></div>
</div>

jQuery UI Progressbar被设计成响应式的。改变这里的窗口，你应该看到边框和内部元素都相应地缩小了。

你也可以通过在上面的字段中输入一个值来改变父元素的宽度，比如40%或240px，它也会做同样的事情。