Agen Terpercaya  
 
 
 
 
Pasang iklan, hanya lewat Contact Us.
Waspada penipuan iklan. Klik di sini untuk melihat daftar penipu.

Diskusi JQuery

S

semprot_sejak_dulu

Moderator
Staff member
Moderator
Daftar
1 Jan 1970
Post
176
Like diterima
748
Lokasi
Semprot.com
Bimabet
Semua tentang jquery, diskusi di sini :D

jQuery terbaru bisa didownload di http://www.jquery.com
Pada jQuery, kita bisa memasang berbagai plugin / addon.
Plugin-plugin ini sangat berguna karena mempermudah penggunaan jquery di kasus2 tertentu.
Download plugin jquery di : http://plugins.jquery.com/

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.

HTML: 
<!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

HTML: 
<!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).

HTML: 
<!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>
 
User di-banned, maka konten otomatis dihapus.
User is banned, content is deleted automatically.
 
semprot said:
Contoh enable / disable beberapa object sekaligus dengan jQuery

HTML: 
<!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>
Click to expand...

Code: 
<script type="text/javascript">
function disable_semua() {
	$(':text').attr('disabled', true);
}
function enable_semua() {
	$(':text').attr('disabled', false);
}
</script>

bisa ga ya :Peace:
 
Bimabet
ru3za007 said:
ane baca di sebuah blog...katnyan jquery bisa tuk bikin slideshow gambar....

kebetulan banget ane lagi asik bikin web pake php neh........

ajarin dunk bikin slideshow pake jquery...


nih ane punya contoh....
tapi bingung yang di edit yang mana....???

Code: 
<html>
<head>
 <title>Thumbnail Gallery</title>
 <script language="javascript" src="includes/jquery.js"></script>
 <script language="javascript" src="includes/thickbox.js"></script>
 <link href="includes/thickbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center">
<?
    $dir = "images/";
    if ($handle = opendir($dir)) {        
       
       echo '<table border=1><tr>';
       $x = 0;
       while (false !== ($file = readdir($handle))){
           if($file == '.' || $file == '..') continue;
           if($x%4==0) echo '</tr><tr>'; 
           $path = $dir.$file;
           
           echo '<td><a href="'.$path.'" class="thickbox" rel="mygallery"><img src="thumb.php?img='.$path.'" border="0" /></a></td>';
           $x++;
       }       
       echo '</tr></table>';

       closedir($handle);
    }    
?>    
</div>
</body>
</html>

Ada beberapa file pendukung juga gan....

mohon bantuannya.................
Click to expand...

setau saya kalo thickbox bukan untuk slideshow, kalo mau coba pake Cycle dari malsup http://malsup.com/jquery/cycle/
 
You must log in or register to reply here.

Similar threads

RayMantic
Scroll Bar dengan jQuery
Balasan
0
Dilihat
792
RayMantic
RayMantic
RayMantic
gMaps
Balasan
0
Dilihat
1.175
RayMantic
RayMantic
RayMantic
Register Facebook [demo]
Balasan
0
Dilihat
994
RayMantic
RayMantic
Jav Toys
Gaple Online Indonesia
Pasang iklan hanya lewat CONTACT US
Back
Top
We are now part of LS Media Ltd