Scribd
Unggah
141 tayangan71 halaman

JQuery

Dokumen tersebut membahas tentang jQuery. Ringkasannya adalah: 1. jQuery adalah library JavaScript yang dirancang untuk mempermudah penulisan kode JavaScript dan manipulasi DOM. 2. jQuery memudahkan akses elemen HTML, manipulasi CSS, penanganan event, efek animasi, dan interaksi AJAX. 3. Untuk menggunakan jQuery, perlu menambahkan file jQuery.js dan menuliskan kode jQuery di dalam event dom ready.

Diunggah oleh

Rina Dewi Indah Sari
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPT, PDF, TXT atau baca online di Scribd
141 tayangan71 halaman

JQuery

Dokumen tersebut membahas tentang jQuery. Ringkasannya adalah: 1. jQuery adalah library JavaScript yang dirancang untuk mempermudah penulisan kode JavaScript dan manipulasi DOM. 2. jQuery memudahkan akses elemen HTML, manipulasi CSS, penanganan event, efek animasi, dan interaksi AJAX. 3. Untuk menggunakan jQuery, perlu menambahkan file jQuery.js dan menuliskan kode jQuery di dalam event dom ready.

Diunggah oleh

Rina Dewi Indah Sari
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPT, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 71

PEMROGRAMAN WEB 1

JQUERY write less, do more


STMIK Asia Malang - 2013

Rina Dewi Indah Sari, S.Kom

Pengenalan

jQuery adalah javascript library, jQuery mempunyai semboyan write less, do more. jQuery dirancang untuk memperingkas kodekode javascript dan gratis. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interaksi ajax. Untuk mempelajari jQuery, harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript. STMIK Asia Malang -

Kemampuan jQuery

Kemudahan mengakses elemen-elemen HTML Memanipulasi elemen HTML Memanipulasi CSS Penanganan event HTML Efek-efek javascript dan animasi Modifikasi HTML DOM AJAX Menyederhanakan kode javascript lainnya
STMIK Asia Malang -

Menggunakan jQuery

Untuk memulai jQuery, harus mendownload jquery.js dari situs http://www.jquery.com. Setiap menulis kode javascript dengan menggunakan jquery, masukkan file jquery.js kedalam kode javascript.
<script

type="text/javascript src="jquery.js"></script>

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").hide(1000); });

$(".tombol2").click(function(){
$("p").show(1000); }); }); </script></head>

<body>
<p>Hello World!</p> <button class="tombol1">Sembunyikan</button> <button class="tombol2">Tampilkan</button> </body></html>

STMIK Asia Malang -

Sintaks jQuery

Sintaks jQuery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. Sintaks : $(selector).action()
$()

untuk membuat objek jQuery Tanda dollar, untuk mendefinisikan jQuery (alias untuk jQuery class) (selector), untuk menunjukkan elemen yang dipilih atau dituju action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih. STMIK Asia Malang -

Contoh Sintaks

$(this).hide()
menyembunyikan

elemen saat ini semua paragraf atau konten dari

$("p").hide()
menyembunyikan

tag <p>

$(".test").hide()
menyembunyikan

elemen yang mempunyai

class="test"

$("#test").show()
menampilkan

elemen yang mempunyai id="test"


STMIK Asia Malang -

Ready event

Segala sesuatu yang dilakukan menggunakan jQuery membaca atau memanipulasi document object model (DOM), maka perlu dipastikan mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, perlu menambahkan kode ready event untuk dokumen.

