- Check your rankings anytime anywhere
- Support & FAQ
jScroll adalah plugin jQuery untuk bergulir tak terbatas, yang ditulis oleh Philip Klauzinski. bergulir tak terbatas; juga dikenal sebagai lazy loading, bergulir tak berujung, AutoPager, halaman tak berujung, dll .; adalah kemampuan untuk memuat konten melalui AJAX dalam halaman saat ini atau area konten yang Anda gulir ke bawah. Konten baru dapat dimuat secara otomatis setiap kali Anda menggulir ke akhir konten yang ada, atau dapat dipicu untuk memuat dengan mengklik link navigasi pada akhir konten yang ada.
Contoh bergulir tak terbatas "News Feed" halaman Anda Facebook. Anda mungkin memperhatikan bahwa ketika Anda gulir ke bawah halaman ini, konten baru akan sering memuat secara otomatis, atau Anda akan diberikan link ke "Posting Lama" yang akan memuat lebih banyak konten saat diklik.
Pemakaian
Terdapat dua metode pemanggilan data load yaitu dengan klik tombol untuk memuat data load selanjutnya dan dengan scroll otomatis data muncul.
$('.infinite-scroll').jscroll();Metode jscroll mengambil obyek opsional literal sebagai parameter untuk mengesampingkan pilihan default. Sebuah contoh bagaimana hal ini dapat dilakukan ditunjukkan di bawah ini.
$('.infinite-scroll').jscroll({ loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...', padding: 20, nextSelector: 'a.jscroll-next:last', contentSelector: 'li' });| Option Key | Default Value | Description |
|---|---|---|
| debug | false | Bila diatur ketrue, output informasi yang berguna untuk menampilkan layar konsol jika objek konsolnya ada. |
| auto Trigger | true | Ketika diatur ketrue, memicu pemuatan set berikutnya konten secara otomatis ketika pengguna gulungan ke bagian bawah elemen yang mengandung. Bila diatur kefalse, tautan berikutnya yang dibutuhkan akan memicu pemuatan set berikutnya konten saat diklik. |
| auto Trigger Until | false | Set ke integer besar dari 0 untuk mematikanautoTrigger dari paging setelah jumlah tertentu dari halaman. MembutuhkanautoTrigger untuk menjadi kenyataan. |
| loading Html | '<small> Loading...</ small>' | HTML untuk menunjukkan di bagian bawah konten saat memuat set berikutnya. |
| padding | 0 | Jarak dari bagian bawah konten digulir di mana untuk memicu pemuatan set berikutnya konten. Ini hanya berlaku ketika autoTrigger diatur ke benar. |
| next Selector | 'a:last' | Memilih untuk menggunakan untuk menemukan link yang berisi menunjuk href untuk set berikutnya konten. Jika pemilih ini tidak ditemukan, atau jika tidak mengandung atribut href, jScroll akan diri menghancurkan dan memperlonggar dari elemen atas yang disebut. |
| content Selector | '' | Sebuah pemilih kenyamanan untuk memuat hanya bagian dari konten dalam respon untuk set berikutnya konten. pemilih ini akan diabaikan jika dibiarkan kosong dan akan menerapkan seluruh respon terhadap DOM. |
| callback | false | Fungsi untuk pilihan ini dan akan disebut pada akhir setiap halaman beban. Atau, Anda dapat lulus fungsi sebagai satu-satunya argumen ke jScroll Instansiasi bukan obyek pilihan, dan itu akan dikembalikan sebagai callback. |
Untuk informasi lebih lanjut tentang opsi contentSelector dan bagaimana beban fragmen respon, lihatjQuery documentation for the .load() method.
1. Menggunakan auto load
Berikut contoh kode auto load, dengan cukup scroll mouse ke bawah tampilan akan ke load otomatis.
HTML (disingkat)
<div class="scroll"> <h3>Page 1</h3> <p>Content here...</p> <a href="example-page2.html">next page</a> </div>
$('.scroll').jscroll();
2. Menggunakan metode autoTrigger = false
Menggunakan autoTriger membuat scroll tidak bisa automatis, harus menggunakan media tombol / link untuk membuka bagian selanjutnya
//Tidak secara otomatis memuat konten pada scroll, memerlukan pengguna untuk mengklik link bukan $('.scroll').jscroll({ autoTrigger: false });3. Menggunakan autoTriggerUntil
Menggunakan autoTriggerUntil yaitu membuat otomatis load bagian halaman sebanyak autoTrigerUntil diberikan, selanjutnya akan diarahkan ke manual load dengan triger menggunakan tombol
//autoTrigger pada scroll sampai setelah permintaan ketiga adalah dimuat $('.scroll').jscroll({ autoTriggerUntil: 3 });Demikian cara autoload dengan jscroll, silahkan untuk yang ingin mencoba dan mendownloadnya langsung download.
jScroll is © 2017Philip Klauzinski and dual licensed under theMIT andGPL Version 2 licenses.
DINAS TATA KOTABAPPEDADPPABAPUSIPDABPKADBKDBKPPDDPUPR
SATPOL PP
KEMENTRIAN KETENAGAKERJAAN
ABADI PRIMA INTI KARYA
DT WARRIOR
SEKOLAH TINGGI PARIWISATA
STAI BANI SALEH
KOMITE NASIONAL GEOPARK