jQuery mobile 将动画添加到可折叠集答案

【问题标题】：jQuery mobile add animation to collapsible-setjQuery mobile 将动画添加到可折叠集
【发布时间】：2012-05-03 20:07:42
【问题描述】：

我想用 jQuery Mobile 为可折叠集合添加动画。让我举一个简单的例子：

<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>

jQuery Mobile 完美地处理了这个问题，并向我展示了可折叠的 3 个项目。我想要的是动画，但我似乎在文档中找不到任何内容。

我还没有测试过 CSS 动画（动画高度属性）有多简单，但是有没有一种 jQuery Mobile 方法来实现它，比如转动一些内部标志?

编辑我已经测试了一个简单的 jQuery animate 方法，它确实有效。以防万一其他人需要这个。即使在我的 528MHz Android 手机的默认浏览器上，它也能流畅运行。我添加的一个 sn-p 非常简单：

$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
    $(this).next().css('height', '0').animate({
        height: '100px'
    });
});

【问题讨论】：

不是开箱即用的。我认为问题是在“展开”或“折叠”过渡期间处理页面/视口尺寸（又名高度）。现在你点击一个可折叠的，当可折叠打开时，相关的高度会更新。除了成为资源过滤器之外，这样做“过渡”可能看起来很糟糕。您仍然可以尝试通过在 JQM 可折叠小部件内的展开和折叠事件中添加/删除相应的转换类（向上/向下滑动 - 检查 JQM CSS）。然后看看会发生什么:-)
@frequent jQuery Mobile 公开了可折叠小部件的 expand 和 collapse 事件。如果您绑定到这些事件，您可以停止默认行为并改为为事件设置动画。请参阅下面的答案。
@Jasper 我知道这些事件，但不知道它们被曝光了。谢谢！我还将 JQM css3 类用于非页面元素。可折叠元素的难点在于它们是“内联/静态”元素（相对于绝对定位）。因此，当我在内联元素上使用 css3 动画时，我无法在过渡期间更新页面填充等内容。因此，在 ios4 上，例如使用 polyfill 固定页脚，页脚将在过渡期间被推到视野之外 - 这不是一个严重的问题，但仍然......
@frequent 我没试过，但你可以尝试绝对定位可折叠内容。单独保留标题以占用必要的空间，然后使内容绝对定位，以便在展开时不会占用空间。您可能需要将可折叠容器元素的位置设置为relative，以便子元素将其用作偏移父元素。
@Jasper - 我尝试了 position:absolute，在玩可折叠集时（将其更改为 tabviewer = 从左到右）。虽然像这样设置选项卡宽度尺寸更容易，但如果单个选项卡具有不同的高度，那就太糟糕了，因为无法使用 pos:abs/rel 来实现这一点。如果你想看看，我可以挖一个例子。

标签： jquery-mobile

【解决方案1】：

来吧：

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

我喜欢你的想法，所以我尝试了一下。这与 jQuery Mobile 控制可折叠小部件的方式挂钩，因此与绑定到标题元素相比，它不那么笨拙。

return false; 停止默认行为，另一行使用 jQuery slideUp/slideDown 动画切换内容进/出视图。您也可以使用.fadeToggle() 或滚动您自己的动画。如果您选中event.type，您可以根据触发的事件制作动画。

这是一个演示：http://jsfiddle.net/VtVFB/

【讨论】：

我没有太多的 html 经验，但我现在正在搞乱 jquery mobile。这段代码 sn-p 究竟会去哪里？
@Ryan 我会将此代码放在特定页面或页面集的pageinit 事件处理程序中：$(document).on("pageinit", "#somePageID, #someOtherPageID", function () { ... PLACE CODE HERE ... });。这个pageinit 事件处理程序应该在全局范围内运行。
我一直试图让它工作，但我一直在 });我的代码是： $(document).on("pageinit", "[data-role='page']", function () { $("[data-role='collapsible']").bind("expand崩溃", 函数 (事件) { }); });
@ScubaSteve 我在您发布的代码中没有看到任何语法错误。另外，我会为您的内部选择添加前缀以使用 $(this).find(...，以便您只绑定到正在初始化的页面的可折叠元素。

【解决方案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"]')

【解决方案3】：

代码并不完全正确。它覆盖了展开折叠事件的默认 jquery 移动实现，但不处理展开折叠图标的变化。

更好的代码是：

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

【讨论】：

【解决方案4】：

接受的答案并没有说明它不会因为返回 false 而改变可折叠光标，所以这是我的答案：

在我的项目中，与[date-role="collapsible"] 相关的内容是$(this).find('>*:not(h3)')

/* animate collapsible-set */
$('[data-role="collapsible"]').on('expand', function (event) {
    $(this).find('>*:not(h3)').each(function() {
        if (!$(this).is(':visible')) {
            $(this).stop().slideToggle();
        }
    });
}).on('collapse', function (event) {
    $(this).find('>*:not(h3)').each(function() {
        if ($(this).is(':visible')) {
            $(this).stop().slideToggle();
        }
    });
});

【讨论】：