рдЖрдИрдкреИрдб рдХреЗ рд▓рд┐рдП jQuery рдХреЗ рд╕реНрдирд┐рдкреЗрдЯ рдФрд░ рдкреНрд▓рдЧрдЗрдиреНрд╕

IPad рдкрд░ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд╛рдЗрдЯ рдХреЛ рдЕрдиреБрдХреВрд▓рд┐рдд рдХрд░рдиреЗ рдореЗрдВ рдорджрдж рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд░рд▓ jQuery рдХреЗ рд╕реНрдирд┐рдкреЗрдЯ рдФрд░ рдкреНрд▓рдЧрдЗрдиреНрд╕ рдХрд╛ рдЪрдпрдиред рдХреБрдЫ рдЕрдиреНрдп рд╕реНрдкрд░реНрд╢ рдЙрдкрдХрд░рдгреЛрдВ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреБрдХреНрдд рд╣реИрдВред



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> 


рд╕реАрдПрд╕рдПрд╕ рдЙрдкрдпреЛрдЧ:

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


2. рд╡рд╕реНрддреБрдУрдВ рдХреЛ рдЦреАрдВрдЪреЗрдВ рдФрд░ рдЫреЛрдбрд╝реЗрдВ ( рд╕реНрд░реЛрдд )


 //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. рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ рдХреЗ рд╕рд╛рде рд╡рд╕реНрддреБрдУрдВ рдХреЛ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рдирд╛: рдСрдЯреЛ, рджреЛ рдХреЗ рдмрдЬрд╛рдп рдПрдХ рдЙрдВрдЧрд▓реА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ ( рд╕реНрд░реЛрдд , рдбреЗрдореЛ )



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. рдЖрдИрдкреИрдб рдкрд░ рдХреНрд▓рд┐рдХ рдкрд░ рдШрдЯрдирд╛рдУрдВ рдХреА рдирд┐рдпреБрдХреНрддрд┐ ( рд╕реНрд░реЛрдд )


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


IPad ( рд╕реНрд░реЛрдд ) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп рд╕рд╛рдЗрдЯ рдкрд░ 8. рд╕рд░рд▓ рдЗрд╢рд╛рд░реЗ


рдЯрдЪрд╡рд┐рдк рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ :

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

Source: https://habr.com/ru/post/In158577/


All Articles