dir.by  
  Поиск  
Программирование, разработка, тестирование
jQuery UI - кнопки, меню, диалог, slider, spinner и так далее. Эфекты: растягивание, перетаскивание и так далее
Resizable (меняем размер элемента с помощью мыши) jQuery UI
  Посмотрели 6358 раз(а)    
 Resizable (меняем размер элемента с помощью мыши) jQuery UI 
последнее обновление: 5 февраля 2020
Метод resizable В jQuery UI позволяет менять размер элемента с помощью мыши.
Пример смотрим, тестируем
Код примера
  Html  
<html>

<!-- заголовок -->
<head>
     <meta charset="utf-8">
     <title>Example</title>
</head>

<!-- страница -->
<body>
     <!-- подключаем библиотеки jQuery и jQuery UI -->
     <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>
     <script src="https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.js"></script>

     <!-- подключаем стили jQuery UI -->
     <link rel="stylesheet" href="https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css">

     <!-- HTML элементы -->
     <div id="myElement1" style='height:100px; width:100px; background:#DAF0DA;'>
          <p>Растягивай</p>
     </div>

     <!-- страница открылась -->
     <script>
          $( function()
          {
               // элемент myElement1 может растягиваться
               $("#myElement1").resizable();
          });
     </script>
</body>

</html>
На заметку!
Пример локально работает!

Запускаем пример на вашем компьютере:
1) Создайте новый файл my.html
2) Скопируйте исходный код В my.html файл
3) Запустите в браузере my.html

Кстати!
Пример позволяет растягивать на компьютере.
Пример не позволяет растягивать на мобильных устройствах (смартфоны, планшеты).
Растягивание на мобильных устройствах (смартфоны, планшеты)
Пример смотрим, тестируем
Объяснение
В коде добавилась одна строчка это подключение библиотеки jQuery UI Touch Punch ... для растягивания на планшете, телефоне.
  Html  
<script src="https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"></script>


Весь код примера для растягивания на планшете, телефоне
В коде добавленная строчка выделена синим цветом.
  Html  
<html>

<!-- заголовок -->
<head>
     <meta charset="utf-8">
     <title>Example</title>
</head>

<!-- страница -->
<body>
     <!-- подключаем библиотеки jQuery и jQuery UI -->
     <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>
     <script src="https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.js"></script>

     <!-- подключаем стили jQuery UI -->
     <link rel="stylesheet" href="https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css">

     <!-- библиотека перетаскивания для планшета, телефона -->
     <script src="https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"></script>

     <!-- HTML элементы -->
     <div id="myElement1" style='height:100px; width:100px; background:#DAF0DA;'>
          <p>Растягивай</p>
     </div>

     <!-- страница открылась -->
     <script>
          $( function()
          {
               // элемент myElement1 может растягиваться
               $("#myElement1").resizable();
          });
     </script>
</body>

</html>
 
← Предыдущая тема
Droppable (перетаскиваемый элемент может быть брошен) jQuery UI
 
Следующая тема →
Selectable (выделяем с помощью мыши один или несколько элементов) jQuery UI
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

  Объявления  
  Объявления  
 
Что такое JQuery UI ?
jQuery UI где скачать и как подключить?
Interactions (взаимодействие)
Draggable (элемент может быть перемещен с помощью мыши) jQuery UI
Droppable (перетаскиваемый элемент может быть брошен) jQuery UI
Resizable (меняем размер элемента с помощью мыши) jQuery UI
Selectable (выделяем с помощью мыши один или несколько элементов) jQuery UI
WWW сайты для изучения JQuery UI
Сайты для изучения JQuery UI

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика