jQuery UI Неопределенный ProgressBar не анимируется под Ruby on Rails

У меня возникают проблемы с правильной работой неопределенного пользовательского интерфейса jQuery в приложении Rails. Я основываю свою работу на демонстрациях API jQuery-UI по адресу http://jqueryui.com/progressbar/ и пытаюсь адаптировать это для своего приложения.

Ключевые части примера кода jQuery, которые я пытаюсь эмулировать:

$(function() { $( "#progressbar" ).progressbar({value: false});
<style> #progressbar .ui-progressbar-value {background-color: #ccc;}</style>
<div id="progressbar"></div>

Ключевые части кода в моем приложении Rails следующие:

application.js:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree ./sitewide

JS для конкретной страницы (event.js) - включен в views / events /new.html.erb:

$(document).ready(function() { $( '#progressbar' ).progressbar();
                               //$( '#progressbar' ).css({background: '#aa0000'});
                               $( '#progressbar' ).progressbar( { value: false } );
                             });

application.css:

@import url(http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css);

events.css.scss:

#progressbar .ui-progressbar-value { background-color: #ccc; }

просмотров / События /new.html.erb:

<div id="progressbar"></div>
<%= javascript_include_tag "events" %>

Результирующий HTML на обслуживаемой странице:

<div id="progressbar"></div>
<script src="/assets/events.js?body=1" type="text/javascript"></script>

Этот код создает пустую белую полосу в div индикатора прогресса, а не серую анимированную полосу из демонстрации jQuery. Если я удаляю комментарии в функции document.ready, полоса становится красной (#aa0000), но она по-прежнему не анимированная, просто статическая. Я был бы очень признателен за понимание этого поведения.

Обновление: я нашел следующую ветку - https://forum.jquery.com/topic/progressbar-api-redesign которой говорится, что анимированный оверлейный GIF-файл еще не включен в пакеты тем, поэтому я скачал его и установил его в assets / images / animated-overlay.gif, но он все равно не работает. Я нашел следующие строки в CSS-файле темы Smoothness:

.ui-progressbar .ui-progressbar-overlay {
    background: url("images/animated-overlay.gif");
    height: 100%;
    filter: alpha(opacity=25);
    opacity: 0.25;
}

поэтому я думаю, что я помещаю изображение в нужное место. Какие-либо предложения?

Источник

3 ответа

У меня была та же проблема с неопределенным progressbar, Я бы посоветовал вам скачать пакет тем прямо со страницы ThemeRoller( внизу страницы есть ссылка под названием Темы):

http://jqueryui.com/resources/download/jquery-ui-themes-1.10.3.zip

Извлеките конкретную папку темы, которую вы хотите использовать - в вашем случае smoothness, animated-overlay.gif должны быть включены в папку изображений темы.

В моем случае у меня не было этого .gif и поэтому не было никакой анимации. Как только я добавил .gif в теме images папка это просто сработало.:)

Источник

Я хотел бы ответить на это, хотя приложение, которое я использую, представляет собой обычный веб-сайт ASP.NET от Jane, а серверный язык - C#.

Я заметил, что в IE 11 фоновый GIF для индикатора выполнения JqueryUI не работал, когда я тестировал свои веб-страницы. Моя главная страница тестирования показывает неопределенный индикатор выполнения, когда я нажимаю кнопку "Поиск", и на сервере появляется POST, чтобы запустить метод на стороне сервера. На этой странице я легко смог установить параметры таким образом, чтобы поиск занимал примерно 30 секунд.

Используя один и тот же код в Firefox или Chrome, фоновая картинка GIF на панели прогресса анимируется очень хорошо, когда я возвращаюсь назад. В IE это не так.

Когда в IE открылось окно DOM Explorer, во время ожидания я смог выбрать div индикатора прогресса в окне "Стили", посмотреть атрибуты CSS и убедиться, что оно определило и сохранило включенный GIF-файл для фона. Это означало, что индикатор выполнения действительно отображал анимированный GIF.

Когда я снял флажок фона в окне "Стили", GIF исчез, как и ожидалось. Когда я перепроверил его, GIF вернулся, но он был анимирован!

В качестве заключительного теста я всегда оставлял индикатор выполнения видимым и запускал приложение. Я заметил, что GIF изначально будет выглядеть анимированным. Однако, когда страница отправляется обратно на сайт и ждет ответа, GIF прекращает анимацию.

Все это, конечно же, обсуждалось и осуждалось в другом посте Stackru.

Источник

У меня просто была похожая проблема с приложением MVC4 в ASP.NET.

Моя проблема заключалась в том, что форма сообщения отменила GET анимированного GIF. то есть он был расположен там, где он должен был быть, но не загружался, потому что навигация перенаправила его в другое место заранее.

Я обнаружил это, когда случайно сломал http POST.

Я все еще пытаюсь понять, как заставить анимацию работать, но также отправляю форму.

ОБНОВЛЕНИЕ: Мой (тьфу) хакерский обходной путь на этом этапе состоит в том, чтобы превратить форму в Ajax-форму, используя Microsoft.jQuery.Unobtrusive.Ajax (@Html.BeginForm -> @Ajax.BeginForm), а затем добавить небольшую задержку при отправке формы. через JQuery. Это некрасиво, но пока работает

Источник
Другие вопросы по тегам