Langsung ke konten utama

Tutorial Tab Fade dengan jQuery

Membuat Tab Fade menggunakan jQuery


Selamat datang di Blog saya J Omen099.blogspot.co.id

Terima kasih telah meluangkan waktu anda untuk mengunjungi blog Omen099.blogspot.co.id walaupun hanya sekedar melihat dan membaca berbagai hal yang akan saya paparkan disini. Pada kesempatan kali ini saya akan memberikan sedikit info ataupun pembelajaran mengenai “Tutorial membuat Tab Fade menggunakan jQuery”. Namun alangkah baiknya rekan – rekan semua tau apa itu tab fade. Jadi apa menurut anda tab fade itu??? Selain tab fade apakah jquery itu??? Baiklah kali ini saya akan membantu memaparkan apa yan dimaksud dengan tab fade dan jquery yang sudah saya kutip dari Wikipedia.

jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML.
Pada kesempatan kali ini dalam pembuatan tab fade menggunakan jquery harus juga dilengkapi dengan beberapa bahasa pemrogram yang lainnya untuk mendukung dalam aplikasi berbasis web. Selain jquery dalam pembuatan tab fade ini juga harus membuat sintax dengan menggunakan CSS ( Cascading Style Sheet ), HTML ( hypertext Manipulation Language ), JavaScript dan jQuery. Namun apakah rekan – rekan sudah mengetahui apa itu css, html dan javascript??? Kali ini saya akan sedikit memberi pengetahuan sedikit tentang ketiga hal tersebut.


CSS ( Cascading Style Sheet ) merupakan merupakan suatu bahasa pemrogarama web (skrip) yang didesain khusus unutk mengendalikan dan membangun dalam web sehingga tampilan web menjadi lebih rapi, tersruktur dan seragam.


HTML ( Hypertext Markup Languange ) merupakan bahasa markup yang mendeskripsikan dokumen web (halaman web). Dokumen HTML dideskripsikan oleh tag HTML. Setiap tag HTML mendeskripsikan konten dokumen yang berbeda.

JavaScript adalah bahasa yang berbentuk kumpulan script yang pada fungsinya berjalan dan memberikan kemampuan tambahan (perilaku halaman web) pada bahasa HTML.
Baiklah setelah kita sama – sama mengetahui sedikit tentang apa aja yang dibutuhkan dalam pembuatan aplikasi berbasis web mari kita lanjutkan tujuan awal kita untuk membuat tab fade dengan jquery. Semoga bisa membantu rekan – rekan yang membutuhkan yakk. Tapi sebelum  dimulai ada yang perlu kita pesiapkan terlebih dahulu.
PERSIAPAN YANG HARUS DILAKUKAN
  •  Pertama kita harus membuat folder untuk menyimpan project ini. Contoh : Tutorial tab fade
  • Selanjutnya kita harus Download jQuery di https://jquery.com/download/ , setelah masuk ke menu download pilih versi yang 1.xx.xx Compressed, karena versi 2.xx.xx ada yang tidak mendukung untuk beberapa web browser seperti Internet Explorer 6, 7, dan 8.
  • Setelah file jQuery tadi sudah terdownload langsung pindah ke dalam folder yang sudah kita buat sebelumnya di folder Tutorial tab fade.
  • Setelah itu rename file jQuery tadi menjadi jquery.min.js seupaya kita dapat dengan mudah mengingatnya.
  • Setelah file yang dibutuhkan sudah terpenuhi selanjutnya kita harus mempersiapkan text/kode editor kesukaan kita untuk menuliskan kode yang akan kita buat selanjutnya. Ada beberapa yang saya ketahui mungkin rekan – rekan juga mengetahui seperti diantaranya ada Atom dan Sublime Text serta masih banyak yang lainnya. Tetapi selain 2 text editor tadi kita juga bisa menggunakan Notepad++ ataupun Notepad sekalipun.

Baiklah setelah beberapa persiapan sudah kita penuhi semuanya, selanjutnya kita bisa melanjutkan ke tahap selanjutnya dengan melakukan pengkodean yang cukup menguras pikiran kita.

