Costumize Your Corner with jQuery Corner . Awesome !

Xixixixixix, lagi suka bikin judul yang lebay lebay nih . Tapi beneran awesome kok, jquery plugin yang satu ini merubah atau mengganti bagian pjok atau corner box yang biasanya cuma bentuk kotak atau round . Untuk lebih jelasnya lihat demonya disini .

Demo

Gimana ? Awesome kan ? (awesome artinya apa sih ? wkwkkwkw ) mau coba ? gni caranya sob..

1. Masukan script jQuery ini,


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>


2. Masukan script plugin ini tepat dibawah script di atas .


<script src='http://granoblog.googlecode.com/files/jquery.corner.js' type='text/javascript'></script>


Nb: hostingin ndiri bro.. biar lebih afdol..

3. Javascript ..

Untuk javascriptnya bisa di ambil di dalam demonya . Misal kamu mau pake bevel corner tinggal masukin javascript sperti ini .


<script type='text/javascript'>$('this').corner("bevel");</script>


lalu ganti kata this dengan kata sesuka anda, ini untuk pemanggilan pada tag div . Misal


<script type='text/javascript'>$('.bevel').corner("bevel");</script>


pemanggilanya


<div id='bevel'> </div>


4. Contoh pemanggilan pada div box .

Css Box


#box {
width: 250px;
height: 150px;
background: grey;
position: relative;
text-align: center;}


Javascript (schulpt)


<script type='text/javascript'>$(''schulpt').corner("schulpt");</script>


HTML


<div id='bevel' class='box'> </div>


5. Keterangan Untuk Custom

yang dimaksud Custom disini adalah menggunakan beberapa corner yg berbeda . Mengubahnya hanya menambahkan sedikit script posisi pada javascriptnya . Misal ingin menggunakan Schulpt di bagian atas dan bite dibagian bawah . javascriptnya



<script type='text/javascript'>$(''schulpt').corner("schulpt top"); .corner("bite bottom");</script>


Yup begitulah tentang cara penggunaan jQuery Corner . Gimana ? mudahkan ? menarik dan cukup simple untuk digunakan bro... semoga bermanfaat yah sob??