jQuery UI Progressbar 方向改变答案

【问题标题】：jQuery UI Progressbar direction changejQuery UI Progressbar 方向改变
【发布时间】：2012-06-17 03:44:38
【问题描述】：

jQuery UI Progressbar 的默认方向是从左到右。如何更改它以使其在完成时从右向左移动？下面是我想要实现的一个示例。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-progressbar

【解决方案1】：

您也可以使用 CSS3 将进度条旋转 180 度：

#progressbar {
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* IE 9 */
    -moz-transform:rotate(180deg); /* Firefox */
    -webkit-transform:rotate(180deg); /* Safari and Chrome */
    -o-transform:rotate(180deg); /* Opera */
}

Fiddle

未在旧版本的 IE 上测试。

【讨论】：

不错，但我需要 ie7+ 支持
请用户在他们的 IE6-9 上安装Google Chrome Frame。 :)
我同意，网络会是一个更好的地方，但强迫用户安装软件以获得更好的观看体验会让人想起 ActiveX 时代的糟糕回忆 :)
@Julian 不是太离题，而是“ActiveX 时代”？即使现在 IE9 要求我允许被阻止的 ActiveX 内容访问我自己的网站！嘿，不管怎样，这里有一个CSS3 fully working fiddle even in IE6，GCF 只需点击 2 次即可安装，几秒钟即可下载，自动安装且不需要重新加载页面。从现在开始，我不会用 IE 给自己压力。 :)

【解决方案2】：

仅限 CSS，尝试将其添加到您的页面：

.ui-progressbar .ui-progressbar-value {
  float: right;
}

这不是一个完整的答案，而是一个测试，看看这是否是你想要的。

【讨论】：

js 不起作用，我不知道从 max 开始会如何进行方向切换，假设我是 50%
@Julian 试试这个新的“解决方案”
完美。当然必须将它“向右”浮动并添加一些 jquery "('.ui-corner-left').addClass('ui-corner-right').removeClass('ui-corner-left');"但它工作得很好。不敢相信我以前没有想到这个！可能希望将其更改为 float ：供其他用户将来参考。
当您将来添加其他内容时，您可能希望比仅 .ui-corner-left 更窄一些，但很好。
一个位置怎么样：绝对；对：0； + classChange ui-corner-right。不喜欢漂浮的小伙伴可以试试。

【解决方案3】：

我今天不得不用 angular ui 的进度条解决同样的问题。其他答案很接近，但在 bootstrap 3 中没有改变所有我不能接受的实例。

这行得通...选择器获取第一个子 div，然后应用浮动

.progress-reverse div:nth-of-type(1) {
    float: right;
}

和

<progressbar class="progress-striped progress-reverse active" value="progress" type="{{progressType}}"></progressbar>

希望这会有所帮助！

【讨论】：

【解决方案4】：

$( "#progressbar-2" ).progressbar({
           isRTL: true,
           value: 30,
           max:300
        });

【讨论】：