$(document).ready(function(){ //kode anda di sini });

Berarti kita ingin kode dijalankan apabila halaman HTML telah di-load semuanya. Atau dengan javascript biasa:
window.onload

= function(){ //kode anda di sini }

STMIK Asia Malang -

jQuery Selectors

Selectors memungkinkan kita untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. jQuery element selectors dan attribute selectors memungkinkan kita untuk memilih elemen HTML (atau kelompok elemen) dengan nama tag, nama atribut atau konten.

STMIK Asia Malang -

jQuery Element Selectors

jQuery mirip CSS dalam hal memilih elemen HTML.


$("p")

memilih semua elemen <p> $("p.intro") memilih semua elemen <p> yang mempunyai class="intro". $("p#demo") memilih elemen <p> yang mempunyai id="demo".

STMIK Asia Malang -

jQuery Attribute Selectors

jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada.
$("[href]")

memilih semua elemen dengan atribut

href. $("[href='#']") memilih semua elemen dengan atribut href bernilai="#". $("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#". $("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".
STMIK Asia Malang -

jQuery Selector

STMIK Asia Malang -

jQuery Selector

STMIK Asia Malang -

jQuery Events

Salah satu kemampuan utama jQuery adalah menangani event. Dalam pemograman jQuery, biasanya kode-kode pemograman diletakkan di dalam penanganan event yang terjadi pada suatu atau kelompok elemen yang dipilih. Hampir mirip dengan Visual Basic, biasanya suatu kode dijalankan apabila ada sesuatu yang terjadi (event) pada suatu elemen. Misalnya, kalau ada tombol di klik, maka action atau kode apa yang dijalankan, apabila ada combox dipilih, kode apa yang dijalankan.

STMIK Asia Malang -

Contoh

$(".tombol1").click(function(){ $("p").hide(1000); }); Kode di atas berarti apabila terjadi event mengklik elemen yang mempunyai class=tombol1, maka lakukan fungsi hide() terhadap semua element <p>.

STMIK Asia Malang -

Daftar Event

STMIK Asia Malang 2013

Efek-Efek dengan jQuery

Salah satu kemampuan jQuery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk membuat efek memudar di Javascript, kita harus membuat kode yang cukup panjang. Tapi dengan menggunakan jQuery cukup menggunakan fungsi $(selector).fadeIn()

STMIK Asia Malang -

jQuery show() Effect


Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen yang tersembunyi melalui CSS adalah display:none (bukan visibility:hidden). Sintaks :

$(selector).show(speed,callback)

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery-1.7.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){ $(".tombol1").click(function(){ $("p").show(1000,tampilkanAlert); }); }); function tampilkanAlert(){ alert("Paragraf sekarang muncul"); }

</script></head>
<body> <p style=display:none>Ini adalah paragraph tersembunyi.</p> <button class="tombol1">Show</button>

</body></html>

STMIK Asia Malang -

jQuery hide() Effect

Berfungsi untuk menyembunyikan elemen yang dipilih. Sintaks :


$(selector).hide(speed,callback)

Untuk parameter speed dan callback adalah sama dengan show() effect. Contoh :
$(".tombol1").click(function(){ $("p").hide(); });
STMIK Asia Malang -

jQuery toggle() Effect


Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi menampilkan yang tersembunyi, menyembunyikan yang tampak. Sintaks :

$(selector).toggle(speed,callback,switch)

STMIK Asia Malang -

Keterangan

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery-1.7.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){ $(".tombol1").click(function(){ $("p").toggle(true); }); }); </script></head> <body> <p>Ini adalah paragraf</p>

<p style="display:none">Ini adalah paragraf lainnya yang belum muncul</p>


<p>Jika bernilai true hanya berfungsi menampilkan, kalau false hanya menyembunyikan</p> <button class="tombol1">Tampilkan semua elemen</button>

</body></html>

STMIK Asia Malang -

jQuery slideDown() Effect

Menampilkan elemen yang tersembunyi, secara efek sliding. Sintaks :


$(selector).slideDown(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh:
$(".tombol1").click(function(){ $("p").slideDown(); });
STMIK Asia Malang -

jQuery slideUp() Effect


Menyembunyikan elemen secara efek sliding. Sintaks :


$(selector).slideUp(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh:
$(".tombol1").click(function(){ $("p").slideUp(); });
STMIK Asia Malang -

jQuery slideToggle() Effect


Gabungan antara slideDown() dan slideUp(). Menyembunyikan elemen jika dalam keadaan visible, menampilkan elemen jika dalam keadaan hidden. Sintaks :
$(selector).slideToggle(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show().

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#contact").click(function(){ $("#contact-box").slideToggle("slow"); }); }); </script></head> <body> <p><span id="contact" style="cursor:hand;backgroundcolor:# ababab;padding:3;font family:Verdana">Contact</span></p> <div id="contact-box style="background:#98bf21;height:200px;width:300px;position:relative;disp lay:none;padding:10"> <form> Nama : <input type=text><p> Email : <input type=text><p> Komentar :<textarea rows=5></textarea><p><input type=submit value=kirim> </div> <p>jQuery adalah javascript library, jQuery mempunyai semboyan "write less, do more". jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah Javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. <p>Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.

STMIK Asia Malang -

jQuery fadeIn() Effect

Menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar. Sintaks :
$(selector).fadeIn(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh:
$(".tombol1").click(function(){ $("p"). fadeIn(); });
STMIK Asia Malang -

jQuery fadeOut() Effect

Menyembunyikan elemen yang dipilih, secara efek memudar. Sintaks :


$(selector).fadeOut(speed,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show().

STMIK Asia Malang -

Contoh
<html><head> <style> #box { background-color:#96BC43; border:solid 3px #333333; height:160px; margin-top:30px; } </style> <script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(function(){ $('.fadeOut_box').click(function(){ $('#box').fadeOut("slow"); }); $('.fadeIn_box').click(function(){ $('#box').fadeIn("slow"); }); }); </script> <body> <a href="#" class="fadeOut_box">fadeOut()</a> <a href="#" class="fadeIn_box">fadeIn()</a>

<div id="box"></div> </body></html>

STMIK Asia Malang -

jQuery fadeTo() Effect

Mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan. Sintaks :
$(selector).fadeTo(speed,opacity,callback)

Untuk parameter speed dan callback adalah sama dengan fungsi show(). Untuk parameter opacity bisa bernilai 0 sampai 1. Contoh :
$(".tombol1").click(function(){ $("p"). fadeTo(1000,0.6);
STMIK Asia Malang -

jQuery animate() Effect

Mengubah suatu elemen dari satu keadaan ke keadaan yang lainnya. Keadaan yang diubah ini berdasarkan CSS. Nilai properti CSS yang berubah secara berangsur-angsur, hal ini untuk menciptakan efek animasi. Nilai properti CSS yang bisa diubah adalah nilai bertipe angka, baik satuannya pixel atau persen Untuk tipe string tidak bisa dianimasikan. Sintaks :
$(selector).animate(styles,speed,easing,callback) STMIK Asia Malang

Keterangan

STMIK Asia Malang -

Keterangan

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".tombol1").click(function(){ $("#box").animate({height:"300px"}); });

$(".tombol2").click(function(){
$("#box").animate({height:"100px"}); }); }); </script></head> <body> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> <button class="tombol1">Animasi</button> <button class="tombol2">Reset</button>

</body></html>

STMIK Asia Malang -

jQuery stop() Effect


Menghentikan animasi yang sedang berjalan. Sintaks :


$(selector).stop(stopAll,goToEnd)

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow");

});
$("#stop").click(function(){ $("#box").stop(false,true); }); }); </script></head> <body> <p><button id="start">Start Animasi</button><button id="stop">Stop Animasi</button></p> <div id="box" style="background:#ababab;height:100px;width:100px;position:relative"></div> </body></html>

STMIK Asia Malang -

$(selector).delay()

Berguna untuk men-set delay untuk semua fungsi yang masih antri untuk elemen yang dipilih. Sintaks :
$(selector).delay()

STMIK Asia Malang -

$(selector).dequeue()

Menjalankan fungsi berikutnya yang lagi antri untuk elemen yang dipilih. Sintaks :
$(selector).dequeue()

STMIK Asia Malang -

$(selector).queue()

Menampilkan fungsi yang antri untuk elemen terpilih. Sintaks :


$(selector).queue()

STMIK Asia Malang -

jQuery clearQueue() Effect

Menghentikan semua fungsi yang lagi ngantri dan belum dijalankan. Sintaks :
$(selector).stop(queueName)

Parameter queueName adalah nama antrian yang akan dihentikan. Contoh :


$("#stop").click(function(){ $("#box").clearQueue(); });
STMIK Asia Malang -

Manipulasi HTML dengan jQuery

jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil atau menambah konten, dan sebagainya terhadap HTML.
STMIK Asia Malang -

html()

Untuk me-set konten (biasanya kita sebut innerHTML) dari elemen HTML yang dipilih kita gunakan $(selector).html(content). Apabila parameter content tidak kita tentukan maka fungsi html() berguna untuk mendapatkan konten dari HTML.

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $("#lihat").click(function(){ var isinya = $("#paragraf").html(); alert(isinya); }); $("#isikan").click(function(){

var isilagi = $("#isi").val();


alert(isilagi); $("#paragraf").html(isilagi); }); });</script> <body> <button id=lihat>Lihat</button> <p id=paragraf>jQuery mempunyai kemampuan yang powerfull dalam hal memanipulasi, mengambil atau menambah konten, dan sebagainya terhadap HTML </p> Teks :<input type=text id=isi> <p><button id=isikan>Isikan</button>

