Question

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

因此，您可以在图片的左侧看到视频群聊的 + 控件，当点击该视频时，该视图将扩展为与图像右侧相同的视图，即所有其他不同的动作和一些淡入从右下角

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

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

如果您点击任意行的+，您可以看到叠加层，另外还有2个控件向上追加。现在，如果您单击第一行，它将被追加，但顶部控件将部分可见，因为position:absolute下面.appeartop已设置css margin-top edit和delete控制。

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']]
    } );
});

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

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

- 如何从.overlay的右下角获取动画？

环聊，数据表中的Evernote菜单效果

0 个答案: