JQuery UI Layout: Как получить 3 кнопки переключения для закрытия, изменения размера, полного режима отображения панели

Question

Мое требование относится к демонстрационной версии, указанной в макете пользовательского интерфейса jQuery.

Мне нужно получить три переключателя, как показано выше, но моя интеграция не показывает мне три цветные кнопки переключения. Я проверил загрузку контента на страницах демо и моего сайта, но div itseld не заполняется в моем html...:(

Я что-то пропустил?

Я сделал вещи, как показано ниже:

$(document).ready(function(){

    // CREATE THE LAYOUT
    myLayout = $('body').layout({
        resizeWhileDragging:            true
    ,   fxName:                         "none"
    ,   west__size:                     westDefaultSize
    ,   south__size:                    southDefaultSize
    ,   spacing_open:                   8
    ,   spacing_closed:                 8
    ,   north__spacing_open:            0
    ,   west__togglerLength_closed:     105
    ,   west__togglerLength_open:       105
    ,   south__togglerLength_closed:    105
    ,   south__togglerLength_open:      105
    ,   west__togglerContent_closed:    toggleButtons
    ,   west__togglerContent_open:      toggleButtons
    ,   south__togglerContent_closed:   toggleButtons
    ,   south__togglerContent_open:     toggleButtons
    });

    // SET OBJECT POINTERS FOR CONVENIENCE
    var
        $westToggler  = myLayout.togglers.west
    ,   $southToggler = myLayout.togglers.south
    ;

     var toggleButtons = '<div class="btnToggler"></div>'
            + '<div class="btnReset"></div>'
            + '<div class="btnExpand"></div>';
    // UN-BIND DEFAULT TOGGLER FUNCTIONALITY
    $westToggler.unbind("click");
    $southToggler.unbind("click");

    // BIND CUSTOM WEST METHODS
    $westToggler.find(".btnToggler")    .click( toggleWest );
    $westToggler.find(".btnExpand")     .click( expandWest );
    $westToggler.find(".btnReset")      .click( resetWest );

    // BIND CUSTOM SOUTH METHODS
    $southToggler.find(".btnToggler")   .click( toggleSouth );
    $southToggler.find(".btnExpand")    .click( expandSouth );
    $southToggler.find(".btnReset")     .click( resetSouth );

    // ADD TOOLTIPS TO CUSTOM BUTTONS
    $(".btnExpand").attr("title", "Expand to full size");
    $(".btnReset") .attr("title", "Reset size to default");

});

// CUSTOM WEST METHODS
function toggleWest  (evt) { myLayout.toggle("west"); evt.stopPropagation(); };
function expandWest  (evt) { sizePane("west", 500); };
function resetWest   (evt) { sizePane("west", westDefaultSize); };

// CUSTOM SOUTH METHODS
function toggleSouth (evt) { myLayout.toggle("south"); evt.stopPropagation(); };
function expandSouth (evt) { sizePane("south", 9999); }; // ie, make as big as possible
function resetSouth  (evt) { sizePane("south", southDefaultSize); };

// GENERIC HELPER FUNCTION
function sizePane (pane, size) {
    myLayout.sizePane(pane, size);
    myLayout.open(pane); // open pane if not already
};

Было только одно отличие:

var myLayout = $('#layout-wrapper').layout();

Я вызываю макет при загрузке страницы, затем при нажатии кнопки добавляю переключатели:

myLayout.addToggleBtn();

что-то вроде выше.

Пожалуйста, дайте мне знать, как мы можем добиться макета с помощью переключателей, когда выполняется создание макета для макета.

Answer 1

Первое, что я вижу, это то, что вы пропали без вести toggleButtons определение. В приведенном вами примере это

toggleButtons = '<div class="btnToggler"></div>'
          + '<div class="btnReset"></div>'
          + '<div class="btnExpand"></div>';

Но я не вижу их в вашем коде, но вы ссылаетесь на них в своем определении макета?