</body></html>

STMIK Asia Malang -

val()

Pada contoh di atas kita lihat ada kode var isilagi = $("#isi").val(); Kode ini berarti kita mengambil nilai dari <input type=text id=isi> dan memasukkannya ke variabel isilagi. Sama dengan fungsi html(), apabila kita masukkan nilai dari val(), maka artinya kita me-set nilai dari elemen yang dipilih. Biasanya val() digunakan pada elemen-elemen HTML <input>, contoh :

$(#isi).val(hallo apa kabar);

Kode di atas berarti kita me-set nilai <input type=text id=isi> dengan hallo apa kabar. STMIK Asia Malang -

attr()

Dengan menggunakan fungsi attr(), memudahkan untuk mendapatkan nilai dari suatu properti elemen HTML yang kita pilih. Sintaks :
$(selector).attr(properties,nilai);
Parameter

properties adalah nama properti yang ingin kita ambil atau set. Contoh properti misalnya : id, class, title, src, href dan sebagainya. Parameter nilai, apabila kita isi artinya kita me-set nilai properti yang kita tetukan, apabila kosong artinya kita mengambil nilai properti yang kita tentukan. STMIK Asia Malang -

Contoh
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('.link').click(function(){ var id=$(this).attr("id"); var class=$(this).attr("class"); var href=$(this).attr("href"); alert(id); alert(class); alert(href);

});
}); </script> <a href="http://www.desrizal.com" class="link" id="13">link</a> </body>

