Как сделать элемент страницы с изменяемыми размерами — различия между версиями
Материал из Umicms
Mad grant (обсуждение | вклад) |
Whoa (обсуждение | вклад) |
||
| (не показана 1 промежуточная версия 1 участника) | |||
| Строка 22: | Строка 22: | ||
Выбираем элемент (например - div), который необходимо сделать масштабируемым и прописываем в нем id="resizable". | Выбираем элемент (например - div), который необходимо сделать масштабируемым и прописываем в нем id="resizable". | ||
| − | [[Категория: | + | [[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]][[Категория:Верстка в TPL]] |
Текущая версия на 08:57, 19 сентября 2018
Для этой задачи удобно воспользоваться компонентами библиотеки jQuery UI.Сначала необходимо загрузить модуль с официального сайта: http://jqueryui.com/download. Оставляем установленными флажки UI Core и Resizable, нажимаем Download. Копируем скаченный файл jquery-ui-1.8.13.custom.min.js в папку сайта js. Папку ui-lightness копируем в css. Подключаем скрипты в шаблоне страницы в теге Head:
<link type="text/css" rel="stylesheet"
href="css/ui-lightness/jquery-ui-1.8.13.custom.css">
%system includeQuickEditJs()%
%system includeEditInPlaceJs()%
<script type="text/javascript" src="/js/jquery-ui-1.8.13.custom.min.js"></script>
Прописываем собственно js-скрипт.
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#resizable").resizable();
});
//-->
</script>
Выбираем элемент (например - div), который необходимо сделать масштабируемым и прописываем в нем id="resizable".
