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

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

80 голосов
/ 02 сентября 2010

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

Пример: 

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

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

Ответы [ 7 ]

139 голосов
/ 02 сентября 2010

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

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

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

27 голосов
/ 02 июня 2011

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

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

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

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

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

16 голосов
/ 10 февраля 2012

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

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

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

9 голосов
/ 29 октября 2010

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

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

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});
0 голосов
/ 09 июля 2014 
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 голосов
/ 13 марта 2014

Для меня решения с обоими дескрипторами и обработчиком 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 голосов
/ 20 ноября 2013

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

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});
...