2

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

基本上我想将菜单、工具栏、组件等从顶部、左侧、右侧、底部拉入屏幕。现在我已经使用 jquery-ui resizable 函数找到了一些基本的东西

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

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

不同之处在于，显示的 div 是相当静态的。所以我没有随着元素向下移动，它已经完全存在，因此“仅”暴露。如果您将其与类似 android 下拉状态栏的内容进行比较：在这里您会得到这样的印象，即该元素确实是用手指向下拉的。当您将元素拉入显示器时，它会连续显示 - 希望有意义，很难解释。

谢谢你的任何想法！

4

2 回答 2

3

这就是我将如何去做...

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/

希望这是您正在寻找的。需要帮助请叫我。

于 2012-12-10T19:09:42.787 回答
1

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

于 2012-12-10T17:30:35.253 回答