Dengan menggunakan library jQuery UI kita dengan mudah membuat datepicker. Datepicker adalah sebuah aplikasi untuk memilih tanggal. Berikut akan dijelaskan langkah-langkah pembuatannya. Pertama-tama kita membuat input :Tanggal: <input id=”tanggal”> Kemudian dilanjutkan dengan include file-file yang diperlukan: <script src=”development-bundle/jquery-1.6.2.js”> </script> <script
Membuat color slider dengan jQuery UI
Pada artikel ini kita akan membuat color slider dengan memakai widget slider yang ada di jQuery UI. Berikut langkah-langkah pembuatannya: Div untuk slider : R: <div id=”r_slider” style=”width:400px;”></div><br/><br/> G: <div id=”g_slider” style=”width:400px;”></div><br/><br/> B: <div id=”b_slider” style=”width:400px;”></div><br/><br/> Output hasil pemilihan warna
Mengatur volume suara dengan slider jQuery UI
Dengan menggabungkan tag audio dan slider jQuery UI kita dapat membuat script untuk mengatur volume suara dari lagu atau suara yang lain. Pertama-tama kita akan mendefinisikan audionya:<audio id=”lagu” controls=”controls”> <source src=”http://upload.wikimedia.org/wikipedia/en/4/41/Joy_to_the_World.ogg” type=”audio/ogg” /></audio> Kemudian dilanjutkan dengan div untuk slidernya :
Tag audio di HTML 5
Pada HTML 5 telah ditambahkan tag audio untuk memperdengarkan audio. Tag itu sederhana yaitu dengan <audio> dan file audionya. Sebagai contoh tag untuk audio adalah :<audio controls=”controls”> <source src=”http://upload.wikimedia.org/wikipedia/en/4/41/Joy_to_the_World.ogg” type=”audio/ogg” /></audio> Source code lengkapnya adalah:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0
Membuat Slider di jQuery UI
Seperti halnya dengan widget-widget sebelumnya yang telah kita buat, kitapun dapat dengan mudah membuat slider di jQuery UI. Berikut akan dijelaskan langkah membuat slider ini. Pertama-tama kita akan membuat div yang akan dijadikan slider seperti contoh berikut ini: <div id=”sliderku”>
JQuery Date Picker
Salah satu fitur yang dapat dibuat dengan jquery adalah Date Picker yang dapat kita gunakan untuk menampilkan tanggal pada sebuah field form. Terlebih dahulu download jqueryUI disini dan ekstrak di root folder anda. Tambahkan script untuk memanggil file css dan
Variasi Search Sederhana jQuery
Mungkin anda pernah melihat fasilitas search dalam suatu website, yang mana ketika kita klik box search tersebut maka tulisan search yang ada di dalamnya hilang, dan ketika kita tidak mengklik box tersebut maka tulisan search tersebut akan ada kembali, contohnya
Livechat Toggle Sederhana Menggunakan jQuery
Kali ini kita akan coba membuat semua toggle livechat, berikut contoh toggle livechat yang ingin kita buat, toggle livechat. Pada contoh tersebut kita membuat suatu bagian livechat menjadi bisa di-hidden dan bisa di-show, fitur tersebut tidak susah untuk dibuat, karena
Multilevel pulldown menu
File yang harus ada: jquery.min.js ddsmoothmenu.js ddsmoothmenu.css ddsmoothmenu-v.css 2 images: JAVASCRIPT<script type=”text/javascript”>ddsmoothmenu.init({ mainmenuid: “smoothmenu1”, orientation: ‘h’, classname: ‘ddsmoothmenu’, contentsource: “markup”})</script> CSS<style> h1{font-size:24px; color: #06C;}</style> HTML<h1>Multilevel Pulldown Menu</h1> <div id=”smoothmenu1″ class=”ddsmoothmenu”><ul><li><a href=”#”>Menu 1</a></li><li><a href=”#”>Menu 2</a> <ul> <li><a href=”#”>Sub Menu
Vertical pulldown menu
File yang harus ada: jquery.min.js ddsmoothmenu.js ddsmoothmenu.css ddsmoothmenu-v.css 2 images: JAVASCRIPT<script type=”text/javascript”>ddsmoothmenu.init({ mainmenuid: “smoothmenu2”, orientation: ‘v’, classname: ‘ddsmoothmenu-v’, contentsource: “markup” })</script> CSS<style> h1{font-size:24px; color: #06C;}</style> HTML<h1>Multilevel Pulldown Menu</h1> <div id=”smoothmenu2″ class=”ddsmoothmenu-v”><ul><li><a href=”#”>Menu 1</a></li><li><a href=”#”>Menu 2</a> <ul> <li><a