鑰匙要點(diǎn)

• >本文分享了iPad的幾個(gè)有用的jQuery代碼片段和插件，例如檢測Safari中的iPad取向，添加拖動/觸摸支持并啟用了雙TAP事件。
> 它為每個(gè)片段或插件提供了代碼示例，包括有關(guān)如何實(shí)現(xiàn)它們的說明，使開發(fā)人員更容易在其iPad應(yīng)用程序中添加特定功能。
• >本文包括一個(gè)簡短的常見問題解答，介紹了有關(guān)jQuery iPad代碼片段和插件的問題，它們在WordPress中的使用以及在線找到它們的地方。
>
• 作者鼓勵讀者在評論中分享自己的有用的片段和插件，從而培養(yǎng)了開發(fā)人員之間的社區(qū)意識并共享學(xué)習(xí)。
1。使用JavaScript

使用媒體定義，您還可以使用CSS樣式表：

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

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

來源

<span>//iPAD Support
</span>$<span>.fn.addTouch = function(){
</span>  this<span>.each(function(i,el){
</span>    $<span>(el).bind('touchstart touchmove touchend touchcancel',function(){
</span>      <span>//we pass the original event object because the jQuery event
</span>      <span>//object is normalized to w3c specs and does not provide the TouchList
</span>      <span>handleTouch(event);
</span>    <span>});
</span>  <span>});
</span> 
  <span>var handleTouch = function(event)
</span>  <span>{
</span>    <span>var touches = event.changedTouches,
</span>            first <span>= touches[0],
</span>            type <span>= '';
</span> 
    <span>switch(event.type)
</span>    <span>{
</span>      <span>case 'touchstart':
</span>        type <span>= 'mousedown';
</span>        <span>break;
</span> 
      <span>case 'touchmove':
</span>        type <span>= 'mousemove';
</span>        event<span>.preventDefault();
</span>        <span>break;
</span> 
      <span>case 'touchend':
</span>        type <span>= 'mouseup';
</span>        <span>break;
</span> 
      <span>default:
</span>        <span>return;
</span>    <span>}
</span> 
    <span>var simulatedEvent = document.createEvent('MouseEvent');
</span>    simulatedEvent<span>.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null);
</span>    first<span>.target.dispatchEvent(simulatedEvent);
</span>  <span>};
</span><span>};</span>

>在觸摸輸入設(shè)備（例如iPad，iPhone等）上與jQuery一起使用的jQuery插件

4。 jQuery iPad One Finger卷軸

觸摸設(shè)備（iPad，iPhone，Android等）具有滾動溢出的非常奇怪的行為：自動元素。 iPad需要兩只手指滾動，并且不添加任何滾動條以使其顯而易見。該插件使您可以用一根手指滾動溢出：自動元素。

5。 jQuery檢測移動設(shè)備 - iPhone iPod iPad

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

6。用于iPad和桌面瀏覽器的多選選擇列表jQuery插件

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

<span>//iPAD Support
</span>$<span>.fn.addTouch = function(){
</span>  this<span>.each(function(i,el){
</span>    $<span>(el).bind('touchstart touchmove touchend touchcancel',function(){
</span>      <span>//we pass the original event object because the jQuery event
</span>      <span>//object is normalized to w3c specs and does not provide the TouchList
</span>      <span>handleTouch(event);
</span>    <span>});
</span>  <span>});
</span> 
  <span>var handleTouch = function(event)
</span>  <span>{
</span>    <span>var touches = event.changedTouches,
</span>            first <span>= touches[0],
</span>            type <span>= '';
</span> 
    <span>switch(event.type)
</span>    <span>{
</span>      <span>case 'touchstart':
</span>        type <span>= 'mousedown';
</span>        <span>break;
</span> 
      <span>case 'touchmove':
</span>        type <span>= 'mousemove';
</span>        event<span>.preventDefault();
</span>        <span>break;
</span> 
      <span>case 'touchend':
</span>        type <span>= 'mouseup';
</span>        <span>break;
</span> 
      <span>default:
</span>        <span>return;
</span>    <span>}
</span> 
    <span>var simulatedEvent = document.createEvent('MouseEvent');
</span>    simulatedEvent<span>.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null);
</span>    first<span>.target.dispatchEvent(simulatedEvent);
</span>  <span>};
</span><span>};</span>

<span>jQuery(document).ready(function($){
</span>	<span>var deviceAgent = navigator.userAgent.toLowerCase();
</span>	<span>var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
</span>	<span>if (agentID) {
</span>
        <span>// mobile code here
</span> 
	<span>}
</span><span>});</span>

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

以上是10個(gè)有用的jQuery iPad代碼片段和插件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！