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

Question

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

5

Источник Задан 03 May 2012, 21:21 от lukas.pukenis

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

04 May 2012, 17:25

@ Джаспер Я знал о событиях, не знал, что они разоблачены. Спасибо! Я также использую классы JQM css3 для нестраничных элементов. Сложная часть со складными элементами состоит в том, что они являются «встроенными / статичными». элементы (против позиционируется абсолютно). Поэтому, когда я использую анимацию css3 на встроенных элементах, у меня нет возможности обновлять такие вещи, как заполнение страницы во время перехода. Так, на ios4, например, с фиксированным нижним колонтитулом polyfill, нижний колонтитул будет удален из поля зрения во время перехода - это не серьезная проблема, но все же ... frequent

04 May 2012, 07:09

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

04 May 2012, 16:31

@frequent jQuery Mobile представляетexpand а такжеcollapse события для складных виджетов. Если вы связываетесь с этими событиями, вы можете остановить поведение по умолчанию и анимировать событие вместо этого. Смотрите мой ответ ниже. Jasper

03 May 2012, 23:54

Не из коробки. Я думаю, что проблема заключается в обработке размеров страницы / области просмотра (или высоты) во время & quot; развернуть & quot; или "свернуть" переход. Прямо сейчас вы нажимаете на складную панель, и когда складная панель открыта, соответствующие высоты обновляются. Делать это "в переходе" вероятно, выглядит ужасно, кроме того, чтобы быть фильтром ресурсов. Тем не менее, вы можете попробовать просто добавить / удалить соответствующие переходные классы (сдвинуть вверх / вниз - проверить CSS JQM) к событию развернуть и свернуть внутри разборного виджета JQM. Тогда посмотри, что получится :-) frequent

03 May 2012, 20:42

3 ответа

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

от Jasper · Answer 1 · 03 May 2012, 23:52

$('[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/

от Daniel Berler · Answer 2 · 28 May 2013, 05:06

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

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

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

от lukas.pukenisPeter Kassenaar · Answer 3 · 29 Aug 2014, 08:02

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

$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
    $(this).find('p').slideToggle(500);
    return false;
});