如何让我的进度条响应它设置的值？

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 。

进度条中的进度互不响应

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

我真的希望即使我缩小 window 的大小时，它也只会填满整个进度条的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 设计为响应式。 在此处更改 window，您应该会看到边框和内部元素都相应地缩小了。

您还可以通过在上面的字段中输入一个值来更改父级的宽度，例如40%或240px ，它会做同样的事情。