环聊，数据表中的Evernote菜单效果 [英] Hangout, Evernote menu effects in dataTables

问题描述

所以我在 jquery DataTables 插件中有一组数据，我想要实现的是一个动作控件下弹出的动作列表。为了清楚的例子，我想举例说明具有该特定功能的环聊和 Evernote 应用程序，下图显示了它：

So I have set of data in jquery DataTables plugin and what I am trying to achieve is a List of actions popup under one action control. For clear example I would like to give example of Hangouts and Evernote application which has that particular functionality and below image shows it:

所以左边的你可以看到环聊的 + 控件，当点击它时会扩展到一个视图，这个视图就像是图像的右侧，即所有其他不同的动作，以及一些从右下角淡入

So left side of the image you can see hangout's + control which when clicked expands to a view which will be like right side of image i.e. with all other different actions and some fade In from bottom right

以下是我的观点，但下面的解决方案很典型，因为它会有CSS问题，特别是从右下方淡入动画我无法实现，目前我只保留 fadeIn 。

Below is what I am upto but the below solution is kind of typical because it will have CSS problem and that particular fade In from bottom right animation I wasn't able to achieve and at present I have kept just fadeIn.

为了更好地理解，这里是 DEMO 以及我目前的情况

For better understanding here is the DEMO and what I am currently upto

如果您点击任何 + 您可以看到任何一行的叠加层以及另外两个向上追加的控件。现在，如果你点击第一行，它将被追加，但顶部控件将部分可见，因为它是 position：absolute [ .appeartop 下面的$ c>]以及编辑的 margin-top / code>和删除控件。

If you click on any + of any row you can see an overlay and 2 more controls appended upwards. Now if you click on first row it will be appended but top control will be partially visible since it is position:absolute [.appeartop] in below css and margin-top has been given for both edit and delete controls.

HTML

<div class="overlay"></div>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
            <th>Actions</th>
        </tr>
    </thead>
</table>

CSS

td.details-control {
    background: url('resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('resources/details_close.png') no-repeat center center;
}
.appeartop
{
    position:absolute;
    display:none;
    z-index:100000;
}
.delete{
    clear:both;
    float:left;
    margin-top:-51px;
}
.edit{
    clear:both;
    float:left;
    margin-top:-102px;
}
.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display:none;
    background-color: rgba(0,0,0,0.5); /*dim the background*/
}

JS

$(document).on('click','.action',function(){ //onclick of action button
    if(!$(this).hasClass('opened'))
    {
        $(this).css('z-index','10000').addClass('opened').toggleClass('glyphicon-plus glyphicon-remove')
        $('.overlay').fadeIn("slow");//just fading in here
    }
    else
    {
        $(this).removeAttr('style').removeClass('opened').toggleClass('glyphicon-plus glyphicon-remove')
        $('.overlay').fadeOut("slow");
    }
    $(this).siblings('.controls').slideToggle();//and slidetoggle here

})

$('.overlay').on('click',function(){
    $(this).fadeOut("fast");
    $('.action.opened').removeAttr('style').removeClass('opened').toggleClass('glyphicon-plus glyphicon-remove')
    $.each($('.controls'),function(){
            if($(this).is(":visible"))
            {
                $(this).fadeOut("slow");
                return;
            }
    })
})


$(document).ready(function() {
    var table = $('#example').DataTable( {
        "aaData":testData,
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" },
            {
                "orderable":      false,
                "data":           null,
                "defaultContent": '<div class="controls appeartop"><button class="btn btn-info glyphicon edit glyphicon-edit"></button>'
                                  +'<button class="btn btn-danger delete glyphicon glyphicon-trash"></button>'
                                  +'</div>'
                                  +'<button class="btn btn-success action glyphicon glyphicon-plus"></button>'
            }
        ],
        "order": [[1, 'asc']]
    } );
});

所以基本上我在这里有2个问题：

So basically I have 2 problems here:

