Я пытаюсь изменить свой элемент диалога с помощью jQuery UI (последний). В моем документе была включена тема jquery css и последняя библиотека пользовательского интерфейса JQuery.
Но когда я создаю свой диалог HTML и вставляю его в свой документ, функция изменения размера не изменяет размер, отображается курсор изменения размера, а также отображается ручка изменения размера, но когда я ничего не перетаскиваю!
Когда я вставляю HTML-код для своего mannualy в свой документ и применяю плагин resizable() для этого диалога, функция resizable() работает!
но когда я вставляю HTML-код для своего диалога с
$('body').append($('<div id="dialog">some text</div>'));
а затем выполните следующее:
$('#dialog').resizable();
ручка видна, но она не изменяет размер.
Кажется, resizable() плагин не работает для новых элементов в DOM?
Я потратил весь день на поиски решения :(
Кто-то знает, что происходит!
** РЕДАКТИРОВАТЬ **
Я нашел это!! плагин resizable() запускает событие "resize" для изменяемого размера элемента, и мой плагин имеет прослушиватель для этого события, я думал, что он был запущен только при изменении размера окна.
теперь мне нужно изменить свой плагин и выяснить, изменяется ли окно или его элемент. Спасибо всем, ребята!
Дайте элементу немного времени для рендеринга
setTimeout(function(){
$('#dialog').resizable();
},500);
вы должны использовать css jquery ui или сделать что-то вроде этого: вы можете работать без css файла, но вы должны поместить css в элемент div.
посмотрите этот код:
import css jquery ui:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
Код js:
<script type="text/javascript">
$(document).ready(function(){
$('body').append('<div id="dialog" style="border:1px solid black;height: 100px;left: 0;top: 0;width: 100px;">some text</div>');
$('#dialog').resizable();
});
</script>