Веб-программирование

Gridster: Drag&Drop Multi-Column Grid

Gridster - это jQuery плагин, который позволяет создавать таблицы из элементов, охватывающих несколько столбцов, и с возможностью их перемещения мышью. Вы также можете динамически добавлять и удалять элементы из таблицы.

Gridster: Drag&Drop Multi-Column Grid
Поделиться в соцсетях:

Gridster был протестирован в Internet Explorer 9 +, Firefox, Chrome, Safari и Opera. Он распространяется под лицензией MIT.

Использование:

Для работы Gridster-a требуется библиотека jQuery, поэтому не забудьте подключить её перед скриптом.

<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="jquery.gridster.js"></script>

HTML-структура

Названия классов и теги можно использовать любые, для работы Gridster-а важно указать необходимые data-аттрибуты:

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

Gridster принимает один аргумент, хэш с параметрами конфигурации. См. документацию.

$(function(){ //DOM Ready
    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });
});
  • Лицензия: MIT License
  • Требования: jQuery Framework

Новый комментарий

Имя:
Для редактирования комментария осталось 10 минут
Комментарии отсутствуют