Вопрос:

Установите различную максимальную / минимальную высоту и ширину для нескольких элементов с помощью jqueryUI, изменяемого размера

jquery-ui jquery-ui-resizable

37 просмотра

1 ответ

883 Репутация автора

Я использую jQuery-UI изменяемого размера на три элемента, например:

$("#element1, #element2, #element3").resizable();

Все хорошо и хорошо .. НО мне нужно установить максимальную / минимальную высоту, ширину. Я не вижу способа ни в документации, ни в примере дать элементам разные (как уникальные для каждого выбранного элемента) значения на них:

  maxHeight:
  maxWidth: 
  minHeight: 
  minWidth: 

Это означает, что мне придется вызывать .resizable () один раз для каждого элемента ... Это не кажется оптимальным. Как это:

$("#element1").resizable({
    maxHeight:
    maxWidth: 
    minHeight: 
    minWidth: 
});

$("#element2").resizable({
    maxHeight:
    maxWidth: 
    minHeight: 
    minWidth: 
});

$("#element3").resizable({
    maxHeight:
    maxWidth: 
    minHeight: 
    minWidth: 
});

Что бы мне понравилось, это что-то вроде этого (готовится PSEUDO CODE):

$("#element1, #element2, #element3").resizable({
    [maxHeight: 111 //#element1   
    maxWidth: 111 
    minHeight: 111 
    minWidth: 111],

    [maxHeight: 222 //#element2
    maxWidth: 222 
    minHeight: 222 
    minWidth: 222],

    [maxHeight: 333 //#element3
    maxWidth: 333
    minHeight: 333
    minWidth: 333],

});

Это как-то выполнимо?

Автор: Brainmaniac Источник Размещён: 22.08.2017 06:08

Ответы (1)


0 плюса

20 Репутация автора

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

Дайте всем вашим изменяемым элементам общий класс.

$('.widget').resizable({
  start: function(event,ui) {
    var hasId = ui.element.attr('id');

    switch(hasId ){
      case '#element1':
        ui.element.resizable('option','maxHeight', 111);
        ui.element.resizable('option','maxWidth', 111);
        break;
      case '#element2':
        ui.element.resizable('option','maxHeight', 222);
        ui.element.resizable('option','maxWidth', 222);
        break;
      case '#element3':
        ui.element.resizable('option','maxHeight', 333);
        ui.element.resizable('option','maxWidth', 333);
        break;
    }
  }
});

Вы также можете сделать это с помощью css, используя идентификатор каждого изменяемого размера элемента, чтобы установить max-heightи max-width, но это также будет длинным.

Автор: Souleste_ Размещён: 12.06.2019 09:28
Вопросы из категории :
32x32