Вопрос по jquery-mobile – JQuery Mobile добавить анимацию в складной набор

5

Я хотел бы добавить анимацию в складной набор сjQuery Mobile. Let me show a simple example of this:

<code><div id="tiles" data-role="collapsible-set" data-iconpos="right">
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
</div>
</code>

jQuery Mobile прекрасно с этим справляется и показывает мне складной набор из 3 предметов. То, что я хочу, - это АНИМАЦИЯ, однако я не вижу ничего в документации.

Я еще не проверял, насколько простоCSS animation(свойство анимации высоты) будет работать, однако есть лиjQuery Mobile способ сделать это, как повернуть какой-то внутренний флаг?

EDIT Я протестировал простой метод jQuery animate, и он действительно работает. На всякий случай кому-то еще это нужно. Он работает гладко даже на моем телефоне Android 528 МГц в браузере по умолчанию. Добавленный фрагмент действительно прост:

<code>$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
    $(this).next().css('height', '0').animate({
        height: '100px'
    });
});
</code>
@Jasper - Я попробовал position: absolute, когда играл с набором складных предметов (изменил его на tabviewer = слева направо). Хотя было проще установить размеры ширины вкладки, как это, было бы ужасно, если бы отдельные вкладки имели разную высоту, потому что просто не было способа сделать это с помощью pos: abs / rel. Я могу найти пример, если вы хотите посмотреть. frequent
@ Джаспер Я знал о событиях, не знал, что они разоблачены. Спасибо! Я также использую классы JQM css3 для нестраничных элементов. Сложная часть со складными элементами состоит в том, что они являются «встроенными / статичными». элементы (против позиционируется абсолютно). Поэтому, когда я использую анимацию css3 на встроенных элементах, у меня нет возможности обновлять такие вещи, как заполнение страницы во время перехода. Так, на ios4, например, с фиксированным нижним колонтитулом polyfill, нижний колонтитул будет удален из поля зрения во время перехода - это не серьезная проблема, но все же ... frequent
@frequent Я не пробовал, но вы могли бы попытаться расположить свертываемый контент абсолютно точно. Оставьте заголовок в покое, чтобы он занимал необходимое пространство, затем сделайте контент абсолютно позиционированным, чтобы он не занимал пространство вверх при расширении. Вам может потребоваться установить положение складного контейнерного элемента вrelative так что дети используют его в качестве своего смещенного родителя. Jasper
@frequent jQuery Mobile представляетexpand а такжеcollapse события для складных виджетов. Если вы связываетесь с этими событиями, вы можете остановить поведение по умолчанию и анимировать событие вместо этого. Смотрите мой ответ ниже. Jasper
Не из коробки. Я думаю, что проблема заключается в обработке размеров страницы / области просмотра (или высоты) во время & quot; развернуть & quot; или "свернуть" переход. Прямо сейчас вы нажимаете на складную панель, и когда складная панель открыта, соответствующие высоты обновляются. Делать это "в переходе" вероятно, выглядит ужасно, кроме того, чтобы быть фильтром ресурсов. Тем не менее, вы можете попробовать просто добавить / удалить соответствующие переходные классы (сдвинуть вверх / вниз - проверить CSS JQM) к событию развернуть и свернуть внутри разборного виджета JQM. Тогда посмотри, что получится :-) frequent

Ваш Ответ

3   ответа
6

$('[data-role="collapsible"]').bind('expand collapse', function (event) {
    $(this).find('p').slideToggle(500);
    return false;
});​

Мне понравилась идея, за которую ты шел, поэтому я немного поиграл с ней. Это связано с тем, что jQuery Mobile управляет складывающимися виджетами, поэтому он менее хакерский, чем привязка к элементу заголовка.

return false; останавливает поведение по умолчанию, а другая строка переключает содержимое в / из поля зрения, используя jQueryslideUp/slideDown анимации. Вы также можете использовать.fadeToggle() или катите свои собственные анимации. Если вы проверитеevent.type Вы можете анимировать на основе события.

Вот демо:http://jsfiddle.net/VtVFB/

У меня нет большого опыта работы с html, но я сейчас бездельничаю с мобильным jquery. Где именно этот фрагмент кода будет идти?
@ScubaSteve Я не вижу никаких синтаксических ошибок в опубликованном вами коде. Кроме того, я префикс вашего внутреннего выбора для использования$(this).find(... так что вы привязываете только к разборным элементам для страницы, которая инициализируется.
спасибо за улучшенное решение lukas.pukenis
Я пытался заставить это работать, но я продолжаю получать синтаксическую ошибку}); Мой код: $ (document) .on ("pageinit", "quot; [data-role =" page "]", function () {$ (& quot; [data-role = "свернутый"] " ;). bind (& quot; развернуть свернуть & quot ;, функция (событие) {}); & # x200B;});
@ Райан Я бы разместил этот код внутриpageinit обработчик события для конкретной страницы или набора страниц:$(document).on("pageinit", "#somePageID, #someOtherPageID", function () { ... PLACE CODE HERE ... });, этоpageinit Обработчик событий должен быть запущен в глобальной области видимости.
0

& # x200B; Код не совсем правильный.ытий разворачивания коллапса, но не обрабатывает изменение значков раскрытия коллапса.

Лучший код будет:

$('[data-role="collapsible"] h3:first').bind('click', function (event) {
   $(this).next('p').slideToggle(500);
   return false;
});​
2

что в jQuery Mobile 1.4 и выше вам нужно привязать кcollapsibleexpand а такжеcollapsiblecollapse события вместоexpand а такжеcollapse, Таким образом, полный код становится

$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
    $(this).find('p').slideToggle(500);
    return false;
});
Это сработало для меня, вы можете объяснить, как работает этот селектор?$('[data-role="collapsible"]')

Похожие вопросы