BERKREASI DENGAN PLUGIN JQUERY UI
jQuery UI (user interface merupakan plugin yang paling populer di kalangan programmer jQuery. Karena sampai-sampai dijadikan satu manual dengan manual jQuery di website resminya. jQuery UI dibuat oelh Paul Bakaus yang bekerja sama dengan stefan Petre untuk menciptakan efek-efek yang canggih dan komponen librari pelengkap jQuery, diantaranya :
- Accordion
- Datepicker
- Tabs
- Dialog
- Progressbar
- Slider
- Effect/animasi
- Drag and Drop
- Dan lain-lain
Selanjutnya, bagian berikut akan membahas cara penggunaan beberapa komponen library dari jQuery UI.
Instalasi jQuery UI
1. Download jQuery UI di http://jquery.com/ maka akan tampil halaman downloadnya, klik aja langsung link current (stable), maka file jQuery UI (jquery-ui-1.7.2.custom.rar) akan tersimpan di komputer anda.
2. Filenya masih berbentuk kompresi (jquery-ui-1.7.2.custom.rar), oleh karena itu gunakan program winzip/winrar untuk mengekstraknya, nanti semua fule jquery-ui akan ditemukan pada folderjquery-ui-1.7.2.custom
3. Untuk mencobanya, silahkan klik versi demonya yang ada di folder jquery-ui-1.7.2.custom/development-bundle/demis, nanti klik 2x file index.html pada folder tersebut, maka akan tampil halaman demo dari jQuery UI, misalnya coba library Tabs pada bagian widget,maka demonya akan tampil dibagian tengah.
Silahkan dicoba beberapa demo library jQuery UI lainnya, seperti draggable, accordion, progressbar, Dialog, Effect, dan lain-lain. Keren kan???
Sekarang pertanyaannya, bagaimana menerapkan library jQuery UI pada website kita? Ikuti aja pembahasan berikutnya.
BAB VI
DATEPICKER
Datepicker berfungsi untuk mengambil tanggl dari sistem kelender yang ada di komputer,sehingga memudahkan kita dalam memilih tanggal, karena ditampilkan secara keseluruhan dan menarik. Oke langsung saja kita jelajahi fiturnya.
Datepicker.html
1. <html>
2. <head>
3. <title>Menggunakan Datepicker</title>
4. <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5. <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6. <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7. <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8.
9. <script type="text/javascript">
10. $("document").ready(function(){
11. $("#tanggal").datepicker();
12.
13. });
14. </script>
15. </head>
16. <body>
17. Masukkan tanggal :<input id="tanggal" type="text">
18. </body>
19. </html>
Datepicker Format Bahasa Indonesia
Pada contoh kedua, kita akan mengubah format tanggal standar datepicker (bulan/tanggal/tahun) menjadi format tanggal berbahasa indonesia (tanggal/bulan/tahun).
Caranya cukup mudah, kita tinggal panggil library penanggalan bahasa indonesia yang sudah disediakan oleh jquery UI, yaitu ui.datepicker-id.js yang terdapat pada folder jQueryUI. Untuk lebih jelasnya, lihat skrip berikut (perhatikan teks yang ditebalkan):
Datepicker2.html
1. <html>
2. <head>
3. <title>Menggunakan Datepicker</title>
4. <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5. <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6. <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7. <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8. <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9. <script type="text/javascript">
10. $("document").ready(function(){
11. $("#tanggal").datepicker();
12.
13. });
14. </script>
15. </head>
16. <body>
17. Masukkan tanggal :<input id="tanggal" type="text">
18. </body>
19. </html>
Sekarang coba jalankan skrip datepicker2.html di browser, kemudian klik pada input text di sebelah kanan teks Masukkan tanggal, maka akan tampil pilihan tanggal yang sudah berbahasa indonesia dan berformat indonesia (tanggal.bulan/tahun).
Mengubah Format Penanggalan Datepicker
Pada contoh ketiga, kita masih akan mengubah format tanggal standar dari datepicker (mm/dd/yyy) à contohnya tanggal 7 Februari 2010 ditulis (02/07/2010 menjadi format tanggal yang kita inginkan (lebih familiar), misalnya kita akan menampilkannya menjadi (07 Februari 2010)
Caranya, gunakan fungsi dateformat dari datepicker. Untuk lebih jelasnya, lihat skrip berikut (perhatikan teks yang ditebalkan):
1. <html>
2. <head>
3. <title>Menggunakan Datepicker</title>
4. <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5. <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6. <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7. <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8. <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9. <script type="text/javascript">
10. $("document").ready(function(){
11. $("#tanggal").datepicker({
12. dateFormat:"dd MM yy"
13. });
14. });
15. </script>
16. </head>
17. <body>
18. Masukkan tanggal :<input id="tanggal" type="text">
19. </body>
20. </html>
Menampilkan Pilihan Bulan dan Tahun
Pada contoh ke empat, kita akan membuat bulan dan tahun ditampilkan dalam bentuk combobox, nantinya pengguna dapat lebih bebas dan mudah dalam memilih bulan dan tahun yang diinginkannya.
Caranya, gunakan fungsi changeMonth dan changeYear dari datepicker. Untuk lebih jelasny, lihat skrip berikut (perhatikan teks yang ditebalkan)
1. <html>
2. <head>
3. <title>Menggunakan Datepicker</title>
4. <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5. <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6. <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7. <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8. <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9. <script type="text/javascript">
10. $("document").ready(function(){
11. $("#tanggal").datepicker({
12. dateFormat:"dd MM yy",
13. changeMonth:true,
14. changeYear:true
15. });
16. });
17. </script>
18. </head>
19. <body>
20. Masukkan tanggal :<input id="tanggal" type="text">
21. </body>
22. </html>
Memilih Tanggal menggunakan tombol
Kita lanjut pada contoh kelima, dimana kita juga bisa menampilkan pilihan tanggal (datepicker) menggunakan perantara sebuah tombol.
Caranya, gunakan fungsi showOn dan buttonText dari datepicker. Untuk lebih jelasnya, lihat skrip berikut (perhatikan teks yang ditebalkan)
Skrip datepicker5.html
1. <html>
2. <head>
3. <title>Menggunakan Datepicker</title>
4. <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5. <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6. <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7. <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8. <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9. <script type="text/javascript">
10. $("document").ready(function(){
11. $("#tanggal").datepicker({
12. dateFormat:"dd MM yy",
13. changeMonth:true,
14. changeYear:true,
15. showOn:"button",
16. buttonText:"Buka Datepicker"
17. });
18. });
19. </script>
20. </head>
21. <body>
22. Masukkan tanggal :<input id="tanggal" type="text">
23. </body>
24. </html>
Sekarang coba jalankan skrip datepicker5.html di browser, kemudian klik tombol Buka Datepicker, maka akan tampil pilihan tanggal dari datepicker.
Biasanya, tombol akan lebih menarik kalau berbentuk gambar, dengan kata lain gambar dijadikan sebuah tombol. Oleh karena itu, mari kita coba mengganti tombol standar menjadi tombol dalam bentuk gambar.
Pertama, siapkan dulu gambar yang akan dijadikan tombolm tapi untuk lebih tepatnya, gunakan saja tombol gambar yang sudah disediakan jquery-ui, yaitu calendar.gif berada di folderdevelop/demos/datepicker/images/.
Kemudian gunakan fungsi showOn, buttonImage, dan buttonImageOnly dari datepicker. Untuk lebih jelasnya, lihat skrip berikut ini (perhatikan teks tebal)
1. <html>
2. <head>
3. <title>Menggunakan Datepicker</title>
4. <link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
5. <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6. <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7. <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8. <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9. <script type="text/javascript">
10. $("document").ready(function(){
11. $("#tanggal").datepicker({
12. dateFormat:"dd MM yy",
13. changeMonth:true,
14. changeYear:true,
15. showOn:"button",
16. buttonImage: "develop/demos/datepicker/images/calendar.gif",
17. buttonImageOnly:true
18. });
19. });
20. </script>
21. </head>
22. <body>
23. Masukkan tanggal :<input id="tanggal" type="text">
24. </body>
25. </html>
Sekarang coba jalankan skrip datepicker6.html di browser, maka tombol untuk menampilkan datepicker sudah berubah menjadi tombol dalam bentuk gambar.
Mengganti Themes Datepicker
Selanjutnya, kita akan berkreasi lagi dengan datepicker, kali ini kita akan mencoba mengganti themes standar dari datepicker. Perlu diketahui bahwa seluruh themes yang bisa digunakan oleh komponen library jQuery UI (bukan hanya datepicker saja) bisa ditemukan pada folderdevelop/themes/
Biasanya themes standar yang kita gunakan pada contoh-contoh sebelumnya adalah themes baseyang dinyatakan oelh skrip berikut :
<link type="text/css" href="develop/themes/base/jquery.ui.all.css" rel="stylesheet"/>
Themes lainnya yang bisa dicoba adalah hot sneaks, le-frog, sunny, ui-ligntness, excite-bike, dan lainnya. Cara mengganti themes sangatlah mudah, kita cukup mengganti nama foldernya saja pada bagian pemanggilan file CSS (ui.all.css). untuk lebih jelasnya, lihat skrip berikut:
1. <html>
2. <head>
3. <title>Menggunakan Datepicker</title>
4. <link type="text/css" href="develop/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet"/>
5. <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6. <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7. <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8. <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9. <script type="text/javascript">
10. $("document").ready(function(){
11. $("#tanggal").datepicker({
12. dateFormat:"dd MM yy",
13. changeMonth:true,
14. changeYear:true,
15. showOn:"button",
16. buttonImage: "develop/demos/datepicker/images/calendar.gif",
17. buttonImageOnly:true
18. });
19. });
20. </script>
21. </head>
22. <body>
23. Masukkan tanggal :<input id="tanggal" type="text">
24. </body>
25. </html>
Setelah dijalankan, tampilan datepicker akan terlihat berbeda dari yang sebelumnya,
Animasi Datepicker
Efek animasi yang akan kita gunakan adalah efek drop, dimana objek/datepicker terlihat seperti jatuh.
Untuk menrapkan efek drop pada datepicker, kita membutuhkan dua buah file yaitu effect.drop.jsdan effect.core.js. kedua file tersebut sudah disediakan jQuery UI di folder development-bundle/ui, jadi tinggal kita panggil saja. Kemudian kita juga perlu fungsi showAnim danshowOptions dari datepicker. Perhatikan skrip dibawah ini:
Skrip datepicker8.html
1. <html>
2. <head>
3. <title>Menggunakan Datepicker</title>
4. <link type="text/css" href="develop/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet"/>
5. <script type="text/javascript" src="develop/jquery-1.4.3.js"></script>
6. <script type="text/javascript" src="develop/ui/jquery.ui.core.js"></script>
7. <script type="text/javascript" src="develop/ui/jquery.ui.datepicker.js"></script>
8. <script type="text/javascript" src="develop/ui/i18n/jquery.ui.datepicker-id.js"></script>
9.
10. <script type="text/javascript" src="develop/ui/jquery.effects.core.js"></script>
11. <script type="text/javascript" src="develop/ui/jquery.effects.drop.js"></script>
12.
13. <script type="text/javascript">
14. $("document").ready(function(){
15. $("#tanggal").datepicker({
16. showAnim:"drop",
17. showOptions:{direction:"up"}
18. });
19. });
20. </script>
21. </head>
22. <body>
23. Masukkan tanggal :<input id="tanggal" type="text">
24. </body>
25. </html>
Share story
0 komentar :