Как изменить размеры ТОЛЬКО по горизонтали или вертикали с помощью jQuery UI Resizable?

75

Единственное решение, которое я нашел, - установить максимальную или минимальную высоту или ширину с текущим значением.

Пример:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

Но это действительно уродливо, особенно если мне нужно изменить высоту элемента программно.

Теги:
jquery-ui-resizable

7 ответов

137
Лучший ответ

Вы можете установить параметр handles, чтобы показывать только слева и справа (или восток/запад), например:

foo.resizable({
    handles: 'e, w'
});​

Здесь вы можете попробовать.

Поделиться
  • 7
    Я только что нашел оговорку с этим решением. Он будет по-прежнему помещать ширину и высоту, когда сделано как встроенный стиль. Это вызывает проблемы для меня с вертикальным решением. После того, как я изменил его размер, ширина устанавливается, и она больше не равна 100% (но имеет значение px). Просто поместите это здесь в случае, если другие ищут и сталкиваются с этим.
  • 0
    @Fernker Да, это боль.
Показать ещё 4 комментария
24

В то время как плакат в основном запрашивал изменение размера по горизонтали, вопрос также требует вертикали.

В вертикальном случае есть особая проблема: вы могли бы установить относительную ширину (например, 50%), которую вы хотите сохранить, даже когда размер окна браузера изменяется. Однако пользовательский интерфейс jQuery устанавливает абсолютную ширину в px после первоначального изменения размера элемента и относительной ширины.

Если для этого варианта использования найден следующий код:

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

См. также http://jsfiddle.net/cburgmer/wExtX/ и jQuery UI resizable: авто высота при использовании только восточной ручки

Поделиться
  • 1
    Очень интересно, спасибо. Я буду иметь это в виду. Я думаю, что важно отметить, что для элемента с изменяемым размером его ширина должна быть установлена css, если нет, он будет потерян после изменения размера. Смотрите здесь jsfiddle.net/paska/wExtX/10
  • 1
    Это решение, которое я искал. По какой-то причине, хотя дескриптор для региона отключен, кажется, что его размеры по-прежнему установлены в px. Если вы не используете этот метод, вы теряете% высоты или ширины.
Показать ещё 4 комментария
16

Очень простое решение:

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

Это работает и для draggable(). Пример: http://jsfiddle.net/xCepm/

Поделиться
  • 1
    Это действительно безобразно !! Кроме того, правильное решение (которое мы должны использовать) - @Nick Craver's
  • 1
    Согласен! :-) Но приятно, что он работает с resizable () и draggable ().
Показать ещё 4 комментария
9

Решение состоит в том, чтобы сконфигурировать ваш изменяемый размер, чтобы отменить изменения требуемого размера.

вот пример вертикально только изменяемого размера:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});
Поделиться
  • 0
    Разве это не слишком уродливо?
  • 0
    Мне нравится это решение.
Показать ещё 2 комментария
0 
Successfully working div position Vertically and horizontally
-------------------------------------------------------------

<head>

    <style>
    .resizable {
        height: 100px;
        width: 500px;
        background: #09C;
    }
    .resizable-x {
        height: 100px;
        width: 500px;
        background: #F60;
    }
    </style>

    <script>
     $(function() {

        $( ".resizable" ).resizable({
            grid: [10000, 1]
        });

        $( ".resizable-x " ).resizable({
            grid: [1, 10000]
        });


        $( ".resizable" ).draggable();
        });

      });
        </script>`enter code here`
    </head>

    <body>
    <div class="resizable"></div>
    <div class="resizable-x"></div>
    </body>
Поделиться
0

Для меня решения с двумя ручками и обработчиком resize работали нормально, поэтому пользователь видит дескриптор, но может изменять размер только по горизонтали, аналогичное решение должно работать для вертикали. Без нижнего дескриптора пользователь может не знать, что он может изменять размер элемента.

При использовании ui.size.height = ui.originalSize.height; он будет не работать должным образом, если элемент изменил его размер из исходного состояния.

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

Для лучшей производительности $(this) можно удалить:

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});
Поделиться
0

Я хотел разрешить изменение размера ширины при изменении размера браузера, но не тогда, когда пользователь меняет размер элемента, это отлично работает:

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню