Мы собрали несколько простых в использовании трюков, фрагментов кода и плагинов для iPad . Обязательно сообщите нам в комментариях, какие фрагменты и плагины вы считаете полезными, а также любые другие, которые, как вам известно, могут быть полезны.
1. Определение ориентации iPad в Safari с использованием JavaScript
Разработайте свой веб-сайт или измените порядок размещения контента в соответствии с ориентацией вашего iPad. Вот пример того, как определить текущую ориентацию устройства iPad, нажав кнопку или изменив ориентацию, используя событие onOrientationChange…
What's my Orientation? Используя определение медиа, вы также можете использовать таблицы стилей CSS:
2. Поддержка jQuery Add Drag / Touch для iPad
Фрагмент кода jQuery для применения поддержки Drag / Touch для iPad и устройств с сенсорной поддержкой.
//iPAD Support $.fn.addTouch = function(){ this.each(function(i,el){ $(el).bind('touchstart touchmove touchend touchcancel',function(){ //we pass the original event object because the jQuery event //object is normalized to w3c specs and does not provide the TouchList handleTouch(event); }); }); var handleTouch = function(event) { var touches = event.changedTouches, first = touches[0], type = ''; switch(event.type) { case 'touchstart': type = 'mousedown'; break; case 'touchmove': type = 'mousemove'; event.preventDefault(); break; case 'touchend': type = 'mouseup'; break; default: return; } var simulatedEvent = document.createEvent('MouseEvent'); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null); first.target.dispatchEvent(simulatedEvent); }; };
3. TouchSwipe jQuery плагин для iPad, iPhone и Android
Плагин jquery для использования с jQuery на устройствах с сенсорным вводом, таких как iPad, iPhone и т. Д.
Исходный Демо
4. JQuery iPad одним пальцем прокрутки
Сенсорные устройства (iPad, iPhone, Android и т. Д.) Имеют довольно странное поведение для переполнения прокрутки: автоэлементы. iPad требует прокрутки двумя пальцами и не добавляет полос прокрутки, чтобы сделать это очевидным. Этот плагин позволяет прокручивать переполнение: автоэлемент одним пальцем.
Исходный Демо
5. jQuery обнаруживает мобильные устройства — iPhone iPod iPad
Фрагмент кода jQuery, чтобы определить, просматривает ли пользователь веб-сайт с помощью мобильного устройства, в частности iPhone iPod или iPad.
jQuery(document).ready(function($){ var deviceAgent = navigator.userAgent.toLowerCase(); var agentID = deviceAgent.match(/(iphone|ipod|ipad)/); if (agentID) { // mobile code here } });
6. Multiselect picklist плагин jquery для iPad и настольных браузеров
Многорядный / мультиселектный список выбора, который выглядит одинаково как в настольном браузере, так и в браузере iPad.
Мы могли бы легко использовать обычный тег Visualforce, т.е.
7. JQUERY ЩЕЛЧОК СОБЫТИЯ НА IPAD
Решение, чтобы исправить это. Это был совет, данный в документации для разработчиков на apple.com. Это в основном ищет iPad в строке userAgent (без учета регистра). Если пользователь на iPad, мы используем сенсорный запуск, а если нет, то по умолчанию мы возвращаемся к стандартному щелчку.
Код, который вам нужен:
var ua = navigator.userAgent, event = (ua.match(/iPad/i)) ? "touchstart" : "click"; $("#theElement").bind(event, function() { // jquery code }
8. Легкие жесты iPad на вашем сайте с JQuery
jQuery делает это настолько простым для интеграции и использования, что я не мог не дурачиться с ним.
Прежде всего убедитесь, что на вашем сайте установлена последняя библиотека jQuery. Включите его прямо с сайта следующим образом:
Второй шаг: загрузите библиотеку TouchWipe с веб-сайта автора или вы можете просто привязать Touchwipe к ,
Включите библиотеку touchwipe перед тегом. например:
Затем инициализируйте TouchWipe для тега body и задайте жесты выбранное действие для выполнения, в этом примере я только использовал оповещения:
$(document).ready(function(){ $('body').touchwipe({ wipeLeft: function(){ alert('You swiped left!') }, wipeRight: function(){ alert('You swiped right!') }, wipeUp: function(){ alert('You swiped up!') }, wipeDown: function(){ alert('You swiped down!') } }) })
Touchwipe может быть добавлен к определенному div, а не к тегу body. И там вы идете. Вы можете добавить это на любую html-страницу, чтобы добавить жесты.
Источник
9. IPHONE / IPAD DOUBLETAP HANDLER СОБЫТИЯ
Включите использование событий «doubletap» на устройствах iPhone и iPad. Функциональность все еще доступна, когда плагин используется в браузере рабочего стола. Это означает, что вам не нужно беспокоиться о среде, в которой используется плагин.
Исходный Демо
10. плагин jQuery.UI.iPad
Предоставляет интерфейсный слой для сопоставления сенсорных событий с элементами интерфейса jQuery UI.
$(function() { // // Extend jQuery feature detection // $.extend($.support, { touch: typeof Touch == "object" }); // // Hook up touch events // if ($.support.touch) { document.addEventListener("touchstart", iPadTouchHandler, false); document.addEventListener("touchmove", iPadTouchHandler, false); document.addEventListener("touchend", iPadTouchHandler, false); document.addEventListener("touchcancel", iPadTouchHandler, false); } }); var lastTap = null; // Holds last tapped element (so we can compare for double tap) var tapValid = false; // Are we still in the .6 second window where a double tap can occur var tapTimeout = null; // The timeout reference function cancelTap() { tapValid = false; } var rightClickPending = false; // Is a right click still feasible var rightClickEvent = null; // the original event var holdTimeout = null; // timeout reference var cancelMouseUp = false; // prevents a click from occuring as we want the context menu function cancelHold() { if (rightClickPending) { window.clearTimeout(holdTimeout); rightClickPending = false; rightClickEvent = null; } } function startHold(event) { if (rightClickPending) return; rightClickPending = true; // We could be performing a right click rightClickEvent = (event.changedTouches)[0]; holdTimeout = window.setTimeout("doRightClick();", 800); } function doRightClick() { rightClickPending = false; // // We need to mouse up (as we were down) // var first = rightClickEvent, simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent("mouseup", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0, null); first.target.dispatchEvent(simulatedEvent); // // emulate a right click // simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent("mousedown", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 2, null); first.target.dispatchEvent(simulatedEvent); // // Show a context menu // simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent("contextmenu", true, true, window, 1, first.screenX + 50, first.screenY + 5, first.clientX + 50, first.clientY + 5, false, false, false, false, 2, null); first.target.dispatchEvent(simulatedEvent); // // Note:: I don't mouse up the right click here however feel free to add if required // cancelMouseUp = true; rightClickEvent = null; // Release memory } // // mouse over event then mouse down // function iPadTouchStart(event) { var touches = event.changedTouches, first = touches[0], type = "mouseover", simulatedEvent = document.createEvent("MouseEvent"); // // Mouse over first - I have live events attached on mouse over // simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0, null); first.target.dispatchEvent(simulatedEvent); type = "mousedown"; simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0, null); first.target.dispatchEvent(simulatedEvent); if (!tapValid) { lastTap = first.target; tapValid = true; tapTimeout = window.setTimeout("cancelTap();", 600); startHold(event); } else { window.clearTimeout(tapTimeout); // // If a double tap is still a possibility and the elements are the same // Then perform a double click // if (first.target == lastTap) { lastTap = null; tapValid = false; type = "click"; simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null); first.target.dispatchEvent(simulatedEvent); type = "dblclick"; simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null); first.target.dispatchEvent(simulatedEvent); } else { lastTap = first.target; tapValid = true; tapTimeout = window.setTimeout("cancelTap();", 600); startHold(event); } } } function iPadTouchHandler(event) { var type = "", button = 0; /*left*/ if (event.touches.length > 1) return; switch (event.type) { case "touchstart": if ($(event.changedTouches[0].target).is("select")) { return; } iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/ event.preventDefault(); return false; break; case "touchmove": cancelHold(); type = "mousemove"; event.preventDefault(); break; case "touchend": if (cancelMouseUp) { cancelMouseUp = false; event.preventDefault(); return false; } cancelHold(); type = "mouseup"; break; default: return; } var touches = event.changedTouches, first = touches[0], simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, button, null); first.target.dispatchEvent(simulatedEvent); if (type == "mouseup" && tapValid && first.target == lastTap) { // This actually emulates the ipads default behaviour (which we prevented) simulatedEvent = document.createEvent("MouseEvent"); // This check avoids click being emulated on a double tap simulatedEvent.initMouseEvent("click", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, button, null); first.target.dispatchEvent(simulatedEvent); } }