2

私はウェブアプリでアンドロイドからプルダウンメニューのようなものを実現したいと思います: http://cdn4.droidmatters.com/wp-content/uploads/2011/06/android-notifications.jpg

基本的には、メニュー、ツールバー、コンポーネントなどを上、左、右、下から画面に取り込みたいと考えています。jquery-uiのサイズ変更可能な関数を使用して、すでに基本的なものを見つけました

$("#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 に答える