jquerymobile 1.4.2 - 动画可折叠 [英] jquerymobile 1.4.2 - Animate collapsible

问题描述

我要在动画jQuery Mobile的1.4.2可折叠集。不幸的是我没有发现任何东西。所有的动画脚本使用1.3.2版本1.4.0奥德

我还是个新手，不知道如果我只是可以向下切换到1.4.0或1.3.2保持我的设计？

我该怎么办？

解决方案

下面是一个办法做到这一点：

而不是一个collapsibleset的，使用带有包装的div的类=UI可折叠集，这给你可折叠集造型，但可以让你实现逻辑：

 ＆LT; D​​IV CLASS =UI可折叠集＆GT;
    ＆LT; D​​IV数据角色=可折叠级=animateMe＆GT;
        ＆LT; H3＆gt;部分1＆LT; / H3 GT＆;
    ＆LT; P＆GT;我为第1＆LT可折叠的内容; / P＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV数据角色=可折叠级=animateMe＆GT;
        ＆LT; H3＆gt;部分2'; / H3 GT＆;
    ＆LT; P＆GT;我为第2版可折叠内容; / P＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV数据角色=可折叠级=animateMe＆GT;
        ＆LT; H3＆gt;部分3'; / H3 GT＆;
    ＆LT; P＆GT;我为第3版可折叠内容; / P＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我在添加一个处理程序添加一个类animateMe到每个可折叠方便：

  $（。animateMe的.ui可折叠镦曲肘）。在（点击，功能（E）{
    VAR电流= $（本）.closest（UI-可折叠的。）;
    如果（current.hasClass（UI-可折叠倒塌））{
        //崩溃所有其他人，然后展开这一项
        $(\".ui-collapsible\").not(\".ui-collapsible-collapsed\").find(\".ui-collapsible-heading-toggle\").click();
        $（UI-可折叠内容，电流）.slideDown（300）;
    }其他{
        $（UI-可折叠内容，电流）.slideUp（300）;
    }
}）;
 

这code是每个可折叠标题的单击处理程序。它检查是否点击的可折叠目前正在展开或折叠。如果扩张，我们简单地用效果基本show动画崩溃了。如果垮了，我们首先折叠任何展开的项目，然后展开这一项的了slideDown动画。

如果你想允许多个项目在同一时间进行扩充，只是删除这一行：

<$p$p><$c$c>$(\".ui-collapsible\").not(\".ui-collapsible-collapsed\").find(\".ui-collapsible-heading-toggle\").click();

  

下面是一个工作的 演示

I want to animate a collapsible set in jquery mobile 1.4.2. Unfortunately I haven't found anything. All animated scripts use version 1.3.2 oder 1.4.0.

I'm still a newbie and don't know if I just can switch down to 1.4.0 or 1.3.2 keeping my design?

What can I do?

解决方案

Here is a way to do it:

Instead of a collapsibleset, use a wrapper div with the class="ui-collapsible-set", this gives you the collapsible set styling, but then allows you to implement the logic:

<div class="ui-collapsible-set">
    <div data-role="collapsible" class="animateMe">
        <h3>Section 1</h3>
    <p>I'm the collapsible content for section 1</p>
    </div>
    <div data-role="collapsible" class="animateMe">
        <h3>Section 2</h3>
    <p>I'm the collapsible content for section 2</p>
    </div>
    <div data-role="collapsible" class="animateMe">
        <h3>Section 3</h3>
    <p>I'm the collapsible content for section 3</p>
    </div>
</div>

I have added a class of animateMe to each collapsible for convenience in adding a handler:

$(".animateMe .ui-collapsible-heading-toggle").on("click", function (e) { 
    var current = $(this).closest(".ui-collapsible");             
    if (current.hasClass("ui-collapsible-collapsed")) {
        //collapse all others and then expand this one
        $(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();
        $(".ui-collapsible-content", current).slideDown(300);
    } else {
        $(".ui-collapsible-content", current).slideUp(300);
    }
});

This code is a click handler on each collapsible header. It checks to see if the clicked collapsible is currently expanded or collapsed. If it is expanded, we simply collapse it with the slideUp animation. If it is collapsed, we first collapse any expanded items and then expand this one with the slideDown animation.

If you want to allow multiple items to be expanded at the same time, just remove this line:

$(".ui-collapsible").not(".ui-collapsible-collapsed").find(".ui-collapsible-heading-toggle").click();

Here is a working DEMO

这篇关于jquerymobile 1.4.2 - 动画可折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！