</html>

STMIK Asia Malang -

addClass()

Berguna untuk menambahkan atau mengubah class untuk elemen yang dipilih. Sintaks :
$(selector).addClass(namakelas)

STMIK Asia Malang -

Contoh
<html><head> <style> .besar

{font-size:106px; }
.kecil { font-size:12px; } </style>

<script type="text/javascript" src="jquery.js"></script>


<script type="text/javascript"> $(function(){ $('.ubahclass').click(function(){ $(".besar").addClass("kecil"); }); });</script> <a href="#" class="ubahclass" >Klik </a> <div class="besar">www.desrizal.com</div>

</body></html>

STMIK Asia Malang -

Daftar Fungsi

STMIK Asia Malang -

Daftar Fungsi

STMIK Asia Malang 2013

Manipulasi CSS dengan jQuery

STMIK Asia Malang -

Manipulasi properti CSS


jQuery juga mempunyai kemampuan dalam memanipulasi CSS. Ada 3 fungsi utama dalam jQuery untuk melakukan manipulasi

$(selector).css(name,value) $(selector).css({properties}) $(selector).css(name)

Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih untuk elemen yang dipilih. Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties} Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang dipilih cukup isi parameter name saja.

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){

$("#tombol1").click(function(){
$(".p1").css("color","red"); $(".p2").css({"color":"white","backgroundcolor":"# ff8954","font-family":"Arial","fontsize":" 20px","padding":"5px"}); }); $("#tombol2").click(function(){ var nilai = $(".p1").css("color"); alert(nilai); }); }); </script></head> <body> <p class="p1">Paragraf ini cuma berubah satu properti CSS</p> <p class="p2">Paragraf ini cuma berubah banyak properti CSS</p> <button id="tombol1">ubah CSS paragraf</button> <button id="tombol2">Ambil nilai CSS paragraf 1</button>

