Jquery ui изменяемая размерная левая нижняя ручка для изменения размера

Я использую jquery-ui-resizable плагин в моем проекте.

По умолчанию, когда вы создаете объект DOM jquery-ui-resizable, редактируемый дескриптор появится в правом нижнем углу, мне нужно переопределить дескриптор в левом нижнем углу.

--- EDIT ---

Еще одна вещь, она не должна быть переоснащена с помощью правой границы, но должна быть повторно значимой с помощью левой границы.

enter image description here

Ответы

Ответ 1

Вы должны использовать handles

supported: { n, e, s, w, ne, se, sw, nw }.

Это создаст Ручки на указанной вами стороне. Значения по умолчанию:

'e, s, se'

Примеры кода

Инициализировать изменение размера с помощью указанной опции.

$( ".selector" ).resizable({ handles: 'n, e, s, w' });

Получить или установить параметр handle после init.

//getter
var handles = $( ".selector" ).resizable( "option", "handles" );
//setter
$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );

Ответ 2

Дополнительно к Ахмеду ответ: jQueryUI не содержит иконку для sw-handle, а также не применяет класс значков для sw-handle. Вы можете использовать некоторый CSS для добавления значка:

#resizable .ui-resizable-sw{background:url(path/to/custom_icon.gif) no-repeat;}

Ответ 3

Для повторной калибровки со всех сторон также можно использовать следующий код

     var resizeOpts = { 
      handles: "all" ,autoHide:true
    }; 
$( ".selector" ).resizable(resizeOpts);

и autoHide равно true означает, что значок захвата автоматически скроется, когда указатель мыши будет удален из dom-объекта.

Ответ 4

Я искал это решение SW. То, что я должен был сделать, чтобы заставить его работать, - добавить классы ui-icon в созданный div сразу после вызова resizable().

$( "#wproof" ).resizable({handles: "w, sw, s"});
$('.ui-resizable-sw').addClass('ui-icon ui-icon-gripsmall-diagonal-sw');

Затем определите значок, взяв его в изображениях /ui -icons_222222_256x240.png Это небольшая площадь 9X9 внизу. Создайте файл .png(с поворотом!) И добавьте стиль к данному классу:

<style>
.ui-icon-gripsmall-diagonal-sw { 
    background-image: url(your 9x9 icon.png); }
.ui-resizable-sw {
    bottom: 1px;
    left: 1px;
}
</style>

Нижняя и левая расположены в -5px в jquery-ui css

Ответ 5

Похоже, что стандартное свойство cursor - это то, что используется UI CSS

.ui-resizable-sw {
cursor: sw-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}

Также кажется, что курсор не отображается, и изменение размера не поддерживается для стороны элемента, который используется для позиционирования - например: div, размещенный с использованием left: 20px top: 20px не позволит изменять размер на этих левых и верхних стороны

Я обнаружил это после добавления всех ручек, но потом они все так и не появились! Обновление. По-видимому, в моем приложении есть некоторые проблемы, которые вызывают мою проблему. Тестирование на JSFiddle все ручки работают должным образом, используя ту же версию JQuery..... argggggg