我正在尝试实现一个抽屉,当用户点击手柄时它会向下滑动。页面内容也会被推下,因此不会重叠。当抽屉被展开/折叠时,除了div#drawer-content
跳跃之外它的一切都很好。这是一个小小的跳跃,但我无法弄清楚为什么或如何防止它。
工作示例:http://jsfiddle.net/pFsun/
代码:
var InterestBalanceDrawer = (function($, window, document){
var drawer, space, handle, interest_list, body;
var settings = {
content_height: 250,
handle_height: 20,
drawer_height: 30,
drawer_slim_height: 15
};
/**
* Initialize the drawer element handles and call setup functions.
*/
var init = function() {
// We will be moving the body when the drawer expands/collapses
body = $('body');
// Container
drawer = $('<div id="drawer" data-expanded="false"></div>');
// This is the content container of the drawer
content = $('<div id="drawer-content"></div>');
// The button/handle the user clicks on to show/hide the drawer space
handle = $('<div id="drawer-handle">Show</div>');
// The list of interests inside the drawer space
interest_list = $('<ul id="drawer-interest-list"></ul>');
mockCSS();
buildInterestList();
bindUIEvents();
attachToDOM();
}
/**
* Development only. This will be replaced by real CSS
*/
var mockCSS = function() {
drawer.css({
'height': settings.drawer_height,
'width': '100%',
'position': 'relative',
'margin-bottom': '25px'
});
content.css({
'position': 'relative',
'background': '#cccccc',
'height': 0
});
handle.css({
'position': 'absolute',
'height': settings.handle_height,
'bottom': '0',
'padding': '5px',
'background': '#333',
'color': '#fff',
'cursor': 'pointer'
});
}
/**
* Fetches a list of interests and balances. Builds interest_list
*/
var buildInterestList = function() {}
var collapseDrawer = function() {
drawer.animate({
'height': '-='+settings.content_height
});
content.animate({
'height': '-='+(settings.content_height)
});
handle.text(handle.data('label'));
}
var expandDrawer = function() {
drawer.animate({
'height': '+='+settings.content_height
});
content.animate({
'height': '+='+(settings.content_height)
});
handle.text(handle.data('label'));
}
/**
* All event binding should be defined here
*/
var bindUIEvents = function() {
handle.on('click', function(e){
// Flip the data-expanded value
drawer.data('expanded', drawer.data('expanded') === true ? false : true);
// Flip the data-visible value
handle.data('label', drawer.data('expanded') === true ? 'Hide' : 'Show');
if(drawer.data('expanded') === true) {
expandDrawer();
} else {
collapseDrawer();
}
});
}
/**
* Attached everything together and insert in to the DOM
*/
var attachToDOM = function() {
interest_list.appendTo(content);
content.appendTo(drawer);
handle.appendTo(drawer);
var fragment = document.createDocumentFragment();
drawer.appendTo(fragment);
body.prepend(fragment);
}
// Public variables and methods
return {
init: init
}
})(jQuery, window, document)
InterestBalanceDrawer.init();