[Contoh] Mendesain Halaman Comment Posisi Terbalik dengan JQuery .insertBefore()

Seperti artikel sebelumnya, contoh yang digunakan adalah halaman untuk web chat. Namun disana, halaman yang dibuat adalah dalam bentuk Chronological atau berurutan sesuai waktu, dan yang akan terbaru akan ditempatkan paling bawah. Sedang jika kita melihat beberapa situs, menempatkan komentar terbaru ada di paling atas. Untuk itu, kita dapat menggunakan fungsi JQuery .insertBefore untuk melakukan generating halaman ini.
Fungsi JQuery .insertBefore berguna untuk melakukan penambahan elemen pada SEBELUM sebuah elemen lain. Dengan demikian elemen baru yang datang, akan muncul diatasnya. Misal kita memiliki script sedemikian :

.
.
satu
. .

Maka kita akan melihat munculnya dua elemen DIV berurutan, dengan kata : DUA ada di atas kata SATU.

Selanjutnya saya akan mencoba membuat sebuah halaman komentar yang berposisi terbalik reversed, dimana komentar terbaru ada diatas yang lama.

File yang kita buat masih hampir sama dengan posting lalu tentang .append(). Hanya saja ada beberapa perubahan sesuai dengan yang akan kita fungsikan.

Saya menempatkan empat buah file dengan nama:

  • comment.html
  • styles.css
  • jquery source
  • script.js

File pertama, comment.html akan seperti berikut:














Isi pertama
Isi kedua
Isi ketiga

File styles.css akan seperti berikut:

body{
background:#a6a8f4;
margin:auto;
font-size:13px;
font-family:Arial;
line-height:25px;
}

#centerbox{
margin-top:50px;
margin-left:25%;
min-height:300px;
width:500px;
background:#14178f;
color:#fff;
padding-left:50px;
padding-top:20px;
padding-right:50px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 3px;
border:10px solid #fff;
overflow:auto;
}

#form{
margin-left:25%;
margin-top:20px;
}

#form textarea{
width:500px;
height:200px;
font-size:12px;
border:1px solid #ccc;
margin-right:20px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

#form input[type="submit"]{
width:200px;
height:20px;
font-size:15px;
border:1px solid #ccc;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color: #E6E6E6;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(25%, white), to(#E6E6E6));
background-image: -webkit-linear-gradient(white, white 25%, #E6E6E6);
background-image: -moz-linear-gradient(top, white, white 25%, #E6E6E6);
background-image: -ms-linear-gradient(white, white 25%, #E6E6E6);
background-image: -o-linear-gradient(white, white 25%, #E6E6E6);
background-image: linear-gradient(white, white 25%, #E6E6E6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#E6E6E6', GradientType=0);
}
#isi{
border-bottom:1px solid #999;
margin-top:5px;
}

File keempat adalah script control akan seperti berikut:

$("#submit_comment").click(function(anu){
   anu.preventDefault();
   var comment = $("#comment").val();
   
   $("
"+comment+"
").insertBefore('#isi'); $("form#commentForm")[0].reset(); return false; });

PENJELASAN
Script script.js akan memegang peranan penting, antara lain:
– melakukan fungsi pembantu POST untuk form chatform
– melakukan prevent default browser ketika post, sehingga tidak terjadi reloading
– menangkap variabel comment
– melakukan penyisipan elemen baru sebelum div#isi yang paling atas
– melakukan pengosongan kembali Form yang telah terisi tadi

Oh ya, untuk memperindah proses comment dapat ditambahkan fungsi hide dan fadeIn seperti berikut ini, pada script berikut

.
.
   $("
"+obrol+"
").insertBefore('#isi').hide().fadeIn(1000); . .

Script di artikel ini masih berupa halaman statis dengan animasi jquery saja, untuk real chat dan comment, yang melibatkan database, kita tunggu posting di lain kesempatan.

Untuk lebih jelasnya tentang fungsi script-script itu, dapat dilihat pada:

2 thoughts on “[Contoh] Mendesain Halaman Comment Posisi Terbalik dengan JQuery .insertBefore()

Leave a Reply

Your email address will not be published. Required fields are marked *