Membuat Read More dapat dilakukan
dengan banyak cara. Kali ini saya akan menjelaskan bagaimana membuat
Read More pada web page dengan jQuery Expander Plugin. jQuery Expander Plugin adalah
plugin JQuery sederhana untuk menyembunyikan dan menampilkan sebagian
text sehingga user hanya perlu membaca sebagian text saja.
Berikut cara sederhana untuk membuat read/more sebuah tulisan.
1. Download file jquery.expander.js dan jquery.expander.js.
2. Copy Script berikut kedalam file html anda (bagian head)
<script type="text/javascript" src="jquery-1.4.4.min.js">
</script>
<script type="text/javascript" src="jquery.expander.js">
</script>
<script type="text/javascript">
$(function () {
$('div.readmore').expander({
slicePoint: 20,
expandText: 'More',
userCollapseText: 'Less'
});
});
</script>
Perhatikan $('div.readmore')
pada script diatas. Script ini membaca elemen yang berisi text yang
akan kita tampilkan. kemudian, slicePoint adalah variabel yang berisi
banyaknya text yang akan ditamplikan pertama sekali. Kemudia expandText
adalah variabel yang berisi link-text untuk menampilkan semua text dan
userCollapseText link-text untuk kembali ke posisi semula.
3. Berikut contoh text yang digunakan.
<div style="width:400px;background-color:#E3E3E3;" class="readmore">
Kemarin aku memberanikan diri untuk bertemu sendiri dengan dokter itu,
karena kalau bukan diriku sendiri masalah ini sepertinya tidak akan
selesai. Aku menunggu sampai anak yang ujian hingga pukul 10.30 akan
masuk.
"Dek, yang pukul 10.30 masuk," kata abang penjaga Skills Lab.
Setelah semua masuk, aku hampiri abang itu dengan agak takut.
"Bang, dokter Hidayatnya ada ga? Saya yang kemarin salah jadwal OSCE..."
"Ada, ayo ikut abang."
Perlahan-lahan serasa ada banyak burung merpati terbang mengelilingi aku lalu mengangkatku hingga ke angkasa, duuh, senangnya.
"Dokternya lagi rapat, kamu tunggu di sini."
Aku
menunggu di depan gudang, dokternya masih ada di dalam. Tak lama
dokternya lewat di depanku menuju ruang rapat, dengan gerakan kaki yang
cepat dan terkesan terburu-buru. Aku diam mematung dengan hanya ekor
mataku yang menatap lurus ke dokter itu. Aku ga berani lagi memanggil
beliau.
Setelah rapat selesai, dokternya sambil menenteng notebook berjalan menuju gudang, lalu aku hampiri,
"Dok, saya mau lapor, kemarin saya ga ikut OSCE."
"Kenapa, Dek?"
"Saya salah lihat jadwal, saya mengingat jadwal teman saya, Dok."
"Oh, yaudah kamu buat surat aja yang isinya gini, bla bla bla bla. Besok kamu bisa ikut ujian OSCE."
"Benaran, Dok?!" kataku setengah tak percaya.
"Iya."
"Makasih banyak, Dok."
Aku
berlari serasa berlari di sungai yang jernih dengan ada biasan pelangi
di air yang aku pecah menjadi buih-buih dengan kakiku. Ahh, aku sungguh
beruntung dengan berkat Tuhan yang satu ini, terimakasih Bapa...
Akhirnya hari ini aku bisa ikut OSCE, suatu pelajaran yang sangat berharga agar aku selalu teliti dalam bertindak.
</div>
4. Simpan filenya dan jalankan di browser.
Perhatikan hasilnya, jika ada yang salah, silahkan tinggalkan komentar.
Jangan lupa di like ya :)
Kunjungi juga http://gesroseline.blogspot.com/