2013-05-13 3 views
1

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

Я хотел бы иметь установку с более вертикальным пространством для боковых панелей: северная панель будет полной ширины, но южная панель будет лежать между востоком и западом, сжимаясь по ширине, если какая-либо из боковых панелей будет открыта. Другими словами, боковые панели должны пройти весь путь до дна.

Возможно ли настроить компоновку jquery следующим образом? Я не могу найти ничего связанного в документации, и я использую в значительной степени недокументированную версию версии 1.3 Release Candidate.

ответ

0

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

0

Лучшее решение для этих вариантов:

  • Создание макета север
  • Создать запад макет
  • Создание макета центра и установить класс Проппер, бывший «внешний-центр»
    • Создайте восточный макет внутри «внешнего центра» и определите его классом.
    • Создайте макет центра внутри «внешнего центра» и оцените его класс.
    • Создание макета на юг внутри «космического центра и Ассинг его класс.

И вызовите функцию JS инициализации снова следующим способом (с использованием новых классов).

<div class="ui-layout-north"></div> 
<div class="ui-layout-west"></div> 
<div class="ui-layout-center outer-center"> 
    <div class="ui-layout-east middle-east"></div> 
    <div class="ui-layout-center middle-center"></div> 
    <div class="ui-layout-south middle-south"></div> 
</div> 
<div class="ui-layout-south"></div> 

$(document).ready(function() { 
    var myLayout = $('body').layout({ 
     north__size:   140, 
     north__maxSize:   140, 
     west__size: 250, 
     center__paneSelector: ".outer-center", 
     center__childOptions: { 
      center__paneSelector: ".middle-center", 
      east__paneSelector:  ".middle-east", 
      south__paneSelector: ".middle-south" 
     } 

    }); 
}); 

Я добавлю вам пример моей идеи о жизни: http://jsfiddle.net/9ut28bf8/2/

Смежные вопросы