Manipulasi TAG div menggunakan fungsi - fungsi dasar jquery

Masih dalam pembahasan seputar JQUERY. kali ini kita akan membahas lagi beberapa fungsi dasar JQUERY yang dapat kita gunakan untuk membangun logika pemrograman kita kedepannya.

Dalam contoh kali ini, kita mencoba untuk melakukan manipulasi pada TAG div dengan beberapa fungsi yang dapat kita ambil dengan mudah pada JQUERY, diantaranya seperti fungsi:

 

 

  • slideUp » Menggeser TAG DIV ke arah atas
  • slideDown » Menggeser TAG DIV ke arah bawah
  • addClass » Menambahkan class pada DOM
  • removeClass » Menghapus class suatu DOM
  • fadeIn » Manampilkan DOM secara perlahan
  • fadeOut » Manyembunyikan DOM secara perlahan
  • Dan masih banyak fungsi lainnya yang bisa kita pelajari lebih jauh

Berkenaan dengan pemaparan diatas, mari kita coba fungsi - fungsi tersebut untuk kita gunakan pada sebuah halaman web dan kita lihat bagaimana hasilnya, langkah - langkahnya adalah sebagai berikut :

1. Buat halaman utamanya » utama.php

<html>
	<head>
		<title>Manipulasi TAG DIV dengan JQUERY</title>
		<script type="text/javascript" src="jquery-1.6.1.min.js">//memanggil jquery</script>
		<script type="text/javascript" src="ajax.js">//memanggil script ajax</script>
		<link rel="stylesheet" href="style.css" type="text/css"/>
	</head>
	<body>
		<div id="wrapper">
			<div id="menu">
				<span class="button" onclick="slideUp();">Slide UP</span>
				<span class="button" onclick="slideDown();">Slide Down</span>
				<span class="button" onclick="TambahBg();">+ Background</span>
				<span class="button" onclick="HapusBg();">- Background</span>
				<span class="button" onclick="fadeOut();">Hilangkan</span>
				<span class="button" onclick="fadeIn();">Munculkan</span>
			</div>
			<div id="dom_text">
			<p>
			Media kreatif didirikan untuk dapat menjadi Partner IT Professional dan mengahasilkan produk - produk edukasi dengan harapan dapat ikut berpartisipasi dalam rangka mencerdaskan bangsa.
			</p>
			<p>
			Produk
			</p>
			<p>
			Produk - produk Media Kreatif saat ini antara lain  :
			</p>
			1. Web design & PHP Programming<br/>
			<p>
			Produk ini meliputi produk - prodduk yang berbasis website dengan basis pemrograman PHP  dan tentunya juga menggunakan Content Management System yang sudah dirancang sendiri sejak Media Kreatif didirikan, yaitu PRM-CMS
			</p>
			2. Kemitraan IT<br/>
			<p>
			Kemitraan IT merupakan program kerja dimana kami akan mengembangkan aplikasi sesuai dengan permintaan pelanggan, yang selanjutnya pengelolaan aplikasi akan diserahkan kepada kami sesuai dengan kesepakatan yang telah disetujui bersama. Program ini sangat cocok untuk usaha yang berbasis IT karena aplikasi anda secara khusus akan menjadi tanggung jawab kami sehingga pelanggan tidak perlu dispuingkan dengan penyediaan tenaga teknis.
			</p>
			3. Pendidikan<br/>
			<p>
			Program pendidikan memang sudah menjadi tujuan kami sejak dulu, dimana kami ingin menyediakan sebuah metode pengajaran yang benar - benar dapat membuat peserta didik memahami setiap alur dan materi yang kami sampaikan. Silahkan kunjungi halaman Media Edukasi untuk memahami lebih lanjut seperti apa metode pengajaran kami
			</p>
			</div>
		</div>
	</body>
</html>

Script html diatas akan kita gunakan sebagai media untuk melakukan manipulasi TAG DIV dengan menggunakan JQUERY, script dapat kita simpan dengan extensi .php atau dengan .html


2. Membuat script css untuk melakukan manipulasi class atau id selector » style.css

body{
	font:normal 12px Tahoma,Verdana;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
#dom_text{
	font:normal 12px Tahoma,Verdana;
	width:500px;
	border:silver 1px solid;
	text-align:justify;
	margin-left:auto;
	margin-right:auto;
	padding:10px;
}
#menu{
	font:normal 12px Tahoma,Verdana;
	width:520px;
	height:30px;
	border:silver 1px solid;
	text-align:justify;
	margin:5px 0 5px 0;
	margin-left:auto;
	margin-right:auto;
}
span.button{
	margin-left:10px;
	line-height:30px;
	border:silver 1px solid;
	padding:5px;
	cursor:pointer;
}
.bakcground_hitam{
	background-color:#000000;
	color:#ffffff;
}

3. membuat script ajax.js

Script ini merupakan sekumpulan fungsi javascript yang selanjutnya akan dipanggil oleh halaman utama pada contoh script no 1.

function slideUp()
{
	$('#dom_text').slideUp('slow');
}

function slideDown()
{
	$('#dom_text').slideDown('slow');
}

function TambahBg()
{
	$('#dom_text').addClass('bakcground_hitam');
}

function HapusBg()
{
	$('#dom_text').removeClass('bakcground_hitam');
}

function fadeOut()
{
	$('#dom_text').fadeOut('slow');
}

function fadeIn()
{
	$('#dom_text').fadeIn('slow');
}

Adapaun nama fungsi - fungsi tersebut dipanggil oleh event - event onclick yang sudah ditanamkan pada script utama pada contoh pertama seperti berikut :

<span class="button" onclick="slideUp();">Slide UP</span>
<span class="button" onclick="slideDown();">Slide Down</span>
<span class="button" onclick="TambahBg();">+ Background</span>
<span class="button" onclick="HapusBg();">- Background</span>
<span class="button" onclick="fadeOut();">Hilangkan</span>
<span class="button" onclick="fadeIn();">Munculkan</span>

Cobalah membuat script seperti pada contoh no 1, 2 dan nomor 3 diatas, kemudian simpan dan letakkan dalam 1 folder, kemudian anda buka script no 1 pada browser, selanjutnya cobalah untuk klik pada tombol - tombol span yang sudah kita tanami event onclick untuk memanggil fungsi - fungsi diatas.

Selamat mencoba dan salam kreatif


Komentar pembaca

alamsyahgan, "jquery-1.6.1.min.js". kok gk ada,,, jadi slide nya gk bisa jalan... tolong "jquery-1.6.1.min.js" d sertakan iya gan,,posting pada :2013-06-12 13:06:17
AdminSdr. Alamsyah, Untuk jquery tidak harus menggunakan 1.6.1, kita bisa menggunakan versi yang lebih baru. Silahkan coba download jquery yang kami gunakan pada situs Media Kreatif, pada alamat berikut :
http://media-kreatif.com/js/jquery-1.7.2.min.js
Kemudian pilih save page pada browser dan letakkan bersebelahan dengan script ajax.js dan utama.php.
Jangan lupa untuk mengubah script utama.php, yaitu oada bagian jquery, kita sesuaikan dengan nama file jquery yang kita gunakan, yaitu jquery-1.7.2.min.js
posting pada :2013-06-12 14:15:38
xss attack<form action="http://www.google.com/"><input value="test xss attack" class="download" type="submit"></form>posting pada :2013-11-21 05:23:58
anik ernawatimakasih bgt yah buat share ilmunya....posting pada :2014-01-22 22:05:00
irfangan ane mau biki slide text kayak slde text yang ada disamping search pada web ini diatas, gmn caranya gan?posting pada :2014-03-21 09:18:04
Phatonmaksih bxak atas tutorx,, sgat membantu,,,!!posting pada :2014-07-17 22:21:27
patihgan, gimana cara ketika kita scrool web ke bawah, trus content nya muncul. kayak web nya agan, ketika ane scrool ke bawah footer nya muncul. terima kasihposting pada :2017-04-29 10:43:11
         
     
         
 
         
   
         
   
 

Tulis komentar