JQuery Mobile

JQuery Mobile merupakan sistem antarmuka terpadu untuk semua perangkat mobile populer, dibangun menggunakan JQuery dan JQuery UI. Kode yang ringan dengan peningkatan yang progresif, dan memiliki desain yang fleksibel dan mudah dikustomisasi.

CLEditor

CLEditor merupakan plugin JQuery dengan kode sumber terbuka yang berfungsi untuk WYSIWYG Editor. CLEditor memiliki kode yang ringan (hanya 14KB lengkap dengan css dan button atau 9KB setelah dikompres), fitur lengkap dan mudah untuk diaplikasikan pada website Anda.

Plugin Warna xcolor

xcolor merupakan plugin JQuery untuk memanipulasi warna yang mudah digunakan pada setiap kombinasi yang dapat dibayangkan. Plugini ini mengimplementasikan analisa warna yang luas dan banyak fungsi pemanipulasian warna. Salah satu fungsi yang sangat berguna adalah isReadable() yang akan mengecek apakah warna depan (warna teks) dapat di baca pada beberapa warna latar belakang.

Colortip

Plugini ini digunakan untuk mengubah tampilan attribute title element html pada sebuah halaman menjadi lebih menarik untuk dilihat daripada tampilan default.

GvChart

GvChart adalah plugin jQuery yang menggunakan Google Chart untuk memvisualisasikan isi data dari suatu tabel menjadi bentuk grafik. Mudah digunakan dan memungkinkan untuk membuat lima tipe grafik.

DDchart

DDchart merupakan plugin untuk memvisualisasikan dalam bentuk grafik berdasarkan data dalam format JSON dan memiliki animasi bergaya flash.

Pines Notify

Plugin yang berfungsi untuk pemberitahuan, mudah digunakan dengan style tampilan yang dapat dikustomisasi. Fitur-fiturnya antara lain otomotis disembunyikan, tombol tutup yang tersembunyi dan banyak fitur lainnya.

JQuery Constant Footer

Plugin ini akan mengubah tag html menjadi tetap pada bagian bawah jendela browser. Anda dapat mengatur tingkat transparansi dan juga dapat menambahkan link feed website Anda dan hasilnya akan ditampilkan secara bergantian.

Simple Unlimited Levels Vertical Drop-Down Navigation Menu

Dari namanya saja sudah bisa ditebak jika plugin ini berfungsi untuk membuat menu dropdown vertikal dengan jumlah menu tak terbatas.

jQuery.validity

jQuery.validity merupakan plugin jQuery yang hebat dan akurat dalam memvalidasi sebuah form pada sisi klien. Mudah digunakan dan fleksibel untuk berbagai keperluan.

ezMark

Bosan dengan style dari checkbox dan radio button yang itu-itu saja? ezMark mampu mengubah style checkbox dan radio button dari yang biasa-biasa menjadi lebih menarik. Plugin ini dapat bekerja pada berbagai browser antara lain IE (6/7/8), Firefox, Safari, Chrome.

Searchable Dropdown

Jika kita punya banyak sekali pilihan pada sebuah form select, tentu akan menyulitkan pengguna untuk memilih. Untuk memudahkannya gunakan saja plugin ini karena fungsi plugin Searchable Dropdown dibuat untuk mengatasi masalah tersebut.

Coin Slider

Merupakan plugin slide gambar yang mempunyai efek yang unik dan tak seperti biasa.

Cloud Zoom

Plugin untuk memperbesar bagian gambar yang mudah digunakan dan kompatible dengan berbagai browser (IE6+, Firefox, Chrome, Opera, Safari).

JQueryrotate

Plugin jQuery yang berguna untuk memutar gambar pada sebuah halaman website pada kemiringan tertentu.

Colorbox

Plugin lightbox yang dapat dikustomisasi yang mendukung kontent berupa gambar, kelompok gambar, slideshow, ajax, inline dan iframe.

Easy Slider

Plugin yang digunakan untuk menggeser gambar atau konten secara vertikal atau horisontal saat diklik atau otomatis.

Saya menggunakan mootools sebagai framework javascript yang cukup mudah untuk digunakan. Kamu dapat membaca postingan ini untuk mengenal lebih jauh tentang mootols. Kamu dapat mendownload mootools di sini. Ada dua cara yang dapat kita digunakan untuk mensubmit form dengan ajax menggunakan mootools. Sebelum membahas kedua cara tersebut hal yang perlu disiapkan adalah file untuk form dan file action. Contoh file form adalah sebagai berikut.

1
2
3
4
5
6
7
8
9

<div id="response"></div>
<form action="action.php" method="post" name="form" id="form" onsubmit="submit_form(); return false;">
		<label for="name">Nama: </label>
<input name="name" size="30" id="name" type="text" />
 
		<label for="name">Alamat email: </label>
<input name="email" size="30" id="email" type="text" />
<input name="task" id="task" value="Submit" type="submit" />
	</form>

dan contoh file action adalah sebagai berikut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
if( $_POST ){
	if( trim($_POST['name']) == '' ){
		echo 'Silahkan masukkan nama Anda.';
	}
	elseif( trim($_POST['email']) == '' ){
		echo 'Silahkan masukkan alamat email Anda.';
	}
	else{
		// kamu dapat melakukan aksi di sini, misal-nya masukin ke database atau yang lain.
		echo 'Terima kasih telah mengisi form. Berikut adalah data Anda:';
		echo 'Nama Anda: '.$_POST['name'];
		echo 'Email Anda: '.$_POST['email'];
	}
}
?>

1. Cara pertama adalah menggunakan fungsi javascript
Cara ini adalah dengan membuat fungsi javascript untuk melakukan action ketika form disubmit. Contoh fungsi tersebut adalah:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function submit_form(){
	var fn = function(){
		$('task').disabled=false;
		$('response').removeClass('ajax-loading').addClass('response');
	}
 
	var html = "Harap menunggu...";
	$('response').removeClass('response').addClass('ajax-loading').setHTML(html);
	$('task').disabled=true;
	var options = {};
	options['update'] = 'response'; // id div yang akan di tulisi response dari action
	options['onComplete'] = fn;
	options['evalScripts'] = false; //jika respon mengandung javascript berikan nilai true
	$('form').send(options);
}

Jika menggunakan cara ini maka kamu harus menambahkan onsubmit=”submit_form(); return false;” pada form kamu. Contohnya sebagai berikut.

1
2

<form action="action.php" method="post" name="form" id="form" onsubmit="submit_form(); return false;">
</form>

2. Cara kedua adalah menggunakan window.domready
Cara ini adalah menambahkan event submit pada form menggunakan domready. Contohnya sebagai berikut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

window.addEvent('domready', function(){
	$('form2').addEvent('submit', function(e){
		e = new Event(e).stop();
		var fn = function(){
			$('task2').disabled=false;
			$('response2').removeClass('ajax-loading').addClass('response');
		};
 
		var html = "Harap menunggu...";
		$('response2').removeClass('response').addClass('ajax-loading').setHTML(html);
		$('task2').disabled=true;
 
		var options = {};
		options['onComplete'] = fn;
		options['update'] = 'response2';
		$('form2').send(options);
	});
});

Jika kamu menggunakan cara ini maka kamu harus menambahkan id pada form, misalnya

1
2

<form action="action.php" method="post" name="form2" id="form2">
</form>

Kamu dapat melihat contoh penerapan metode tersebut di sini. Atau kamu juga dapat mengunduh contoh tersebut di sini.