jQuery - 创建下拉工具栏组件答案

【问题标题】：jQuery - Creating Pull Down Toolbar ComponentjQuery - 创建下拉工具栏组件
【发布时间】：2014-02-25 03:30:44
【问题描述】：

嘿，所以我有一个 html/php 页面，它有一个工具栏，横跨浏览器顶部的整个宽度，从顶部向下大约 45 像素。工具栏包含在 <div> 中，并使用 CSS 设置样式。我希望栏能够被拖到设定的高度，当用户释放栏时，它会重新回到原来的位置并执行一项任务（即重新加载或$.ajax 的一些很酷的东西）。当用户在 y 平面上拖动它时，我希望栏能够在高度上增长和缩小。我已经使用可拖动的 jquery ui 小部件完成了部分解决方案。这是我的代码：

//functions that handles topBarWrapper drags
$('.topBarWrapper').draggable({
    axis : 'y',
    appendTo : '.mainVideoPage',

    drag: function( event, ui ) {
        //Possible place to set height?
    },

    stop: function( event, ui ) {
        //resset offset and perfrom reload here
        $( this ).offset({ top: 0, left: 0 })
    }
});

上面的代码差不多就完成了。我能够完成<div> 并在释放后立即恢复到原来的偏移量并执行某些操作。我似乎无法让高度工作，有什么想法吗？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我不确定是否要实际更改高度，但是...这里有一个解决方案，它涉及隐藏视口上方的一些可拖动内容并将拖动限制到适当大小和定位的容器（检查小提琴，很难仅从这些 sn-ps 就可以看出这是在做什么）：

http://jsfiddle.net/U2CRH/

<div class="topbar-container">
    <div class="topbar">
        <div class="topsection">
            <div>Pull down to refresh...</div>
        </div>
        <div class="dragger">Pull down...</div>
    </div>
</div>

.topbar-container {
    height:250px;
    position:absolute;
    top:-100px;
    right:0;
    left:0;
}
.topbar {
    width:100%;
    margin:0;
    height:150px;
    position:absolute;
    top:0;
    right:0;
    left:0;
}
.topsection {
    height:100px;
    margin:0;
    padding:0;
    background-color:lightblue;
}
.topsection div {
    padding-top:50px;
}
.dragger {
    height:50px;
    background-color:lightgreen;
    margin:0;
    padding:0;
}

$('.topbar').draggable({
    axis: 'y',
    appendTo: '.mainVideoPage',
    containment: 'parent',

    drag: function (event, ui) {
        //...
    },

    stop: function (event, ui) {
        var $this = $(this);
        if ($this.offset().top >= -20) {
            //perform reload
        } else {            
            $this.animate({
                'top': '0'
            });
        }
    }
});

【讨论】：