- 如何在没有离线的情况下定位控件？

- 如何获取来自右下角的 .overlay ？

- How to get animation from bottom right for the .overlay?

推荐答案

好的。我为您创建了一个jsFiddle，您可以找到 此处 。以下是详细信息：

All right. I have a created a jsFiddle for you which you can find here. Here are the details:

• 我使用 TweenMax ， GSAP <提供的动画工具之一/ a> ，可以找到其文档 此处 。


• 我还在您现有的<$ c之上创建了一个 .overlay-container 元素$ c> .overlay 元素。要遵循的原因。


• 最初，我设置了一些 .overlay-container 以及<$ c的CSS属性$ c> .overlay 元素使用 .set（） TweenMax 的方法。


• 重要其中 borderRadius ， scaleX 和 scaleY <$上的属性 .overlay-container 元素上的c $ c> .overlay 元素和溢出属性。这就是我在 .overlay 之上创建 .overlay-container 的原因，即设置溢出到隐藏。


• 点击 .action <使用 .fromTo（） （和 .to（） 淡出时的方法）和动画的主要属性是： autoAlpha ， scaleX 和 scaleY 。


• 此处需要注意的另一点是，为了将圆圈定位到点击的 .action <的位置/ code>元素是，我使用jQuery的 .offset（） 获取其位置并将其设置为<的方法code> .overlay 元素在淡入之前。


• 其余部分与您的代码完全相同。

• I resorted to use TweenMax, one of the animation tools provided by GSAP, documentation of which can be found here.
• I also created an .overlay-container element on top of your already existing .overlay element. Reason to be followed.
• Initially, I am setting a few CSS properties of both .overlay-container as well as .overlay elements using the .set() method of TweenMax.
• The important ones are borderRadius, scaleX and scaleY properties on .overlay element and overflow property on .overlay-container element. That is the reason why I created the .overlay-container on top of .overlay i.e. to set the overflow to hidden.
• Upon clicking on .action element, .overlay element is animated by the use of .fromTo() (and .to() method when fading out) and the main properties that are animating are: autoAlpha, scaleX and scaleY.
• Another thing to note here is that in order to position the circle to wherever the clicked .action element is, I used jQuery's .offset() method to get its position and set that to .overlay element just before fading in.
• The rest is pretty much the same code as yours.

JavaScript： （修剪版本，仅显示淡入部分）

JavaScript: (trimmed down version, only showing the fade-in part)

...
TweenMax.set('.overlay-container', {
  position: 'absolute',
  overflow: 'hidden',
  width: $(document).width(),
  height: $(document).height()
});
TweenMax.fromTo('.overlay', duration, {
  autoAlpha: 0,
  top: $(this).offset().top,
  left: $(this).offset().left,
  xPercent: -50,
  yPercent: -50,
  scaleX: 0,
  scaleY: 0
}, {
  autoAlpha: 1,
  scaleX: 3,
  scaleY: 3,
  ease: easeInOut
});
...

希望这有帮助。

更新：

Update:

• 我鼓励您探索这个惊人的工具。所有这些都归功于构建此内容的创作者。我几天前发布了 类似的介绍性答案 你可能会发现有用的重新 GSAP 。


• 另外，我更改了现有的小提琴，以纠正的定位。 overlay 元素从单击的 .action 元素的中心开始。修改过的小提琴可以在 这里 找到，修改本身就可以找到在这条线上： 486 和 487 这个更新过的小提琴。

• I encourage you to explore this amazing tool. All credit to the creators who built this. I posted a similar introductory answer a few days ago that you may find useful re GSAP.
• Also, I modified the existing fiddle just a little bit more to correct the positioning of the .overlay element to start exactly from the centre of the clicked .action element. Modified fiddle can be found here and the modification itself is to be found on the lines: 486 and 487 of this updated fiddle.

这篇关于环聊，数据表中的Evernote菜单效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！