Пользовательский переключатель для макета JQuery

Я использую плагин layout.jquery. Я пытаюсь создать собственный переключатель для Wast Pane. Как я могу создать повернутый текст Div в качестве переключателя. Смотрите прикрепленное изображение ниже.

JSFIDDLE: https://jsfiddle.net/kap0e06s/3/

HTML:

<div class="myDiv" style="height:400px">
  <div class="ui-layout-center">Center</div>
  <div class="ui-layout-north">North</div>
  <div class="ui-layout-south">South</div>
  <div class="ui-layout-east">East</div>
  <div class="ui-layout-west">West</div>
</div>

JS:

  $('.myDiv').layout({
    resizeWhileDragging: true,
    sizable: false,
    animatePaneSizing: true,
    fxSpeed: 'slow',
    west__spacing_closed: 0,
    west__spacing_open: 0,
    north__spacing_closed: 0,
    north__spacing_open: 0,

  });
Источник

2 ответа

Извините... Не удалось создать jsfiddle правильно. Вот модифицированный код: JS:

        // OUTER-LAYOUT
    $('.myDiv').layout({
      resizeWhileDragging: true,
      sizable: false,
          livePaneResizing:         true,
      animatePaneSizing: true,
      fxSpeed: 'slow',
      west__spacing_closed: 0,
      west__spacing_open: 0,
      north__spacing_closed: 0,
      north__spacing_open: 0,

      east__spacing_open: 50,

    });

CSS:

        body {
      background-color: white;
    }

    .ui-layout-center,
    .ui-layout-north,
    .ui-layout-south,
    .ui-layout-east,
    .ui-layout-west {
      border: 0px;
    }

    .ui-layout-toggler{
      background-image: url("http://placehold.it/50/ff9933/ffffff?text=Panel");

      }
Источник

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

Сначала вам нужно выбрать между использованием реального повернутого текста (с использованием CSS-преобразования) и цветом фона или изображением текста / вкладки. В зависимости от того, что вы выбираете, метод отличается...

МЕТОД ИЗОБРАЖЕНИЯ TOGGLER

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

Чтобы нацелиться на конкретную панель в макете, добавьте "сторону" к универсальному классу для переключателей или изменяющих размер / разделителей, например...

.ui-layout-resizer-west
.ui-layout-toggler-west

Чтобы дополнительно уточнить селекторы для определения конкретных "состояний", добавьте состояние, например...

.ui-layout-toggler-west-open
.ui-layout-toggler-west-closed

Элемент toggler выходит за границу полосы изменения размера, в которой он находится (для ваших параметров установлено значение ширины 0px), поэтому убедитесь, что CSS переполнения установлен, чтобы разрешить это. Это относится как к методу изображения, так и к методу поворота.

Вот пример CSS, чтобы соединить это. Обратите внимание, что некоторые свойства требуют, чтобы "важные" переопределяли стили, жестко закодированные в элементах с помощью Layout...

.ui-layout-resizer-west {
    overflow: visible !important;
}
.ui-layout-toggler-west {
    backgound: url(close-panel-image.png) center;
    width:  16px;
}
.ui-layout-toggler-west-closed {
    backgound-image: url(open-panel-image.png);
}

Здесь приведены соответствующие параметры макета, в дополнение к тем, которые ваш вопрос уже показывает. Обратите внимание, что высота / длина элемента переключателя должна быть установлена ​​здесь, а не в CSS, чтобы макет мог правильно центрировать его внутри панели изменения размера...

togglerLength_open:   50,
togglerLength_closed: 50

Это следует делать, если использовать фоновое изображение.

ВРАЩЕННЫЙ МЕТОД ТЕКСТА

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

CSS почти такой же для этого метода, но вместо фонового изображения укажите нужные цвета и формат шрифта...

.ui-layout-resizer-west {
    overflow: visible !important;
}
.ui-layout-toggler-west {
    backgound-color: orange;
    color: white;
    font-size: 12px !important;
    font-weight: bold;
    transform: rotate(-90deg);
    width:  16px;
}

Для поддержки старых браузеров добавьте браузерные префиксы для преобразования; см. https://css-tricks.com/snippets/css/text-rotation/

Укажите нужный текст в настройках макета...

togglerLength_open:    50,
togglerLength_closed:  50,
togglerContent_open:   'CLOSE',
togglerContent_closed: 'PANEL'

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

Наконец, вы можете добавить дополнительную логику при открытии или закрытии панели одним из двух способов...

  1. Используйте стандартные обратные вызовы. Они включают в себя такие параметры, как onclose_start, что позволяет отменить закрытое действие при желании.

  2. После создания макета используйте стандартный jQuery, чтобы отменить привязку стандартного события щелчка, а затем добавьте собственное событие. Это необходимо, если используется более сложный пользовательский переключатель, который содержит более одной кнопки / действия. Вы можете найти образцы таких переключателей на веб-сайте Layout.

Источник
Другие вопросы по тегам