jQuery-сниппеты и плагины для iPad

от автора

Подборка простых jQuery-сниппетов и плагинов, которые помогут адаптировать сайт для отображения на iPad. Некоторые подойдут и для других тач-устройств.

1. Определение ориентации экрана (источник)

<button onclick="detectIPadOrientation();">What's my Orientation?</button> <script type="text/javascript">  window.onorientationchange = detectIPadOrientation;  function detectIPadOrientation () {      if ( orientation == 0 ) {      alert ('Portrait Mode, Home Button bottom');     }     else if ( orientation == 90 ) {      alert ('Landscape Mode, Home Button right');     }     else if ( orientation == -90 ) {      alert ('Landscape Mode, Home Button left');     }     else if ( orientation == 180 ) {      alert ('Portrait Mode, Home Button top');     }  } </script> 

Использование CSS:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">   <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">   

2. Перетаскивание (Drag) объектов (источник)

//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. Определение направления тача (источник, демо)

4. Скроллинг объектов с overflow:auto, используя один палец вместо двух (источник, демо)

5. Определение 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. Множественный выбор в форме (источник)

<apex:selectList id="contactPickList" value="{!selectedContactIds}"  multiselect="true" size="4">    <apex:selectOptions value="{!contactOptions}"/>  </apex:selectList> 

7. Назначение события на клик на iPad (источник)

var ua = navigator.userAgent,      event = (ua.match(/iPad/i)) ? "touchstart" : "click";  $("#theElement").bind(event, function() {      // jquery code } 

8. Простые жесты на сайте при использовании iPad (источник)

Потребуется библиотека touchwipe:

<script type="text/javascript" src="jquery.touchwipe.1.1.1.js"></script> 

Назначаем действия жестам:

$(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!') }             })         }) 

9. Двойной тап (источник, демо)

Работает также и в десктоп-браузерах.

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);   } } 

ссылка на оригинал статьи http://habrahabr.ru/post/158577/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *