Блог

Хорошо, я немного запутался в этом. В документации jQuery UI указано, что при изменении размера у меня могут быть видимые дескрипторы, которые, как я понимаю, являются видимыми значками / изображениями (правильно ли я это понимаю?)

Если указано в виде строки, должен быть разделенный запятыми список любого из следующего: ‘n, e, s, w,> ne, se, sw, nw, all’. Необходимые дескрипторы будут автоматически сгенерированы плагином.

Значит, у меня должны быть дескрипторы по всему моему объекту, если я укажу «все»? Если да, то, похоже, это не работает — у меня есть только что-то видимое в углу ‘se’.

Теперь, глядя на исходный код jQuery UI с изменяемым размером, кажется, что это единственный способ, которым он может работать :

 if ('se' == handle) {
   axis.addClass('ui-icon ui-icon-gripsmall-diagonal-se');
};
  

Я что-то упускаю? Могу ли я создать их самостоятельно?

Этот код сообщает виджету, чтобы он только беспокоился о настройке красивого значка для дескриптора SE, если они генерируются автоматически. Он по-прежнему фактически создает дескрипторы в виде небольшого невидимого прямоугольника в каждом углу, который можно перетаскивать, просто без какого-либо значка (набор значков jQuery UI фактически не имеет других подобных дескрипторов).

Обратитесь к документу API о том, как прикрепить их к вашим собственным объектам DOM, внешний вид которых вы можете легко настроить. Краткий пример:

 $('#targetToMakeResizable').resizable({handles : { ne : ".jquerySelectorForNEHandle", sw: ".jquerySelectorForSWHandle" }, aspectRatio : true});
  

Кроме того, вы можете просто переопределить базовый css для .ui-resizable-handle.ui-resizable-{direction} с вашими собственными настройками.

Вот jsfiddle для демонстрации обоих методов. Обратите внимание, что поворот значка так, как я это сделал, вероятно, не будет работать в каждом браузере.