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>Pulldown Menu secara vertikal</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
Menampilkan gallery dengan jQuery UI
Dengan menggunakan feature dari dialog jQuery UI, kita dapat menampilkan gallery yang terdiri dari thumbnail dan image besarnya. Berikut akan dijelaskan bagaimana menampilkan thumbnail dan image besarnya. Pertama-tama kita membuat tampilan thumbnail dan link ke image besar dan diberi class
Membuat dialog yang draggable dan resizable
Kita dapat membuat dialog yang draggable dan resizable di jQuery UI dengan penambahan script yang sangat sederhana. Script itu adalah : <script src=”development-bundle/ui/jquery.ui.mouse.js”> </script> <script src=”development-bundle/ui/jquery.ui.draggable.js”> </script> <script src=”development-bundle/ui/jquery.ui.resizable.js”> </script> Coding lengkapnya adalah sebagai berikut :<!DOCTYPE html><html><head><title>Dialog</title><link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”></head><body><p>Ini body
Dialog dengan jQuery UI
Dengan jQuery UI kita bisa membuat dialog yang fleksibel. Dialog ini semacam open window dalam javascript tetapi dengan pengendalian yang lebih fleksibel. Coding sederhana dialog dengan jQuery UI dapat dilihat seperti di bawah ini :<!DOCTYPE html><html><head><title>Dialog</title><link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”></head><body><p>Ini body dari
Navigasi menu dengan accordion jQuery UI
Dengan widget accordion jQuery UI kita juga dapat merancang navigasi menu website. Script yang dipakai untuk navigasi menu ini adalah: var pilihan= { navigation: true }; $(“#accordionku”).accordion(pilihan); Kita akan membuat file-file di
Widget Accordion di jQuery UI
Dengan jQuery UI kita juga mudah dalam membuat accordion. Berikut kita akan mendemokan bagaimana membuat accordion ini. Source codenya adalah:<!DOCTYPE html><html><head><title>Accordian</title><link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”></head><body> <div id=”accordionku”> <h2> <a href=”#”>Header 1</a> </h2> <div> Ini isi
Slideshow dengan jQuery UI
Setelah kita berhasil menambahkan efek animasi saat pergantian tab, kita bisa membuat supaya tab bisa berpindah otomatis. Dengan cara ini kita bisa membuat slideshow dengan jQuery Ui. Untuk membuat supaya tab-tab tersebut berpindah secara berputar kita cukup menambahkan tabs(“rotate”,3000,true) seperti
Efek animasi pada tab jQuery UI
Untuk lebih menarik tab yang kita buat, kita dapat menambah efek animasi. Untuk memberikan efek animasi kita cukup memberikan parameter yang berisi informasi efek animasi yang kita inginkan. Codingnya adalah seperti berkut ini : var tab_opt = {
Membuat tab dengan jQuery UI
Kita mudah membuat tab dengan jQuery UI dengan coding seperti di bawah ini:<!DOCTYPE html><html><head><title>Tab</title><link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”></head><body> <div id=”tabku”> <ul> <li><a href=”#a”>Tab 1</a></li> <li><a href=”#b”>Tab 2</a></li> </ul> <div id=”a”>Ini isi dari tab 1 yang
Position utility di jQuery UI
JQuery UI telah menambahkan position utility yang dapat diakses di http://jqueryui.com/demos/position/. Berikut kita akan mencoba menggunakan position utility. Kita akan membuat sebuah file position.html dengan isi sebagai berikut:<!DOCTYPE html><html><head><title>Belajar Position Utility</title><link rel=”stylesheet” href=”css/position.css”></head><body> <div class=”ui-acuan”> Saya acuannya </div><!–end of ui-acuan–>