</body></html>

STMIK Asia Malang -

Manipulasi CSS Size

Untuk memanipulasi ukuran dari elemen yang dipilih (tinggi dan lebar), maka ada dua fungsi untuk hal ini, yaitu :
$(selector).height(value) $(selector).width(value)

Jika parameter value diisi, maka artinya kita meset nilai height atau width dari elemen yang dipilih. Tetapi jika tidak diisi, maka artinya kita mengambil nilai height atau width dari elemen yang dipilih.

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#tombol1").click(function(){ $("#kotak").width("300px"); $("#kotak").height("300px"); }); $("#tombol2").click(function(){ var nilai = $("#kotak").width(); alert(nilai); }); });

</script></head>
<body><div id=kotak style="background-color:pink;width:100px;height:100px;"> Hello</div> <p> <button id="tombol1">ubah ukuran kotak</button> <button id="tombol2">Ambil nilai ukuran kotak</button>

</body></html>

STMIK Asia Malang -

Manipulasi Posisi

offset()
Untuk

mendapatkan atau me-set offset dari elemen yang dipilih. Relatif terhadap dokumen. Sintaks :
$(selector).offset(coordinates)

Parameter

coordinates bisa berupa koordinat dari elemen yang dipilih, contoh :


offset({top:100,left:0})

Jika

kita mengosongkan parameter coordinates, artinya kita mengambil nilai offset dari elemen yang kita pilih. Fungsi offset() akan menghasil objek yang STMIK Asia Malang -

Contoh
<html> <head> <style> #div1{background-color : yellow;width : 100px;height : 100px;position : relative;left : 300;}

</style>
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#tombol").click(function(){ posisi=new Object(); posisi.left=$("#x").val(); posisi.top=$("#y").val(); $("#div1").offset(posisi); pos = $("#div1").offset(); alert("x="+pos.left+",y="+pos.top); }); }); </script></head> <body><div id=div1>Hello World!</div> x = <input type=text size=4 id=x><br> y = <input type=text size=4 id=y><br> <button id=tombol>Set Offset</button>

</body></html>

STMIK Asia Malang -

Manipulasi Posisi

offsetParent()
Untuk

mendapatkan element parent terdekat dengan posisi yag telah ditentukan. Sintaks.
$(selector).offset()

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").offsetParent().css("background-color","green"); }); }); </script></head> <body><div style="width:70%;position:absolute;left:100px;top:100px"> <div style="margin:50px;background-color:yellow"> <p>Klik tombol untuk set background color untuk elemen parent terdekat dari paragraf ini</p> <div> </div> <button>ubah warna latar</button> </body></html>

STMIK Asia Malang -

Manipulasi Posisi

position()
Hampir sama dengan offset(), yaitu untuk mendapatkan atau menentukan posisi dari elemen, tetapi relatif terhadap parent. Fungsi position() akan menghasil objek yang mempunyai 2 properti yaitu top dan left.

Sintaks : $(selector).position() Contoh : $(".tombol").click(function(){ x=$("p").position(); $("#div1").text(x.left); $("#div2").text(x.top); });

STMIK Asia Malang -

Manipulasi Posisi

scrollLeft() Untuk mendapatkan atau menentukan scroll left offset dari elemen yang dipilih. Sintaks : $(selector).scrollLeft(offset) Parameter offset adalah nilai dalam pixel elemen akan di scroll dari posisi kiri elemen tersebut. Jika parameter offset dikosongkan, maka artinya kita mengambil nilai offset dari scroll left elemen tersebut. Contoh : $(".tombol").click(function(){ $("div").scrollLeft(300); }); STMIK Asia Malang -

