1

ユーザーがハンドルをクリックするとスライドする引き出しを実装しようとしています。ページのコンテンツも押し下げられるため、重複しません。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();
4

1 に答える 1

0

bodyこれは、またはその両方のマージン/パディングがul消えて再出現することに関係しています。

これを参照してください：http://jsfiddle.net/pFsun/2/

于 2013-08-14T19:54:31.083 に答える