там должен так или иначе иметь jQuery ui, индикатор выполнения обнаруживаются вертикальный?
я хочу, чтобы индикатор выполнения показал percentfilled, но я хочу сделать его вертикальным как термометр как это ниже. действительно ли это возможно с опцией на JQuery индикатор выполнения UI? Я хочу что-то, что похоже на этот http://magellanband.files.wordpress.com/2009/05/fundraiser-goal-thermometer-thumb7625364.jpg
3 ответа
Существует плагин , но я не использовал его, поэтому не знаю, сможете ли вы его адаптировать.
Или вы можете просто создать свой собственный, используя HTML и CSS. Я сделал демонстрацию здесь , где я добавил jQuery UI Slider для управления внешним видом панели. Вот базовый код (только для панели)
HTML
<div class="progressbar">
<span class="progressbar-value">
<em class="progressbar-cover"></em>
</span>
</div>
CSS
.progressbar {
width: 25px;
height: 215px;
position: relative;
background: transparent url(http://i48.tinypic.com/290tvnk.png) no-repeat;
}
.progressbar-value {
position: absolute;
display: block;
margin: 0;
border: 0;
width: 15px;
height: 200px;
top: 7px;
left: 5px;
overflow: hidden;
text-indent: -30px;
background: #0f0 url(http://i45.tinypic.com/minc5g.png) center center;
}
.progressbar-cover {
position: absolute;
display: block;
width: 15px;
height: 200px;
border: 0;
left: 0;
bottom: 0%;
background: transparent url(http://i49.tinypic.com/1zwge3s.png) repeat-x 0 0;
}
В настоящее время нет возможности, но было бы легко изменить виджет, чтобы он делал то, что вы хотите. Источник индикатора выполнения ясен, просто измените функцию _refreshValue () внизу и немного поиграйте с CSS. Удачи!
Я нашел этот плагин. Он позволяет вертикальную и горизонтальную ориентацию. Я сделал некоторые изменения в коде, чтобы быть ближе к вашей картинке. Вот как вы можете его использовать:
HTML
CSS
.jProgressBar_Red .border {
background-color: #000000;
}
.jProgressBar_Red .border .background {
background-color: red;
}
.jProgressBar_Red .border .background .bar {
background-color: #ffffff;
}jQuery
Вы должны включить Plugin, а затем script, который использует все остальные сотрудники. Я изменил демо, которое дается на сайте плагина, чтобы оно было красным, вертикальным и останавливалось на 100%. Вот изменения:
Чтобы остановить прогресс и не сбрасывать его, используйте следующее:
function incPercent() {
percentDone = percentDone + 1;
if (percentDone > 100) {
percentDone = 100;
}
setPercent();
}
В оригинальной версии прогресс бар заполняется сверху вниз, поэтому я перевернул его вот так:
function setPercent() {
bar.setPercent(100-percentDone); //set the progress
percentText.text(100-percentDone); //set the text (i.e. "xx%")
//make the bar gradually "whiter" as it approches 100%
var lr = Math.floor( (255-r)* 0.8 * percentDone / 100 + r);
var lg = Math.floor( (255-g)* 0.8 * percentDone / 100 + g);
var lb = Math.floor( (255-b)* 0.8 * percentDone / 100 + b);
//change the bar color of the bottom bar
//note: calling jProgressBar here simply casts the jQuery object as a jProgressBar object
bar.eq(1).jProgressBar().setBarColor("#" + lr.toString(16) + lg.toString(16) + lb.toString(16));
}
Вы также можете взглянуть на код и найти гораздо более красивый способ для этого. Переменные lr,lg, lb используются для создания градиента цвета заливки. Если вы хотите использовать это, вам следует изменить значения переменных r,g,b в файле default.js на цвет начала. Если вы хотите, чтобы прогресс-бар имел другую форму, например, термометра, как на представленном вами изображении, вы можете поместить пустой термометр в качестве фона, а над ним - div, который будет заполняться.