it-swarm.com.ru

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

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

Пример:

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

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

79
Diego

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

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

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

138
Nick Craver

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

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

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

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

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

25
cburgmer

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

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

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

16
Jan

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

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

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

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

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

Для меня решения с обоими дескрипторами и обработчиком 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
user133408
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
Vinod Kumar