LANGKAH PENGKODEAN

 Pertama kita harus membuat file html dulu misal dengan nama file index.html didalam folder yang sudah kita buat tadi di folder Tutorial tab fade, setelah file sudah dinamai dan disave selanjutnya kita bisa langsung mengisi file tersebut dengan kode – kode yang ada dibawah ini.

<!-- Created by 201453046_Fatchur Rochman -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <!-- Memberikan Judul / title pada halaman -->
  <title>Tab Fade</title>

  <!-- Menghubungkan dengan file css -->
  <link rel="stylesheet" href="201453046.css" media="screen" charset="utf-8">
</head>
<body>

  <!-- Membuat tab navigasi dengan menggunakan class tab-nav -->
  <ul class="tab-nav">

    <!-- Membuat beberapa tab dengan menggunakan class tab -->
    <li class="tab"><a href="#tab1">Tab Pertama</a></li>
    <li class="tab"><a href="#tab2">Tab Kedua</a></li>
    <li class="tab"><a href="#tab3">Tab Ketiga</a></li>
  </ul>

  <!-- Mengisi pada bagian "Tab Pertama" -->
  <div class="tabPage" id="tab1">
    <p>Selamat Datang di Tab Pertama</p>
  </div>

  <!-- Mengisi pada bagian "Tab Kedua" -->
  <div class="tabPage" id="tab2">
    <p>Selamat Datang di Tab Kedua</p>
  </div>

  <!-- Mengisi pada bagian "Tab Ketiga" -->
  <div class="tabPage" id="tab3">
    <p>Selamat Datang di Tab Ketiga</p>
  </div>

  <!-- Memanggil file jquery -->
  <script src="jquery.min.js"></script>

  <!-- Memanggil file javascript -->
  <script src="201453046.js"></script>
</body>
</html>
<!-- Created by 201453046_Fatchur Rochman -->


Selanjutnya kita buat file javascript dengan nama 201453046.js dan save di dalam folder Tutorial tab fade, setelah file sudah tersimpan kita bisa langsung mengisi file dengan kode – kode yang ada di bawah ini.

// Created by 201453046_Fatchur Rochman

// dokumen akan dijalan jika dokumen sudah siap
$(document).ready(function () {
 var href;
$('.tabPage').css('display', 'none');

// Event saat bagian "tab" di klik$('a').click(function () {

// Mengubah style "background-color" dengan warna biru muda pada bagian tab
$('a').parent('li').css('background-color', 'lightblue');

// Mengubah style "background-color" elemen tab yang dipilih dengan warna orange
$(this).parent('li').css('background-color', 'orange');
href = $(this).attr('href');
$('.tabPage').css('display', 'none');
$(href).fadeIn(500);

});
);
// Created by 201453046_Fatchur Rochman


Selanjutnya kita buat file css nya dengan nama yang mudah saja misalnya 201453046.css biar mudah diingat dan langsung save di folder yang sudah dibuat tadi di folder Tutorial tab fade . Setelah file sudah tersimpan kita lanjutkan dengan mengisi file tersebut dengan kode – kode dibawah ini.

/*Created by 201453046_Fatchur Rochman*/