Manipulasi Posisi

scrollTop() Untuk mendapatkan atau menentukan scroll top offset dari elemen yang dipilih. Sintaks : $(selector).scrollTop(offset) Parameter offset adalah nilai dalam pixel elemen akan di scroll dari posisi atas elemen tersebut. Jika parameter offset dikosongkan, maka artinya kita mengambil nilai offset dari scroll Top elemen tersebut. Contoh : $(".tombol").click(function(){ $("div").scrollTop(300); }); STMIK Asia Malang -

Web Tab Scroll Content

STMIK Asia Malang -

Contoh
<html><head> <script type="text/javascript" src="jquery.js"></script>

<script>
$(document).ready(function(){ $("#home").click(function(){ $("#konten").animate({ scrollTop: 0},"slow");

});
$("#about").click(function(){ $("#konten").animate({ scrollTop: 500},"slow"); });

$("#contact").click(function(){
$("#konten").animate({ scrollTop: 1000},"slow"); }); });

</script>

STMIK Asia Malang -

Lanjutan Contoh
<style> #konten{

height : 500px;
overflow: hidden; background-color : yellow; } .box{ height : 500px; margin:0; padding : 0; } .link{ cursor : pointer; background-color : lightyellow; padding : 3;

STMIK Asia Malang -

Lanjutan Contoh
body{ overflow:hidden; } #home{ background-color : green; } #about{ background-color : red; } #contact{ background-color : blue; }

.aboutme{
background-color : black; color : white; font-size : 26pt; font-family : garamond;

}</style></head>

STMIK Asia Malang -

Lanjutan Contoh
<body> <span class=link id=home>Home</span> <span class=link id=about>About</span> <span class=link id=contact>Contact</span> <div id=konten> <div id=home class=box><br><b>Home</b><p> <center><font size=7>Selamat Datang</font></center></div> <div id=about class=box><br><b>About Me</b> <p><span class=aboutme>Hi,namaku Desrizal</span></p> <p><span class=aboutme>Lahir di Pekanbaru tahun 1981</span></p>

STMIK Asia Malang 2013

<p><span class=aboutme>Punya hobi otak atik komputer</span></p></div> <div id=contact class=box><br><b>Contact</b>

<form method="POST" action="--WEBBOT-SELF--" style="padding:10">


<p>Nama :<br><input type="text" name="T1" size="20"><br> Emai : <br><input type="text" name="T2" size="20"><br> Komentar :<br><textarea rows="6" name="S1" cols="24"></textarea><br> <input type="submit" value="Submit" name="B1"><input type="reset value="Reset" name="B2"></p>

</form></div></div></body></html>

Untuk menghilangkan scroll di <div id=kontent> kita menggunakan CSS overflow:hidden; Ketika kita mengklik salah satu tab, maka kita membuat animasi scrolling menggunakan kode :
$("#konten").animate({

scrollTop: 500},"slow");

STMIK Asia Malang -

Latihan

Sebuah tabel memiliki beberapa baris, dimana baris pertama adalah header. Struktur tabel sbb:
<table> <tr><td>Ternak</td><td>Jumlah</td></tr> <tr><td>Ayam</td><td>204</td></tr> <tr><td>Sapi</td><td>131</td></tr> <tr><td>Kambing</td><td>54</td></tr> </table>
STMIK Asia Malang -

Latihan

Berilah warna salmon untuk background header, dan warna khaki untuk kolom ternak, warna ivory untuk kolom jumlah Berikan event bagi onmouseover dan onmouseout agar saat kursor melewati mereka:
Warna

background kolom ternak berganti warna menjadi yellow Warna kolom jumlah menjadi warna goldenrod

Baris pertama (header) tidak pernah berubah warna


STMIK Asia Malang -

Anda mungkin juga menyukai