10 coretan dan plugin kod jQuery iPad yang berguna

Kami telah mengumpulkan beberapa cara yang mudah digunakan, coretan kod dan plugin semua untuk peranti iPad . Pastikan untuk memberitahu kami dalam komen yang coretan dan plugin yang anda dapati berguna dan mana -mana orang lain yang anda tahu tentang itu boleh berguna.

Takeaways Key

Artikel ini berkongsi beberapa coretan kod jQuery yang berguna dan plugin untuk iPad, seperti mengesan orientasi iPad di Safari, menambah sokongan seret/sentuh, dan membolehkan peristiwa dua kali.
• Ia menyediakan contoh kod untuk setiap coretan atau plugin, termasuk arahan bagaimana untuk melaksanakannya, menjadikannya lebih mudah bagi pemaju untuk menambah fungsi tertentu ke aplikasi iPad mereka.
• Artikel ini merangkumi bahagian FAQ ringkas yang menangani soalan mengenai coretan dan plugin kod jQuery iPad, penggunaannya di WordPress, dan di mana untuk mencari mereka dalam talian.
• Penulis menggalakkan pembaca untuk berkongsi coretan dan plugin berguna mereka sendiri dalam komen, memupuk rasa masyarakat dan pembelajaran bersama di kalangan pemaju.
1. Mengesan orientasi iPad di safari menggunakan javascript

Gaya laman web anda atau menyusun semula kandungan anda untuk dipadankan dengan tepat orientasi iPad anda. Berikut adalah contoh bagaimana untuk mengesan orientasi semasa peranti iPad sama ada dengan menekan butang atau apabila orientasi berubah, menggunakan peristiwa yang dipanggil OnorientationChange ...

Menggunakan definisi media, anda juga boleh menggunakan stylesheets CSS:

Sumber

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>

2. jQuery tambah sokongan seret/sentuh untuk iPad

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

Coretan kod jQuery untuk memohon sokongan seret/sentuh untuk iPad dan peranti dengan sokongan sentuhan.

Sumber

3. Plugin JQuery Touchswipe untuk iPad, iPhone dan Android

<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>

plugin jQuery yang akan digunakan dengan jQuery pada peranti input sentuh seperti iPad, iPhone dll.

Sourcedemo

4. jQuery ipad satu jari skrol

Peranti sentuh (iPad, iPhone, Android dll) mempunyai kelakuan yang agak pelik untuk menatal limpahan: Elemen Auto. iPad memerlukan dua jari menatal dan tidak menambah apa -apa scrollbars untuk menjadikannya jelas. Plugin ini membolehkan anda menatal limpahan: elemen auto dengan satu jari.

Sourcedemo

5. JQuery mengesan peranti mudah alih - iPod iPod iPod

Coretan kod jQuery untuk mengesan jika pengguna melihat laman web menggunakan peranti mudah alih, khususnya iPod iPhone atau 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>

Sumber

6. Plugin jQuery picklist multiselect untuk pelayar iPad dan desktop

Senarai picklist multi-row/multiselect yang kelihatan serupa di kedua-dua desktop dan pelayar iPad. Kita dapat dengan mudah menggunakan tag visualforce biasa iaitu untuk tujuan itu, seperti ini:

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

Sumber

7. JQuery klik acara pada iPad

Penyelesaian untuk memperbaikinya. Ini adalah nasihat yang diberikan dalam dokumen pemaju di Apple.com. Ini pada dasarnya mencari iPad dalam rentetan pengguna (kes tidak sensitif). Jika pengguna berada di iPad, kami menggunakan TouchStart dan jika tidak kami lalai kembali ke klik standard. Kod yang anda perlukan adalah:

<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>

Sumber

8. Gerak isyarat iPad mudah di laman web anda dengan jQuery

JQuery menjadikan ini begitu mudah untuk diintegrasikan dan menggunakan yang saya tidak dapat membantu tetapi menipu dengannya. Mula -mula semua pastikan anda mempunyai perpustakaan jQuery terkini yang termasuk dalam laman web anda. Sertakan secara langsung dari laman web seperti ini:

<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>

Langkah kedua, muat turun Perpustakaan TouchWipe dari laman web pengarang atau anda hanya boleh mengikat touchwipe ke. Sertakan perpustakaan TouchWipe sebelum tag. Cth:

Kemudian permulaan sentuh ke tag badan, dan berikan gerak isyarat tindakan yang dipilih untuk dilakukan, untuk contoh ini saya hanya menggunakan makluman:

<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>

