我想创建一个用户必须输入soma数据的网站。为了使这个尽可能简单,我只显示主要的输入元素,并在需要时让帮助面板向下滑动。尽可能地,这些面板应该是可拖动的(我正在为此寻找javascript)。我的主要问题是,当面板向下滑动时,顶部的内容会首先显示,但我想向下滑动,如下所示:
有没有办法做到这一点?
提前致谢。
答案 0 :(得分:1)
看看这个JSFiddle。
这应该表明达到这种效果的原则。你需要一个带有overflow: hidden;
的容器div和一个放在容器div底部的子容器,然后你可以用jQuery改变容器的高度来显示/隐藏内容。
答案 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