Улучшения jQuery-страницы - PullRequest
Новая
       10

Улучшения jQuery-страницы

0 голосов
/ 05 марта 2012

Я поигрался с этой страницей, добавив стили CSS3 и все.

http://daokun.webs.com/jQuery/Progress.html

Индикатор прогресса был предложен мне Макотосаном, в то время как идея плавной анимации с использованиемCSS3 от MorrisLiang

Я использовал этот сайт для создания диагональной анимации на панели, детализации и изменения цвета.То же самое и с кнопками.

http://www.catswhocode.com/blog/how-to-create-a-kick-ass-css3-progress-bar

Теперь я доволен этим, получилось неплохо, но меня беспокоит то, что планка переходит от 0% к чему-либои наоборот он мгновенно исчезает.CSS3-переход применяется к ширине, которая работает просто отлично, но когда полоса изменяется на 0%, она больше не применяется к ширине, но к стилю отображения.Он переходит от отображения: блок к отображению: ни одна ведьма не заставляет его мгновенно исчезнуть.Можно ли как-нибудь сделать так, чтобы этот бит плавно достигал 0%, или мне просто придется жить с мгновенно опустевшей панелью?

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

При необходимости это страница CSS: http://daokun.webs.com/jQuery/myUi.custom.css

Что касается источника представления HTMLдолжно быть достаточно.

1 Ответ

1 голос
/ 05 марта 2012

Бит в вашем источнике, который говорит: 

progress.progressbar('value', progress.progressbar('value') - 5);

Изменить на: 

if(progress.progressbar('value') == 5) {
    progress.animate({width: '0%'}, 200);
} else {
    progress.progressbar('value', progress.progressbar('value') - 5);
}

И другой бит: 

progress.progressbar('value', progress.progressbar('value') + 5);

Должно бытьизменено на: 

if(progress.progressbar('value') == 0) {
    progress.animate({width: '5%'}, 200);
} else {
    progress.progressbar('value', progress.progressbar('value') + 5);
}

Для изменяющегося значения вы хотите использовать самозапускающуюся функцию, используя setTimeout (не setInterval, поскольку это не ожидает завершения одного вызова функции до следующего),Эта функция установит значение диапазона равным текущей ширине индикатора выполнения, а не значение индикатора выполнения, как я полагаю, даже если оно находится между двумя значениями по ширине, оно вернет только значение, которое вы в последний раз установили (то есть, кратное 5).

Вы также хотели бы установить значение индикатора выполнения в обратном вызове функций анимации, описанных выше, но обратите внимание, что при анимации от 0 до 5 вы хотите установить progress.find(".ui-progressbar-value").css({display: "block"}).Я не могу дать вам ответы на все вопросы, поэтому я оставлю вас, чтобы выяснить, где это можно изменить.

...