Pull to refresh

Управление вибрацией с помощью библиотеки jquery.vibrate.js

Reading time2 min
Views8.9K

Сегодня я хотел бы написать о библиотеке jQuery Vibrate.js. Эта библиотека позволяет настроить вибрацию на мобильных устройствах, можно выбрать различные режимы с разной продолжительностью вибрации.
Вибрация в мобильном устройстве позволяет предупредить пользователя о сообщении или звонке, показать обратную отдачу в играх.
Для подключения библиотеки нужно использовать файл jquery.vibrate.min.js вкупе с jQuery.

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="build/jquery/jquery.vibrate.min.js"></script>

Представленные ниже примеры показывают вибрацию при нажатии на элемент с id=”example”.
$("#example").vibrate(); // Стандартная 50 миллисекундная вибрация.
$("#example").vibrate("short"); // Короткая 20 миллисекундная вибрация.
$("#example").vibrate("long"); // Длительная 100 миллисекундная вибрация.

Следующий пример вызывает вибрацию при нажатии на элемент, по времени до 3000 миллисекунд.
$("#example").vibrate({
 duration: 3000,
 trigger: "touchstart"
});

Вибрация при нажатии на элемент, длительностью 50 миллисекунд.
var item = $("#example");
item.vibrate("medium");
item.vibrate("default");
item.vibrate(50);
$("#example-five .button").vibrate({
 duration: 2000,
 trigger: "touchstart"
});

Можно «задать бит», и сыграть виброэлементом вашего смартфона, например, имперский марш.
Первый параметр задает длительность вибрации, второй — задает паузу, и так далее.
navigator.vibrate([500,110,500,110,450,110,200,110,170,40,450,110,200,110,170,40,500]);

Вибрация с длинной, взятой из параметра кнопки.
$(“button").each(function() {
 $(this).vibrate(parseInt($(this).text(), 10));
});

Представленный ниже код позволяет определить мобильность устройства и запустить вибрацию во время прикосновения к экрану.
var isMobile = (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent); // Список мобильных устройств.

$(".button").on(isMobile ? 'touchstart' : 'mousedown', function(e) { // Проверка прикосновения.
    navigator.vibrate(Infinity); // Бесконечная вибрация.
});

$(".button").on(isMobile ? 'touchend' : 'mouseup', function(e) { 
    navigator.vibrate(0); // Остановка вибрации.
});

Конечно, нужно отметить про недостатки данной библиотеки. Она не работает с браузерами: iOS Safari, Opera Mini, IE, BlackBerry.
Тут можно загрузить библиотеку и опробовать ее в действии.
Tags:
Hubs:
Total votes 13: ↑7 and ↓6+1
Comments16

Articles