Пользователь
0,0
рейтинг
14 ноября 2012 в 09:18

Разработка → 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);
  }
}

@grokru
карма
406,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (6)

  • +1
    Спасибо, интересная подборка
  • +7
    Надергали непонятно чего из Интернета в одну статью?

    «2. Перетаскивание (Drag) объектов» При этом код никакого отношения к собственно drag&drop не имеет
    6. apex:selectList — jQuery сниппет?
    3 и 8 чем отличаются?

    7. Назначение события на клик на iPad
    Я посмотрю как вы такой код будете на полноценном проекте использовать. touchstart, хехе

  • +7
    Надавно буквально портировал Touch жесты под jQuery, так как до этого так и не нашел удобного плагина для таких задач. В итоге пришлось писать проект на Zepto, так как на тот момент небыло времени разбиратся.

    Кому интересно вот: https://gist.github.com/4044976

    Список жестов:

    singleTap | doubleTap | hold | swipe | swiping | swipeLeft | swipeRight | swipeUp | swipeDown | rotate | rotating | rotateLeft | rotateRight | pinch | pinching | pinchIn | pinchOut | drag | dragLeft | dragRight | dragUp | dragDown
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    jQuery плагин touchWipe — глючит. А на некоторых других телефонах — тормозит.
    Лучше использовать touchSwipe, или еще лучше swipejs, правда последний не использует jQuery, зато не были замечаны глюки в его работе. Проверялось на 8 разных телефонах.
  • 0
    Спасибо, автору. Пригодилось ;)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.