Skip navigation

Tag Archives: JQuery


Melanjutkan postingan sebelumnya, sekarang tampilan dropdown dari CJuiAutoComplete yang hanya teks sederhana akan saya ubah menjadi lebih bagus. Dropdown ini akan kita buat agar bisa menampilkan data selain nama panjang, tetapi juga mungkin foto profil atau asal kota. Nantinya akan mirip dengan search autocomplete yang ada di Facebook seperti di bawah.

Autocomplete di Facebook search.

Read More »


Untuk memenuhi permintaan dari Jupri yang atas permintaan di bagian Request yang meminta tutorial bagaimana cara membuatautocomplete”seperti facebook”.

Autocomplete textfield adalah sebuah textfield yang ketika diberikan input sebuah string maka textfield itu akan menampilkan beberapa hasil rekomendasi. Contoh yang sering terlihat adalah autocomplete di Facebook search ataupunsearch suggestiondi Google Search.

Contoh penggunaan autocomplete untuk Facebook search.

Di Yii sendiri sudah ada komponen bawaan yang mendukung pembuatan fitur autocomplete seperti ini. Komponen ini adalah CJuiAutoComplete (sebelumnya sudah ada CAutoComplete yang kemudian dihentikan pengembangannya). Komponen CJuiAutoComplete tidak lain merupakan pembungkus dari widget jQuery UI – Autocomplete. Kematangan widget ini membuat pengembang Yii menghentikan komponen CAutoComplete dan beralih menggunakan jQuery UI.

Read More »


(belakangan pengen ngeposting artikel yang gampang mikirnya, hehehe)

Kemarin ada seorang junior yang sedang belajar JQuery. Dia nanya bagaimana caranya meload bagian dari halaman HTML tanpa harus meload bagian-bagian halaman lain. Fungsi ini merupakan salah satu kegunaan dari AJAX di mana kita melakukan HTTP request tanpa harus meload halaman baru.

JQuery sudah menyediakan sebuah method yakni load. Method ini akan melakukan request ke sebuah halaman dan kemudian menginjeksikan responsenya ke dalam DOM elemen tersebut.

Contoh penggunaannya

<html>
	<head>
		<title>Test</title>
		<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript" language="javascript">
		$(document).ready(function(){
			$("#kotak").load("test5_1.html");
			$("#button1").click(function(){
				$("#kotak").load("test5_1.html");
				return false;
			});
			$("#button2").click(function(){
				$("#kotak").load("test5_2.html");
				return false;
			});
		});
	</script>

	</head>
	<body>
<ul>
	<li><a href="" id="button1">Test 1</a></li>
	<li><a href="" id="button2">Test 2</a></li>
</ul>
<div id="kotak"></div>
</body>
</html>

Untuk membuat sebuah tabpage pada HTML dan melakukan load seperti di atas, JQuery UI sudah menyediakan widget yang menarik dan high customable.

Source code dapat diambil di sini. (rename ke zip dan jangan lupa menambahkan script JQuerynya)


DateJS adalah sebuah library Javascript yang memudahkan kita untuk melakukan manipulasi waktu. Script ini memiliki fungsi-fungsi yang menarik seperti add, today, tommorrow, sekaligus parse dan dapat melakukan chaining. Meski masih dalam tahap alpha tapi sudah menyediakan fungsi-fungsi yang sangat lengkap dan sudah dapat berjalan dengan cukup baik untuk kebutuhan-kebutuhan mendasar.

Dan hal yang menyenangkan lagi adalah library ini dapat digunakan bersama-sama dengan JQuery.

Berikut contoh yang ada di situsnya.

// What date is next thrusday?
Date.today().next().thursday();
 
// Add 3 days to Today
Date.today().add(3).days();
 
// Is today Friday?
Date.today().is().friday();
 
// Number fun
(3).days().ago();

// 6 months from now
var n = 6;
n.months().fromNow();
 
// Set to 8:30 AM on the 15th day of the month
Date.today().set({ day: 15, hour: 8, minute: 30 });
 
// Convert text into Date
Date.parse(‘today’);
Date.parse(‘t + 5 d’); // today + 5 days
Date.parse(‘next thursday’);
Date.parse(‘February 20th 1973′);
Date.parse(‘Thu, 1 July 2004 22:30:00′);
%d blogger menyukai ini: