JQuery 进度条插件 - 100% 宽度

发布于 2024-07-27 23:18:54 字数 540 浏览 0 评论 0原文

我再次对这个插件有疑问: http:// t.wits.sg/2008/06/20/jquery-progress-bar-11/

我想要实现的是将进度条的宽度设置为 100%,这样它就和它所在的容器一样宽。

到目前为止我所做的,我已经在插件中更改了这一行:

$bar.css("width",config.width+"px");

对此:

$bar.css("width",config.width+"%");

然后在初始化插件时将宽度设置为 100。 这样就可以了,进度条是 100% 宽,只有一个问题,应该填充进度条的图像(进度条背景)保持相同的宽度,小于进度条宽度并重复自身,这看起来非常糟糕。

我希望这对某人有意义。

如果有人对进度栏插件有任何经验,请帮助我。

Again I have a question regarding this plugin: http://t.wits.sg/2008/06/20/jquery-progress-bar-11/

What I want to achieve is to set the progressbar's width to 100% so it is as wide as a container it is in.

What I have done so far, I have changed this line in the plugin:

$bar.css("width",config.width+"px");

To this:

$bar.css("width",config.width+"%");

And then I set width to 100 when I initialize the plugin. That would work, the progress bar is 100% wide, there is just one problem, the image that is supposed to fill the progressbar (progress bar background) stays the same width which is less than the bar width and repeats itself which looks very bad.

I hope that this makes sense to somebody.

If anybody has any exprience with the Progress Bar plugin please help me.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

惜醉颜 2024-08-03 23:18:54

我认为这是一个样式问题,您可能在图像背景样式上有重复x,这就是它重复的原因,可能您需要制作更大的图像或设置不同类型的背景,例如颜色。

我认为你的 css 应该看起来像这样:

bar{
      background-image:url('mybackground.gif');
      background-repeat:repeat-x; //or just background-repeat:repeat
}

所以你可能需要删除以下行,这将防止随着元素的增长图像被复制。

background-repeat:repeat-x;

或将其更改为:

background-repeat:no-repeat;

因此,如果您想使用该图像以外的用户,可能会是这样的:

 bar{
      background-color:#EEEFFF;
 }

希望这对您有帮助。

I think this is a style problem, and you probably have repeat-x on the image background style that's why it's repeating, probably you will need to make a larger image or set a different kind of background like just color.

I think your css should look something like this:

bar{
      background-image:url('mybackground.gif');
      background-repeat:repeat-x; //or just background-repeat:repeat
}

so you might need to remove the following line, that will prevent the image to be duplicated accross as your element grows.

background-repeat:repeat-x;

or change it for:

background-repeat:no-repeat;

So if you want to user other than that image it could probably be something like:

 bar{
      background-color:#EEEFFF;
 }

Hope this helps you.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文