Сегодня я хотел бы написать о библиотеке 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.
Тут можно загрузить библиотеку и опробовать ее в действии.