/*style untuk pengaturan letak tab saat awal web dibuka*/
.tab-nav {
margin-top: 15px;
padding: 0 50px;
background-color: lightblue;
position: absolute;

/*style untuk pengaturan halaman pada tab setelah diproses*/
.tabPage {
background-color: lavender;
width: 390px;
position: fixed;
padding: 25px;
margin-top: 73px;

/*style untuk pengaturan letak tab-nav setelah diproses*/
ul > li {
float: left;
padding: 20px;
background-color: lightblue;
list-style-type: none;

/*style untuk memberikan background dengan warna berbeda ketika tab sudah dipilih*/
ul > li:hover {
background-color: orange;

/*style untuk posisi bagian tab dan hasil tab*/
li > a {
text-decoration: none;

/*Created by 201453046_Fatchur Rochman*/


MENJALANKAN PROGRAM

Setelah kode – kode yang kita buat tadi sudah selesai semuanya tinggal kita coba bagaimana hasilnya. Maka kita buka file yang ada di folder Tutorial tab fade yang sudah kita buat tadi dan jalankan file index.html menggunakan browser pilihan anda. Apabila tidak ada kesalahan dalam memasukkan kode maka pada halaman we akan terlihat seperti dibawah ini.

  • Tampilan saat menu utama belum dijalankan apa-apa



  •       Tampilan saat tab pertama dipilih atau di klik



  •       Tampilan saat tab kedua dipilih atau di klik



  •       Tampilan saat tab ketiga dipilih atau di klik



Mungkin ini tidak seberapa dan hanya sedikit dulu yang bisa saya bagikan pada kesempatan kali ini. Semoga dengan yang saya bagikan kali ini bisa bermanfaat bagi rekan – rekan pembaca coretan – coretan saya ini yang mungkin masih banyak kekurangan dan jauh dari kata sempurna. Disini saya juga tidak bermaksud buat menggurui tapi disini saya mau berbagi ilmu dengan yang belum bisa.Tentunya masih banyak diluar sana yang lebih jago dan lebih master dalam pembuatan web. Disini kita sama – sama masih belajar dan semoga bermanfaat. Terimakasih atas waktu dan ketulusan anda membaca coretan – coretan saya dan mohon maaf jika ada tulisan – tulisan yang kurang berkenan. Terima Kasih


Komentar

Posting Komentar

Postingan populer dari blog ini

Pemodelan Proses Bisnis

PEMODELAN PROSES BISNIS •        M enjelaskan proses bisnis secara lebih mudah untuk dipahami . •        Ada berbagai macam : –       Dengan narasi (workflow/alur kerja proses) –       Dengan grafik atau diagram misal : •        Model REAL (Resource, Events, Agent, and Locations) Kejadian-Kejadian Proses Bisnis ( Business Process Events ) •        Suatu proses bisnis merupakan serangkaian aktivitas yang bertujuan untuk mencapai tujuan organisasi. •        Suatu proses bisnis dapat terdiri dari beberapa aktivitas. •        Kejadian (event) merupakan suatu aktivitas tunggal yang terdapat pada sebuah proses bisnis. Tiga Jenis Kejadian •        Kejadian-kejadian Operasional (Operating Events) •  ...
Posting Komentar
Baca selengkapnya

Ruang Lingkup Analisa Proses Bisnis

RUANG LINGKUP ANALISA PROSES BISNIS Apa itu Ruang Lingkup? •        Ruang lingkup analisa proses bisnis adalah cakupan/domain/area dimana analisa proses bisnis perlu dilakukan. Ruang Lingkup Analisa Proses Bisnis Integrasi Proses Bisnis Standarisasi Proses Bisnis Analisa Proses Bisnis berbasis Teknologi Informasi Riset Bisnis Pendahuluan Integrasi Proses Bisnis Sebuah metodologi/cara untuk melakukan efisiensi perusahaan melalui penerjemahan visi ke dalam bentuk strategi dan action , kemudian diwujudkan dalam proses bisnis perusahaan terintegrasi Latar belakang Integrasi Proses Bisnis •        Efisiensi –       Beberapa proses bisnis digabungkan menjadi satu proses yang terintegrasi. •        Persaingan Bisnis –       Persaingan instansi lain dengan konsep proses bisnis yang terintegrasi, sehingga integrasi haru...
1 komentar
Baca selengkapnya

Konsep dasar (data, sistem, informasi, sistem informasi)

Konsep dasar (data, sistem, informasi, sistem informasi) PENGERTIAN DATA Data : 1.        “Streams of raw facts representing events occurring in organizations or the physical environment before they have been organized and arranged into a form that people can understand and use” (adalah aliran dari fakta yang direpresentasikan melalui kejadian dalam organisasi atau lingkungan fisik sebelum diorganisasi dan di susun ke dalam bentuk yang dapat dimengerti dan digunakan oleh user). 2.        Data adalah fakta / sebagian fakta yang mengandung arti berupa angka, huruf, symbol khusus atau gabungan darinya. Klasifikasi data 1.        Klasifikasi data menurut jenis data a.        Data hitung (enumeration/counting data) >>hasil perhitungan atau jumlah tertentu ex:mencatat jumlah mhs dalam kelas b.        Data Ukur (m...
Posting Komentar
Baca selengkapnya