Сегодня я хотел бы написать о библиотеке 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.
Тут можно загрузить библиотеку и опробовать ее в действии.
Комментарии (16)
GIum
30.06.2016 18:00+1Использования jQuery как основы для плагина выглядит совсем притянутым. Но автор решил превратить это в плюс и в результате глядя на такой код
$("#example").vibrate("short");
совершенно не ясно, что происходит т.к. про клик тут ни слова.
Непонятно, почему не вот так?
$("#example").on("click", () => { vibrate("short"); });
тут и привязки к jquery никакой нету.
Trikstor
30.06.2016 18:14Синтаксис данного плагина несколько отличается от jQuery, таким образом, для события click требуется меньше кода. Это плюс данного плагина, событие click объявить проще чем на jQuery.
GIum
30.06.2016 18:31Что именно плюс? Неявность в написании? Скажите честно, Вы бы читая такой код догадались бы, что должен произойти клик чтобы сработал плагин?
raveclassic
30.06.2016 19:05я, когда увидел
$(..).vibrate(), подумал, что должна запуститься анимация…
какого же было разочарование
Trikstor
30.06.2016 18:36Представленные ниже примеры показывают вибрацию при нажатии на элемент с id=”example”.
lodas
02.07.2016 15:54Спасибо, очень важная информация. Не совсем понятна идея использования библиотеки, я так понимаю можно написать сайт с использованием библиотеки jquery.vibrate.min.js в котором по таймеру запускать вибрацию на телефоне. Но как происходит передача сигнала именно на мой телефон? По блютусу? Требуется чтобы комп рядом всегда был включенным и с запущенным браузером?
xsash
iOS Safari (указано в конце статьи) и iOS Chrome — не работают