Как изменить размер только по горизонтали или вертикали с помощью jQuery UI?

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

пример:

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

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

77
jquery jquery-ui jquery-ui-resizable

7 ответов

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

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

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

135

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

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

если найден следующий код для работы в этом случае использования:

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

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

24

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

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

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

16

решение заключается в настройке изменяемого размера, чтобы он отменял изменения измерения, которое вы не хотите.

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

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
});
9

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

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});
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
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