jQuery - 向下滑动面板

时间:2014-03-14 12:07:33

标签: javascript jquery html css

我想创建一个用户必须输入soma数据的网站。为了使这个尽可能简单,我只显示主要的输入元素,并在需要时让帮助面板向下滑动。尽可能地,这些面板应该是可拖动的(我正在为此寻找javascript)。我的主要问题是,当面板向下滑动时,顶部的内容会首先显示,但我想向下滑动,如下所示:

slide-down1

slide-down2

slide-down3

有没有办法做到这一点?

提前致谢。

2 个答案:

答案 0 :(得分:1)

看看这个JSFiddle

这应该表明达到这种效果的原则。你需要一个带有overflow: hidden;的容器div和一个放在容器div底部的子容器,然后你可以用jQuery改变容器的高度来显示/隐藏内容。

此外,为了使面板可拖动,jQuery UI具有一个很棒的功能draggable。试一试。

答案 1 :(得分:1)

快速访问:小提琴:http://jsfiddle.net/VuPyL/1/(已更新),顺便说一句:我让它像切换一样。

一般情况下,它似乎只能通过动画来解决, 如果你不想拥有任何包装元素,你真的想使用DOM的原生属性" scrollHeight" - 允许您始终滚动到底部,结合高度切换,它完全符合您的需要。

溢出:隐藏不必在CSS中 - jQuery在切换高度时自己添加它。

这个解决方案可能看起来有点长,但在实际发生的事情中更清楚:):

HTML

<div id="helper-panel">
    Here's
    <br />
    My
    <br />
    Content    
</div>
<button id="show-helper">Show/hide Helper Panel</button>

CSS

#helper-panel{
   height: 70px;
   width: 375px;
   position: relative;
   overflow: hidden; /*optional - jQuery is adding it*/ 
   display: none;
}

JS / jQuery的

$('#show-helper').click(function(){
    var $helper = $('#helper-panel');
    $helper.animate({
        height: "toggle"
    },{
        duration: 800,
        progress: function(){
            $helper.scrollTop( $helper[0].scrollHeight );       
        }
    });
});

根据@Andrew Pope建议的项目可拖动/可放置,最好使用jQuery UI draggables&amp; droppables

如果您只想使用拖放功能更改辅助菜单项的顺序,请检查sortable。)

jQuery UI不是jQuery的标准部分 - 所以不要忘记包含它。
使用这些时,最好包裹每个可拖动元件。所以HTML将是:

<div id="helper-panel">
    <div>Here's</div>
    <div>My</div>
    <div>Content</div>    
</div>

jQuery(使用jQuery UI):

$('#helper-panel').sortable() //make the items inside #helper-panel sortable
                  .disableSelection() //when sorting, you dont want selecting
                  .css('cursor','default'); //looks better with default cursor