Question

我想在webapp中实现类似Android下拉菜单的类似功能： http://cdn4.droidmatters.com/wp-content/uploads/2011/06/android-notifications.jpg

基本上我想从顶部，左侧，右侧，底部将菜单，工具栏，组件等拉进屏幕。现在我已经使用jquery-ui可调整大小的函数

找到了一些基本的东西

$("#menuContainer").resizable();

http://jsfiddle.net/JXeWA/46/

不同之处在于，显示的div非常静态。所以我没有向下移动元素，它已经完全存在，因此“仅”暴露。如果你将它与android下拉状态栏进行比较：在这里你会得到一个印象，即用手指真正拉下了元素。当你把元素拉到显示器中时，它会被连续显示出来 - 希望这样做很难解释。

感谢您的任何想法！

Answer 1

这就是我要去做的事情......

CSS：

#menuContainer{
     position:relative;
     background-color:#A3155C;
     overflow:hidden;
     height:10px;
     padding:5px 5px 12px 5px;
}
#ddMenu{
    position:absolute;
    top:25%;
    width:100%;
    display:none;
}
#grippie{
     height:16px;
     display:inline-block;
     position:absolute;
     left:50%;
     bottom:0px;
     color:#FFF;
     -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width:40px;
    font-size:12px;
}

JAVASCRIPT：

var h = parseInt($("#menuContainer").css('height')); //height mentioned in css - feel free to change

$("#menuContainer").resizable({ 
        handles: {
            "s":"#grippie"   
        },
        maxHeight:50, 
        minHeight:0,
        resize: function(){
            if($(this).height()<=h){
                 $("#ddMenu").hide();
            }else{
                $("#ddMenu").show();
            }

        }
});

样本： http://jsfiddle.net/JXeWA/112/

希望这就是你要找的东西。如果您还有其他需要，请告诉我。

Answer 2

如果你的目标是一种拉动，接着是动画，那么使用jQuery UI会有点困难。我想到的提示是你拉菜单然后触发'mouseup'或任何事件来释放菜单，然后继续动画。但它可能是错误的。

在JavaScript中创建一个下拉菜单/ div

2 个答案: