JQUERY

 

     Pengertian JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript.

Nah, disinilah peran JQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam library tersebut, dan hal yang menarik disini adalah kita hanya membutuhkan satu baris untuk membuat warna selang-seling pada suatu tabel.
   
Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming.

JQuery dikembangkan pertama kali pada tahun 2006 oleh John Resig, yang dibuat lebih ramping dari librari Prototype yang menjadi inspirasi dari libarari JQuery ini. Secara pemrograman, JQuery memiliki kemiripan seperti Prototype.

JQuery memiliki slogan “Write less, do more” yang artinya kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.

JQuery sendiri berlisensikan GNU General Public License dan MIT License.

Beberapa kemampuan yang dimiliki oleh JQuery sebagai berikut:

•         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

Untuk memudahkan dalam memahami JQuery, sangat dianjurkan terlebih dahulu paham dan menguasai pengkodean HTML, CSS dan Javascript. Secara standar, apabila kita membuat kode javascript, maka diperlukan kode yang sangat panjang. Bahkan terkadang sangat sulit untuk di pahami. 

Tutorial JQuery 

Membuat Slideshow Dengan Css dan Jquery 

Ada 2 model slideshow yang akan kita buat disini:

1. Opacity Slideshow (proses pergantian gambar yang menghilang perlahan dan berganti).
2. Flip Slideshow (proses pergantian bergeser kesamping).

Opacity Slideshow

Opacity Slideshow akan menampilkan efek pergantian gambar yang secara perlahan menghilang dan digantikan dengan gambar baru, ini bisa dibuat dengan memanfaatkan opacity yang diatur dengan css.

Struktur HTML

1

<section>

2	<h3>Opacity Slideshow</h3>

3	<div id="twd_opa" class="shadow">

4	<img class='opaque' src="images/2.jpg" />

5	<img src="images/3.jpg" />

6	<img src="images/7.jpg" />

7	<img src="images/9.jpg" />

8

</div>

9

10	<p id="twd_opa_controls">

11	<span class="selected">Gambar 1</span>

12	<span>Gambar 2</span>

13	<span>Gambar 3</span>

14	<span>Gambar 4</span>

15

</p>

16	</section>

div#twd_opa digunakan untuk menampung gambar, sedangkanp#twd_opa_controls digunakan untuk menentukan tombol yang bisa diklik agar gambar berganti.

Kode CSS

1	/* CSS DEMO 1 */

2	p#twd_opa_controls {

3	text-align:center;

4

}

5	#twd_opa_controls span {

6	padding-right:2em;

7	cursor:pointer;

8

}

9	#twd_opa {

10	position:relative;

11	height:429px;

12	width:600px;

13	margin:0 auto 10px;

14

}

15	#twd_opa img {

16	position:absolute;

17

left:0;

18	-webkit-transition: opacity 1s ease-in-out;

19	-moz-transition: opacity 1s ease-in-out;

20	-o-transition: opacity 1s ease-in-out;

21	transition: opacity 1s ease-in-out;

22	opacity:0;

23	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

24	filter: alpha(opacity=0);

25

}

26

27	#twd_opa img.opaque {

28	opacity:1;

29	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

30	filter: alpha(opacity=1);

31

}

Kode Javascript / Jquery

1	/* Js DEMO 1 | Opacity Slideshow*/

2	$(document).ready(function() {

3	$("#twd_opa_controls").on('click', 'span', function() {

4	$("#twd_opa img").removeClass("opaque");

5

6	var newImage = $(this).index();

7

8	$("#twd_opa img").eq(newImage).addClass("opaque");

9

10	$("#twd_opa_controls span").removeClass("selected");

11	$(this).addClass("selected");

12

});

13

});

Flip Slideshow

Flip slideshow akan menampilkan efek pergantian gambar dengan cara bergeser kesamping.

Struktur HTML

1

<section>

2	<h3>Flip Slideshow</h3>

3	<div id="slide_flip_container" class="shadow">

4	<div id="slide_flip_images" style="transform: translateX(0px);">

5	<img src="images/5.jpg">

6	<img src="images/2.jpg">

7	<img src="images/3.jpg">

8	<img src="images/4.jpg">

9

</div>

10

</div>

11

12	<p id="slide_flip_controls">

13	<span class="selected">Gambar 1</span>

14	<span>Gambar 2</span>

15	<span>Gambar 3</span>

16	<span>Gambar 4</span>

17

</p>

18	</section>

CSS

1	/* CSS DEMO 2 */

2	p#slide_flip_controls {

3	text-align:center;

4

}

5	#slide_flip_controls span {

6	padding-right:2em;

7	cursor:pointer;

8

}

9

10	#slide_flip_container {

11	height:429px;

12	width:600px;

13	overflow:hidden;

14	margin:0 auto 10px;

15

}

16	#slide_flip_images {

17	/* lebar penampung. karena ada 4 gambar berukuran 600, jadi 4 * 600 = 2400. */

18	width:2400px;

19

20	-webkit-transition:all 1.0s ease-in-out;

21	-moz-transition:all 1.0s ease-in-out;

22	-o-transition:all 1.0s ease-in-out;

23	transition:all 1.0s ease-in-out;

24

}

25	#slide_flip_images img {

26	padding:0;

27

margin:0;

28	float:left; /* gambar dibaut float left agar setiap gambar ada dibawah gambar sebelumnya. */

29

}

Kode Javascript / Jquery

view source

print?

1	/* Js DEMO 2 : Flip Slideshow */

2	$(document).ready(function() {

3	$('#slide_flip_controls').on('click', 'span', function(){

4	$("#slide_flip_images").css("transform","translateX("+$(this).index() * -600+"px)");

5	$("#slide_flip_controls span").removeClass("selected");

6	$(this).addClass("selected");

7

});

8

});

Sumber  :

http://www.tutorial-webdesign.com/tutorial-membuat-slideshow-dengan-css3-dan-jquery/
http://infoter-lengkap.blogspot.com/2013/03/pengertian-jquery-dan-sejarahnya.html