верстка, дизайн, програмування під веб, юзабіліті

Dragdealer JS — модуль на базі JavaScript, який дозволяє створювати власні інтерфейси прокрутки з можливістю перетягування на сторінці. Написаний на чистому JavaScript, тому для його роботи не потрібно підключати сторонні бібліотеки (jQuery, MooTools і т.д.). Використання Dragdealer JS полегшує розробнику життя, адже йому не потрібно перейматися тим, чи буде відвідувач сайту перетягувати елементи сайту пальцем (сенсорний екран, наприклад, на iPhone) чи мишкою (звичайний комп’ютер). При цьому модуль  має доволі скромну вагу — 12 Кб.

JavaScript API

Конструктор

Dragdealer Dragdealer(Mixed wrapper [, Object options ])

• wrapper — ідентифікатор елемента HTML, обгортка, в межах якої буде відбуватись перетягування; тип: Mixed.
• options — опції (про них нижче) ; тип: Object.

Опції:

• disabled — початковий стан; за замовчуванням: false; тип: Boolean. Якщо disabled = true, то перетягування буде заблоковане.
• horizontal — горизонтальне перетягування; за замовчуванням: true (дозволено); тип: Boolean.
• vertical — вертикальне перетягування; за замовчуванням: false (заблоковано); тип: Boolean.
• x — початкова позиція по горизонталі з проміжку [0,1]; за замовчуванням: 0; тип: Number. Якщо x = 0.75, то елемент розміщуватиметься по горизонталі ближче до правого краю області, що огортає його.
• y — початкова позиція по вертикалі з проміжку [0,1]; за замовчуванням: 0; тип: Number. Якщо y = 0.5, то елемент розміщуватиметься по вертикалі на середині області. Щоб задіяти цю опцію, вертикальне перетягування має бути дозволене (vertical = true).
• slide — вмикає/вимикає ефект «ковзання», тобто після завершення перетягування елемент ще короткий проміжок часу рухається, немов би гальмує; за замовчуванням: true (дозволено);  тип: Boolean.
• steps — кількість кроків, які потрібно зробити, щоб перейти від початку області до кінця (менше 2 означає, що кроків нема); за замовчуванням: 0; тип: Number.
• snap — «прилипання» до steps (якщо вони встановлені), тобто елемент переміщається від початку і до кінця області-обгортки (чи зліва-направо, чи знизу-вверх) тільки steps раз, рухається немов би по комірках; за замовчуванням: false (заблоковано); тип: Boolean.
• loose — ефект «підстрибування» від країв області; за замовчуванням: false (заблоковано); тип: Boolean.
• callback — (on release); за замовчуванням: null; тип: Function.
• animationCallback — (on move); за замовчуванням: null; тип: Function.
• speed — швидкість «ковзання» з проміжку (0, 100]; за замовчуванням: 10; тип: Number.
• xPrecision — ширина анімаційної області; за замовчуванням: ширина елементу-обгортки; тип: Number.
• yPrecision — висота анімаційної області; за замовчуванням: висота елементу-обгортки; тип: Number.
• top, bottom, left, right — відступ елементу-обгортки зверху, знизу, зліва та справа відповідно; за замовчуванням: 0; тип: Number.

Методи:

• enable() — дозволити взаємодію з користувачем.
• disable() — вимкнути взаємодія з користувачем.
• setValue(Number x [, Number y [, Boolean snap = false ]]) — задає значення по горизонталі та вертикалі з проміжку [0,1] для елемента HTML. Той плавно переміщується в зазначену позицію. Тобто, якщо прописати setValue(0.5, 0.5), то елемент опиниться посередині області-обгортки.
• setStep(Number x [, Number y [, Boolean snap = false ]]) — задає кроки по горизонталі та вертикалі, елемент переміщується на певну позицію-крок. Скажімо задано, що steps = 4, тоді setStep(3) «перемістить» елемент на 3-ій крок по горизонталі.

Типовий приклад з використанням Dragdealer JS виглядає так.

Спочатку підключаємо файл зі CSS-стилями та JavaScript-компонент:

<link rel="stylesheet" type="text/css"
    href="dragdealer.css" />
<script type="text/javascript" src="dragdealer.js"></script>

Створюємо об’єкт Dragdealer. Для цього прописуємо наступне:

<script type="text/javascript">
window.onload = function(){
    new Dragdealer('simple-slider', {
    	loose:true,
        left:100,
        right:100
    });
}
</script>

Елемент-обгортка в нашому випадку має ідентифікатор «simple-slider». Для прикладу також задано три опції: увімкнено ефект «підстрибування» від країв області, лівий та правий відступи задані рівними 100.

Ну і сама HTML-структура нашого простенького прикладу має виглядати приблизно так:

<div id="simple-slider" class="dragdealer">
      <div class="red-bar handle">тягти мене</div>
</div>

Більш детальну інформацію, демонстраційні приклади та файли для завантаження ви можете знайти на офіційному веб-сайті Dragdealer JS.

Популярність: 5%