Заполнение индикатора выполнения - реализация jQuery

Question

Я реализую свой собственный Progress Bar, используя jQuery. Мой вопрос, как я могу заполнить (например) только 30% его фоном? Какие у меня варианты? По сути, индикатор выполнения представляет собой простой div с закругленными углами (-moz-border-radius). Я использую Firefox 3.6.3.

[Update] Я попробовал этот пример. Как заставить правую сторону заполненной области не скругляться, как в третьем примере? Четвертый пример, тем не менее, проблематичен ... Как бы вы решили это?

Спасибо!

Answer 1

Простой вариант - использовать цвет фона, убедиться, что ширина внешнего контейнера фиксирована, а затем просто установить ширину внутреннего div в процентах, равных прогрессу.

Answer 2

Не знаю, что вы используете для анимации индикатора выполнения, но если вы можете изменить радиус по мере приближения к концу, вы можете получить плавный переход.

$('#inner4')
    .css('width',25)
    .css('-moz-border-radius-topright','0')
    .css('-moz-border-radius-bottomright','0')
    .animate(
      {
        width:425
      },
      3000, 'linear',
      function() {
          $('#inner4').animate({
            width:450,
            '-moz-border-radius-bottomright':'+=25',
            '-moz-border-radius-topright':'+=25'
          },
          200,'linear',
          function() {}
        );//end inner animate
      }
    );//end animate

Вот пример

Answer 3

Вы можете использовать один div и изображение, как я упоминал ранее в комментарии. Вот способ, которым вы могли бы сделать это. (Проверено не полностью, поэтому может сломаться.)

HTML:

<div id="progressBar"></div>

CSS:

 #progressBar {
   width: 200px;
   height: 20px;
   background: url('http://o.imm.io/x9E.jpg') no-repeat;
   background-position: -200px 0px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}

JS:

function setProgress(target,value) {

  var oldPosition = $(target).css("backgroundPosition");

  // Log the old position 
  console.log("Old position: " + oldPosition);
  var newPosition = parseInt(oldPosition) + parseInt(value);

  // Log the new position
  console.log("New position: " + newPosition);
  $(target).animate({backgroundPosition: newPosition + 'px 0px'})
}

Редактировать : я добавил закругленные углы, и все работает точно так, как вы указали, с закругленными углами проблем нет.

Редактировать 2 : ознакомьтесь с JSBin версией этого кода.

Редактировать 3 : Как сказал ОП, им нужно, чтобы индикатор выполнения был гибко изменен. Эта реализация не сделает этого. Я собираюсь порекомендовать (как и раньше) использование jQueryUI Progress Bar . Это простой в использовании и довольно легкий.

Редактировать 4 : я придумал другую реализацию этого, которая требует немного больше Javascript, но вы можете проверить это здесь: http://jsfiddle.net/ntnz4/7/

Answer 4

Вы можете использовать 2 div, один внутри другого, поместить фон на внутренний и установить его ширину с%, примерно так:

<div style="">
    <div style="background: red; width: 50%">&nbsp;</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 5

HTML:

<div class="progress"><div style="width:30%"></div></div>

CSS:

    .progress {
    width: 300px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.progress div {
    background: url(background.png);
    height: 10px;
    -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px;
    -webkit-border-top-right-radius: 5px; -webkit-border-top-right-radius: 5px;
}

Answer 6

Я сделал то, что вы делаете для нескольких моих сайтов, вот что я сделал:

Сначала я сделал некоторую базовую разметку:

<div id="progressBar">
    <div id="progressBarInner"></div>
</div>

И CSS:

#progressBar {
    width: 200px;
    height: 20px;
}

#progressBarInner {
    background: url('path/to/your/progress/image.jpg');
    width: 100%;
    height: 100%;
}

Когда это сделано, настройка прогресса на самом деле очень проста.Какой бы прогресс вы не хотели отображать в индикаторе выполнения, вы устанавливаете ширину элемента #ProgressBarInner.Например, если вы хотите показать 32%, вы должны установить это:

width: 32%

для progressBarInner div.

Я не знаюкак это сделать с помощью jQuery, но я точно знаю, что вы можете установить свойства CSS, используя его, так что это вполне возможно.

Answer 7

Я немного запутался в том, что вы хотите сделать относительно закругленных углов на закрашенном цвете! Но если предполагается, что он идет прямо, а не округляется, просто установите div-обертку с переполнением css: hidden;

При этом внутренний div будет продвигаться до 100%, а при прохождении закругленной области создаст крутой эффект!