TouchWipe boleh ditambah ke div tertentu dan bukannya tag badan. Dan di sana ya pergi. Anda boleh menambahnya ke mana -mana halaman HTML untuk menambah gerak isyarat sapu. Sumber

9. Pengendali Acara iPhone/iPad Doubletap

Dayakan penggunaan acara "Doubletap" pada peranti iPhone dan iPad. Fungsi ini masih tersedia apabila plugin digunakan pada penyemak imbas desktop. Ini bermakna anda tidak perlu bimbang tentang persekitaran di mana plugin digunakan. Sourcedemo

10. jquery.ui.ipad plugin

Menyediakan lapisan antara muka untuk memetakan acara sentuhan ke elemen antara muka UI jQuery.

Sumber

Soalan Lazim (Soalan Lazim) Mengenai Coretan dan Plugin Kod JQuery iPad

Apakah coretan dan plugin kod jQuery iPad?

Coretan kod iPad JQuery dan plugin adalah kepingan kod pra-ditulis yang boleh digunakan untuk menambah fungsi tertentu ke aplikasi iPad anda. Mereka direka untuk memudahkan proses pengekodan, menjadikannya lebih mudah bagi pemaju untuk membina ciri -ciri kompleks. Coretan dan plugin ini boleh terdiri daripada kesan mudah seperti animasi dan peralihan kepada fungsi yang lebih kompleks seperti peristiwa sentuhan dan pengiktirafan isyarat.

Bagaimanakah saya dapat mengenali acara sentuhan menggunakan jQuery di Safari untuk iPad? Peristiwa -peristiwa ini dicetuskan apabila pengguna menyentuh skrin, menggerakkan jari mereka sambil menyentuh skrin, dan mengangkat jari mereka dari skrin. Anda boleh menggunakan peristiwa ini untuk membuat ciri interaktif yang bertindak balas terhadap input sentuhan pengguna.

Bagaimana saya menggunakan coretan kod di WordPress?

plugin. Plugin ini membolehkan anda menambah coretan kod ke laman WordPress anda tanpa perlu mengedit fail tema anda. Anda hanya memasang dan mengaktifkan plugin, kemudian pergi ke menu 'coretan' di papan pemuka WordPress anda untuk menambah coretan kod anda. Acara adalah acara interaksi pengguna yang dicetuskan apabila pengguna mengetuk elemen. Acara ini adalah sebahagian daripada Perpustakaan Mudah Alih JQuery, yang merupakan versi yang dioptimumkan dari perpustakaan JQuery yang direka untuk peranti mudah alih. Acara TAP boleh digunakan untuk membuat ciri interaktif yang bertindak balas terhadap paip pengguna.

Di mana saya dapat mencari coretan kod untuk jQuery? , termasuk codesnippets.pro dan stackoverflow. Laman -laman ini mempunyai pelbagai coretan kod untuk pelbagai fungsi, dan anda boleh mencari coretan tertentu berdasarkan keperluan anda. boleh digunakan dengan mengikat mereka ke unsur -unsur menggunakan kaedah .on (). Sebagai contoh, anda boleh mengikat acara TouchStart ke elemen seperti ini: $ (elemen) .on ('sentuh', fungsi () {// kod untuk dilaksanakan apabila acara sentuh dicetuskan}); Saya menggunakan plugin jQuery dengan WordPress?

Ya, anda boleh menggunakan plugin jQuery dengan WordPress. Walau bagaimanapun, anda perlu memastikan bahawa plugin serasi dengan versi jQuery yang disertakan dengan WordPress. Anda boleh menambah plugin ke fail JavaScript tema anda, atau anda boleh memasangkannya dalam fail functions.php tema anda. Plugin JQuery ke laman web anda, anda perlu memasukkan perpustakaan jQuery dalam fail HTML anda. Kemudian, anda memasukkan fail JavaScript plugin. Akhirnya, anda memulakan plugin menggunakan tag skrip.

Apakah beberapa plugin jQuery yang popular untuk iPad? Iscroll, yang memberikan tatal lancar untuk aplikasi web mudah alih.

Bagaimana saya membuat plugin jQuery saya sendiri?

Membuat plugin jQuery anda sendiri melibatkan menulis fungsi JavaScript yang menambah kaedah baru untuk objek prototaip jQuery. Fungsi ini harus mengandungi fungsi yang anda mahu plugin anda disediakan. Sebaik sahaja anda menulis fungsi anda, anda boleh menggunakannya sebagai kaedah jQuery pada objek jQuery anda.

Atas ialah kandungan terperinci 10 coretan dan plugin kod jQuery iPad yang berguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!