![USM SEMARANG [FORUM DISKUSI]](https://i.servimg.com/u/f62/19/88/89/79/logo_u14.png){kind=logo}
Indeks
Semua tentang jquery, diskusi di sini 
jQuery terbaru bisa didownload di JQ
Pada jQuery, kita bisa memasang berbagai plugin / addon.
Plugin-plugin ini sangat berguna karena mempermudah penggunaan jquery di kasus2 tertentu.
Download plugin jquery di : PLUGIN
Contoh kode jQuery.
Ada 2 radio button.
Ada 1 textbox & 1 drop down.
Misal kalau diklik radio button 1, text box disable & drop down enable.
Misal kalau diklik radio button 2, text box enable & drop down disable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Test</title>
<!-- SESUAIKAN PATH JQUERY DI BAWAH -->
<script type="text/javascript" src="PATH_LOCAL/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
function init() {
pilih1();
}
function pilih1() {
$('#textbox1').attr('disabled', false);
$('#select1').attr('disabled', true);
}
function pilih2() {
$('#textbox1').attr('disabled', true);
$('#select1').attr('disabled', false);
}
</script>
</head>
<body>
<form method="post" action="form.php">
<input type="radio" name="a" value="1" id="radio1" onclick="pilih1()" /> <input type="text" name="something1" value="Some Value" id="textbox1" /><br />
<input type="radio" name="a" value="2" id="radio2" onclick="pilih2()" />
<select name="something2" id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</form>
</body>
</html>
Contoh enable / disable beberapa object sekaligus dengan jQuery :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Test</title>
<!-- SESUAIKAN PATH JQUERY DI BAWAH -->
<script type="text/javascript" src="PATH_LOCAL/jquery.js"></script>
<script type="text/javascript">
function disable_semua() {
$('#textbox1,#textbox2,#textbox3').attr('disabled', true);
}
function enable_semua() {
$('#textbox1,#textbox2,#textbox3').attr('disabled', false);
}
</script>
</head>
<body>
<input type="text" name="a" id="textbox1" value="Value 1" />
<input type="text" name="b" id="textbox2" value="Value 2" />
<input type="text" name="c" id="textbox3" value="Value 3" />
<br />
<br />
<input type="button" value="Disable Semua" onclick="disable_semua()" />
<input type="button" value="Enable Semua" onclick="enable_semua()" />
</body>
</html>
Contoh JQuery untuk Show, Hide, Toggle sebuah object (di contoh di bawah, adalah sebuah paragraf). :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery hide / show</title>
<style type="text/css">
.box {
background-color:#FFFFCC;
border:solid #0000CC 1px;
color:#FF0000;
padding:1em;
}
</style>
<script type="text/javascript" src="../js-bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id_p_1,#id_p_2').hide();
});
function klik_saya_1() {
$('#id_p_1').toggle('fast');
}
function klik_saya_2() {
$('#id_p_2').slideToggle('fast');
}
</script>
</head>
<body>
<input type="button" value="Klik saya 1" onclick="klik_saya_1()" />
<input type="button" value="Klik saya 2" onclick="klik_saya_2()" />
<p id="id_p_1" class="box">
Halo semua, ini P 1
</p>
<p id="id_p_2" class="box">
Halo semua, ini P 2
</p>
</body>
</html>
Untuk mengubah sebuah form jadi AJAX (dengan jQuery), dan untuk upload file dengan jQuery, bisa pake plugin jQuery form di bawah :
LINK FORM JQ
SEKIAN
jQuery terbaru bisa didownload di JQ
Pada jQuery, kita bisa memasang berbagai plugin / addon.
Plugin-plugin ini sangat berguna karena mempermudah penggunaan jquery di kasus2 tertentu.
Download plugin jquery di : PLUGIN
Contoh kode jQuery.
Ada 2 radio button.
Ada 1 textbox & 1 drop down.
Misal kalau diklik radio button 1, text box disable & drop down enable.
Misal kalau diklik radio button 2, text box enable & drop down disable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Test</title>
<!-- SESUAIKAN PATH JQUERY DI BAWAH -->
<script type="text/javascript" src="PATH_LOCAL/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
function init() {
pilih1();
}
function pilih1() {
$('#textbox1').attr('disabled', false);
$('#select1').attr('disabled', true);
}
function pilih2() {
$('#textbox1').attr('disabled', true);
$('#select1').attr('disabled', false);
}
</script>
</head>
<body>
<form method="post" action="form.php">
<input type="radio" name="a" value="1" id="radio1" onclick="pilih1()" /> <input type="text" name="something1" value="Some Value" id="textbox1" /><br />
<input type="radio" name="a" value="2" id="radio2" onclick="pilih2()" />
<select name="something2" id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</form>
</body>
</html>
Contoh enable / disable beberapa object sekaligus dengan jQuery :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Test</title>
<!-- SESUAIKAN PATH JQUERY DI BAWAH -->
<script type="text/javascript" src="PATH_LOCAL/jquery.js"></script>
<script type="text/javascript">
function disable_semua() {
$('#textbox1,#textbox2,#textbox3').attr('disabled', true);
}
function enable_semua() {
$('#textbox1,#textbox2,#textbox3').attr('disabled', false);
}
</script>
</head>
<body>
<input type="text" name="a" id="textbox1" value="Value 1" />
<input type="text" name="b" id="textbox2" value="Value 2" />
<input type="text" name="c" id="textbox3" value="Value 3" />
<br />
<br />
<input type="button" value="Disable Semua" onclick="disable_semua()" />
<input type="button" value="Enable Semua" onclick="enable_semua()" />
</body>
</html>
Contoh JQuery untuk Show, Hide, Toggle sebuah object (di contoh di bawah, adalah sebuah paragraf). :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery hide / show</title>
<style type="text/css">
.box {
background-color:#FFFFCC;
border:solid #0000CC 1px;
color:#FF0000;
padding:1em;
}
</style>
<script type="text/javascript" src="../js-bin/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id_p_1,#id_p_2').hide();
});
function klik_saya_1() {
$('#id_p_1').toggle('fast');
}
function klik_saya_2() {
$('#id_p_2').slideToggle('fast');
}
</script>
</head>
<body>
<input type="button" value="Klik saya 1" onclick="klik_saya_1()" />
<input type="button" value="Klik saya 2" onclick="klik_saya_2()" />
<p id="id_p_1" class="box">
Halo semua, ini P 1
</p>
<p id="id_p_2" class="box">
Halo semua, ini P 2
</p>
</body>
</html>
Untuk mengubah sebuah form jadi AJAX (dengan jQuery), dan untuk upload file dengan jQuery, bisa pake plugin jQuery form di bawah :
LINK FORM JQ
SEKIAN