material jqueryui

Materi Web Design 2 Prodi Teknik Informatika May 28, 2014

JQUERY UI

Pengenalan JQuery UI merupakan plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery. Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain.Peran JQuery UI lebih mendominasi ke dalam hal-hal yang berhubungan dengan penciptaan aplikasi online dengan standar yang sangat baik: Slider, button, dialog box, accordion, tooltip, tabs, date picker, progressbar dan masih banyak lagi. Bahkan juga autocomplete seperti dalam fitur HTML5.Semuanya begitu lengkap hingga sangat mudah sebenarnya ketika seorang pengembang menemukan konsep aplikasi online, JQuery UI bisa mengatasi beberapa masalah yang tersisa seperti tema, objek, variabel dan termasuk dukungan peramban penuh (setidaknya selalu diusahakan begitu sampai sekarang).

�1Agung Budi Prasetyo, SE.,MT

!JQuery UI merupakan plugin komponen user interface


Implementasi Untuk menggunakan jQueryUI maka kita harus mendownload plugin tersebut di alamat : http://jqueryui.com pilih dan klik link yang sudah stable. Stable framework adalah framework yang sudah stabil, teruji dan siap digunakan untuk membuat aplikasi. Pada download file yang berbentuk ZIP file ada beberapa file diantaranya Source code, contoh aplikasi, dan dokumentasi untuk jQuery UI. Beberapa file didalamnya adalah sebagai berikut :

✓ Folder CSS yang berisi berbagai file CSS yang digunakan langsung sebagai referensi jQueryUI.

✓ Folder JS yang berisi file library jQueryUI.

✓ Folder Development-Bundle yang berisi beberapa sub folder : Folder Demo [contoh aplikasinya], Themes [CSS theme yang berasosiasi langsung dengan jQuery], dan folder User Interface [UI].

✓ Index.html yang kalau kita jalankan maka kita bisa melihat fitur-fitur jQueryUI didalam browser.

Implementasi jQueryUI untuk membuat Tab View Menu!!!!!!!!!!Tab View Menu adalah menu yang memiliki beberapa tempat untuk menampatkan menu pada sebuah kategori dalam satu tempat, tujuan dari Tab View Menu itu sendiri adalah untuk menghemat tempat dalam menaruh daftar-daftar menu pada sebuah website. Jadi walaupun kecil Tab View Menu ini sangat berguna sekali untuk menaruh menu-menu yang cukup banyak.

Halaman HTML menggunakan Tab View Menu sekarang sudah sangat populer diterapkan dibeberapa website. Tab menu memungkinkan kita untuk memngelompokkan informasi w


http://jqueryui.com


ebsite kita berdasarkan topik yang kita tulis sehingga memudahkan pengunjung untuk memilih topik yang disukai.

Untuk membuat Tab menggunakan jQuery UI ada beberapa langkah yang bisa kita ikuti :

✓ Membuat tag <div> global untuk membuat kerangkanya.

✓ Membuat elemen <ul> yang nanti akan didefinisikan sebagai tab bar.

✓ Membuat elemen <li> sebagai kategorinya

✓ Membuat elemen <div> yang akan digunakan sebagai konten.

!Kode untuk membuat tab adalah sebagai berikut :

<script src = jquery.js></script>"<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>"<link rel=stylesheet type=text/css"href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />"<div id=tabs>"<ul>"<li><a href=#tab1>Tab 1</a></li>"<li><a href=#tab2>Tab 2</a></li>"<li><a href=#tab3>Tab 3</a></li>"</ul>"<div id=tab1>Contents of first tab</div>"<div id=tab2>Contents of the second tab</div>"<div id=tab3>Contents of the third tab</div>"</div>"!Jika kita menjalankan script diatas menggunakan browser maka tidal terjadi apa-apa dan hanya menampilkan plain HTML saja. Untuk menampilkan tab yang sesuai dengan keinginan kita maka perlu kita format lebih lanjut menggunakan jQuery UI dengan tabs() method. Tambahkan formating css nya dan script js sebagai berikut :

!<script>"$("#tabs").tabs ();"</script>"!Tabs () method merupakan salah satu method jQuery UI yang digunakan dalam jQuery class object. Elemen list <li> yang berada dalam tag HTML kemudian diasosiasikan menjadi selector tab dan kemudian ditransformasikan oleh jQueryUI sebagai tab. Sehingga ketika dijalankan dalam browser dan user melakukan klik pada tab maka jQuery UI akan otomatis mengatur jalannya tab tersebut.!!



!Formatting Datepicker Datepicker merupakan salah satu solusi untuk memilih/input tanggal yang biasanya digunakan dalam suatu form, misalnya form pengisian tanggal lahir. Solusi yang lain mungkin dapat dengan menggunakan combo box yang menampilkan tanggal (1-31), semua bulan, dan range tahun. Datepicker dapat dibuat dengan menggunakan Javascript. Akan tetapi saat ini sudah ada yang lebih mudah, yaitu dengan menggunakan JQuery UI

Langkah-langkahnya adalah :

1. Buat sebuah folder “DatePicker” untuk menampung semua file yang akan digunakan untuk membuat datepicker.

2. Lalu buat folder css dan js di dalam folder kalender. Kemudian copykan file jquery-1.4.4.js dan folder ui dari folder development-bundle ke dalam folder js Anda.

3. Copykan juga file jquery.ui.all.css, jquery.ui.base.css, jquery.ui.datepicker.css, dan jquery.ui.theme.css dari folder development-bundle\themes\ui-lightness serta file demos.css dari folder development-bundle\demos ke dalam folder css Anda.

4. Dan yang terakhir copy folder images dari folder development-bundle\themes\ui-lightness ke dalam folder css Anda.

5. Buat satu file index.html

Ketikkan baris kode berikut ini ke dalam file index.html tersebut :

<html xmlns="http://www.w3.org/1999/xhtml">"<head>"<meta http-equiv="content-type" content="text/html; charset=utf-8" />"<title>Kalender</title>"<link rel="stylesheet" type="text/css" href="css/jquery.ui.all.css" />"<link rel="stylesheet" type="text/css" href="css/demos.css" />"<link rel="stylesheet" type="text/css" href="css/jquery.ui.datepicker.css" />" "<script type="text/javascript" src="js/jquery-1.4.4.js"></script>"<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>"<script type="text/javascript" src="js/ui/jquery.ui.datepicker.js"></script>"<script type="text/javascript" src="js/ui/i18n/jquery.ui.datepicker-id.js"></script>" "<script type="text/javascript">" $(document).ready(function(){" $("#tanggal").datepicker({" showOn: "both", buttonImage: "images/calendar.png", buttonImageOnly: true, nextText: "", prevText: "", changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy"" });" });"</script>"</head>"<body>"<table border="0">" <tr>" <td><h3>Date : <input id="tanggal" type="text"></h3></td>" </tr>"



</table>"</body>"</html>"!Sekarang simpan dan jalankan di web browser. Akan tampil sebuah form dengan 1 field untuk input tanggal. Cara inputnya ada dua pilihan, bisa melalui klik pada fieldnya atau pada tombol yang bergambar kelender disampingnya. Ini merupakan efek dari property showOn: “both” pada baris ke-17. Jika kita hanya ingin menggunakan tombol saja dalam peng-input-annya, kita tinggal memodifikasinya menjadi showOn: “button”.

Pada baris ke-17 juga terdapat property dateFormat: “dd/mm/yy” yang berfungsi untuk mengatur tampilan tanggalnya setelah dipilih oleh user. Format yang dihasilkan untuk format tersebut adalah 28/05/2014. Jika kita menginginkan format tampilan menjadi 28 Mei 2014, maka kita tinggal memodifikasinya menjadi dateFormat: “dd MM yy”.

Untuk gambar kalender pada tombolnya, berdasarkan baris kode ke-17, disini disimpan di folder images dengan nama file calendar.png. Letakkan folder images di folder kalender.


material jqueryui

Documents