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

    Метки:
    • +28
    • 24,3k
    • 6
    Поделиться публикацией
    Комментарии 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
                Спасибо, автору. Пригодилось ;)

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