Рейтинг: 0 / 5
jQuery UI - один из популярных наборов плагинов для повышения интерактивности веб-страниц и создания различных эффектов. Он может одинаково быть полезен дизайнерам и разработчикам.
Самые простые плагины, которые включены в jQuery UI, это плагины поведения.
Draggable - позволяет перетаскивать элементы на странице.
Код перетаскиваемого элемента на странице имеет вид
<div id="drag">
<p>Элемент страницы</p>
</div>
Скрипт:
<script>
$("#drag").draggable();
</script>
Также можно дополнительно прописать для элемента css-стили.
Droppable - позволяет создавать области, где перетаскиваемые элементы подхватываются.
Код имеет вид
<div id="drop">
<p>Область, которая "ловит" сброшенный элемент</p>
</div>
<div id="drag">
<p>Перетаскиваемый элемент</p>
</div>
Скрипт:
$("#drag").draggable();
$("#drop").droppable();
drop:function(event, ui){
$(this).addClass("ui-state-highlight")
.find("p")
.html("Поймано!")
}
Возможно использовать дополнительные опции и события.
Кратко перечислим опции:
accept - выбирает элементы, принимаемые областью.
Например: .droppable({accept:'#drag123'})
activeClass - позволяет выделить область, принимающую перетаскиваемый элемент. В момент, когда пользователь начинает перетаскивать элемент, к ней добавляется класс с указанным именем.
Например: .droppable({activeClass:'dropActive'})
addClass - значение по умолчанию - true. При установке значения false класс .ui-droppable перестанет автоматически добавляться элементу что позволит повысить производительность.
Например: .droppable({addClass:false})
greedy - значение по умолчанию - false. При изменении на true события перестанут распространяться на вложенные области.
hoverClass - позволяет задать класс, который будет добавляться к области при заведении на нее принимаемого элемента.
Например: .droppable({hoverClass:'hoverDrop'})
Resizable - позволяет изменять размер элемента с помощью мыши.
Код элемента на странице имеет вид
<div id="resize">
<p>Элемент страницы</p>
</div>
Скрипт:
<script>
$("#resize").resizable();
</script>
Можно дополнительно настроить ограничение размеров, сохранение пропорций, шаг изменения, эффект "призрака", анимацию, задержку старта изменений, синхронизацию изменений и вспомогательные элементы.
Selectable - дает возможность выделения с помощью мышки одного или нескольких элементов.
<ol id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
Скрипт:
<script>
$("#list").selectable();
</script>
Дополнительно можно настроить выведение списка выбранных элементов и возможность расположить список в виде сетки.
Sortable - позволяет менять позиции элементов в списке с помощью перетаскивания мышью. Применяется не к отдельным элементам, а к самому списку.
<ol id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
Скрипт:
<script>
$("#list").sortable();
</script>
Использование jQuery UI позволит сделать Ваш сайт более ярким, интересным и привлекательным для пользователя.
