Directrix Jquery 1.0

Скачать Directrix 1.0

загрузок: 333

GitHub

Описание плагина

Directrix - плагин создан для удобной вёрстки сайтов, который будет полезен именно верстальщикам.

Теперь не только в Adobe Photoshop есть возможность добавлять быстрые направляющие, но и при вёрстке сайта.
С помощью данного плагина Вы сможете поставить вспомогательные линии, что бы правильно и точно выравнивать элементы на странице.

Кроме направляющих Вы можете добавить прямоугольную область с любыми размерами. Это пригодится, когда нужно измерять точное расстояние между элементами.

На этой странице Вы можете попробовать плагин в действии.

Инструкция по использованию

1. Подведите курсор к верхней или левой границе сайта. Появиться горизонтальная или вертикальная линейка.
Щёлкните по линейке двойным щелчком мыши. Рядом с курсором появится быстрая направляющая, которую можно перетаскивать по всему сайту.

2. Подведите курсор к тому месту куда нужно вставить прямоугольную область определённого разсера и нажмите CTRL + X. В появившемся окне впишите размер в px.

Например если ввести так: 150, то будет создана квадратная область 150*150px.

Eсли ввести так: 150*30, то будет создана прямоугольная область размером 150*30px.
Область можно перемещать, так же как и направляющую.

3. Кликнув двойным щелчком по направляющей или прямоугольной области - удалит их.

4. Линейки тоже можно перемещать.

5. Нажмите CTRL + Q тем самым Вы удалите все направляющие и области, а так же линейки примут позицию по умолчани.

Все действия будут автоматически сохраняться в памяти вашего браузера.
Даже при обновлении страницы или после перезагрузки компьютера, созданные Вами объекты плагина будут сохранены, пока Вы не очистите память CTR + Q или не почистите кеш.

Установка плагина

Установка очень проста, я подразумеваю, что Вы знаете как подкючать jquery плагины на сайт.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="directrix-1.0.min.js"></script>
<script>
    $(function(){
        $("body").directrix();
    })
</script>

                

Если библиотека Jquery уже подключена, то разумееться первую строку не стоит дважды подключать.

Настройки плагина

<script>
    $(function(){
        $("body").directrix({
            colorGrid: "#4AFFFF", // цвет линий
            sizeGrid: "1", // размер линии
            typeGrid: "solid", // тип линии
            opacityRuler: "1", // прозрачность линеек
            displayRuler: false, // false - скрывать линейки, true - показывать
            displayIndent: true, // false - скрывать счётчик отступов, true - показывать
            selectMove: false, // false - не выделяет, true - выделяет
            separationColor: "white", // пустота, black, gray, white
        });
    })
</script>

            

colorGrid - цвет направляющих. (Можно менять даже при инспектировании элементов на ходу. При этом они будут сохранены.);

sizeGrid - размер направляющих в px;

typeGrid - стиль направляющей (ставиться как для CSS border-style);

opacityRuler - прозрачность линеек (измеряеться в CSS opacity);

displayRuler - по умолчанию линейки скрыты и появляются когда курсор приближается к верхней или левой части сайта. Можно поставить постоянное отображение;

displayIndent - с каждой направляющей ставиться счётчик, который определяет расстояние от края сайта;

selectMove - при перетаскивании линий срабатывает выделение текста, поэтому что бы на сайте не мешало выделение, плагин настроен по умолчанию как false - не выделять. Отлючить - true;

separationColor - цвет направляющих и премоугольных областей. По умолчанию пусто. Есть несколько цветовых линеек: black, gray, white;

Скачать Directrix 1.0

загрузок: 333




Автор

Автор плагина: Kylaksizov Vladymyr
Сайт: Kylaksizov.ru

Комментарии и предложения

Все предложения к улучшению плагина оставляйте тут...