带有jQuery的iOS / Android通知中心(拖动div down overlay)

时间:2013-06-17 18:40:53

标签: javascript jquery

早上的开发者,

我希望在我的移动优化网站的顶部创建一个固定菜单,用户可以点按并向下拖动以显示网站菜单。

我发现的以下链接几乎就是我正在寻找的但不适用于触摸屏设备:

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

我想使用touchSwipe插件执行一个运行代码的函数,但我不知道该怎么做。

这是我到目前为止编写的代码。

它使用jQuery,jQuery UI和touchSwipe

        // TOUCH SWIPE PLUGIN
            $("#menuContainer").swipe({

             swipeDown: function() { showMenu(); },
             swipeUp: function() { showMenu(); },
             tap: function() { showMenu(); },

            threshold:20,
            fingers:1

        });



    var openHeight = $("#menuContainer").outerHeight();
    var openIHeight = $("#menuContainer").height();
    $("#menuContainer").css('height','0px');
    var closeHeight = $("#menuContainer").outerHeight();
    var tippingPoint = openIHeight/2;
    $("#ddMenu").css('visibility','hidden');




function showMenu() {


    $("#menuContainer").resizable(
        { 
            handles: {
                "s":"#grippie"   
            },
            maxHeight: openIHeight,
            minHeight:0,
            start: function(){
                   $("#ddMenu").css('visibility','visible');
            },
            stop: endDrag
        }
    );

    function endDrag(){
        if ($("#menuContainer").height() > tippingPoint){
            $("#menuContainer").animate({ height:openIHeight }, 500);
        }
        else{
            $("#menuContainer").animate({ height:0 }, 500, function(){
                $("#ddMenu").css('visibility','hidden'); 
            });
        }
    }

}

但这不起作用

请告知

此致 沙恩

0 个答案:

没有答案