Membuat PopUp dengan CSS3 Murni

Dalam pembuatan suatu web aplikasi kita sering sekali menggunakan popup / modal dalam menyampaikan informasi misalnya menampilkan informasi keberhasilan dalam menginput data, pengisian form untuk guest book, menampilkan informasi about me atau bisa juga digunakan dalam pencarian data.
Pada artikel ini akan di bahas mengenai pembuatan popup dengan CSS3 murni tanpa menggunakan script seperti javascript. Akan tetapi popup ini hanya akan berjalan pada browser-browser yang terbaru yang sudah support dengan CSS3 sehingga untuk browser yang lama atau jadul script ini tidak akan berfungsi. Untuk lebih jelasnya anda bisa mengikuti contoh berikut :

Pertama buat script HTML seperti berikut

<div id="closed"></div>
<a href="#popup" class="popup-link">Klik untuk memunculkan Popup</a>
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<h2>Isi dari popup</h2>
<p>Ini adalah isi dari popup menggunakan CSS3 murni tanpa jquery atau javascript.</p>
<a class="popup-close" href="#closed">X</a>
</div>
</div>

Kemudian buat style CSS3

a.popup-link {
padding:17px 0;
text-align: center;
margin:7% auto;
position: relative;
width: 300px;
color: #fff;
text-decoration: none;
background-color: #FFBA00;
border-radius: 3px;
box-shadow: 0 5px 0px 0px #eea900;
display: block;
}
a.popup-link:hover {
background-color: #ff9900;
box-shadow: 0 3px 0px 0px #eea900;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}
/* end link popup*//*style untuk popup */
#popup {
visibility: hidden;
opacity: 0;
margin-top: -200px;
}
#popup:target {
visibility:visible;
opacity: 1;
background-color: rgba(255,255,255,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
z-index: 99999999999;
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
}@media (min-width: 768px){
.popup-container {
width:600px;
}
}
@media (max-width: 767px){
.popup-container {
width:100%;
}
}
.popup-container {
position: relative;
margin:7% auto;
padding:30px 50px;
background-color: #333;
color:#fff;
border-radius: 3px;
}a.popup-close {
position: absolute;
top:3px;
right:3px;
background-color: #fff;
padding:7px 10px;
font-size: 20px;
text-decoration: none;
line-height: 1;
color:#333;
}/* style untuk isi popup */.popup-form {
margin:10px auto;
}
.popup-form h2 {
margin-bottom: 5px;
font-size: 37px;
text-transform: uppercase;
}
.popup-form .input-group {
margin:10px auto;
}
.popup-form .input-group input {
padding:17px;
text-align: center;
margin-bottom: 10px;
border-radius:3px;
font-size: 16px;
display: block;
width: 100%;
}
.popup-form .input-group input:focus {
outline-color:#FB8833;
}
.popup-form .input-group input[type="email"] {
border:0px;
position: relative;
}
.popup-form .input-group input[type="submit"] {
background-color: #FB8833;
color: #fff;
border: 0;
cursor: pointer;
}
.popup-form .input-group input[type="submit"]:focus {
box-shadow: inset 0 3px 7px 3px #ea7722;
}

Setelah HTML dan CSS nya dibuat jalankan di browser dan lihat hasilnya. Untuk contoh diatas bisa dilihat di link Berikut

Selamat mencoba dan semoga bermanfaat.

Baca Selengkapnya »

Membuat Validasi Form Dengan JQuery (2)

Pada artikel sebelumnya pernah di bahas bagaimana menerapkan validasi form menggunakan JQuery tetapi hanya dibahas beberapa aturan / rule seperti penulisan email, text harus diisi dan inputan hanya boleh angka. Pada artikel ini akan dibahas lebih banyak aturan / rule validasi nya seperti berikut, 

1. Inputan KTP hanya boleh diisi 16 digit angka (tidak boleh diisi huruf) 
2. Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY 
3. Inputan UMUR diisi dengan angka antara 0-100
4. Inputan PASSWORD dan ULANGI PASSWORD harus sama.

Sebelum menerapkan aturan / rule validasi buatlah terlebih dahulu sintak form HTML sebagai berikut,


<form id="form" method="post" action="proses.php">
<label for="ktp">No. KTP</label>         
<input type="text" name="ktp" id="ktp" maxlength="10" size="15"/> 
<label for="umur">umur</label>
<input type="text" name="umur" id="umur" maxlength="3" size="7"/>
<label for="tgl">Tanggal Lahir</label>
<input type="text" name="tgl" id="tgl" maxlength="10" size="15"/>
<label for="pass1">Password</label>
<input type="password" name="pass1" id="pass1" size="15"/> 
<label for="pass2">Ulangi Password</label>
<input type="password" name="pass2" id="pass2" size="15"/> 
<input class="submit" type="submit" value="Daftar"/>
</form>

Seperti artikel sebelumnya, untuk menerapkan aturan / rules validasi yang telah kita tentukan, panggil fungsi validate() saat halaman pertama kali dimunculkan. Di dalam fungsi validate() kita dapat membuat aturan-aturan di atas. Sebagai langkah awal, tambahkan potongan script berikut ini di antara tag <head>

<script type="text/javascript">
$(document).ready(function() {
    $("#form").validate();
});
</script>

Pada sintak diatas, $(document).ready(function() menerangkan bahwa perintah didalamnya dijalankan ketika halaman pertama kali muncul. $("#form") merupakan id dari form yang akan di pasang aturan validasi. Selanjutnya kita akan menerapkan aturan validasi diatas.

1. Inputan KTP hanya boleh diisi 16 digit angka (tidak boleh diisi huruf)
Untuk aturan yang ini, dapat dirinci menjadi 3 rule yaitu tidak boleh huruf (digits), panjang minimal isian adalah 16 digit dan panjang maksimal juga 16digit. Kita dapat menambahkan rule pada pemanggilan fungsi validate() sehingga berubah menjadi sebagai berikut: 

$('#form').validate({
    rules: {
        ktp: {
            digits: true, minlength:10, maxlength:10 
        } 
    } 
});

2. Inputan TANGGAL LAHIR diisi dengan format DD/MM/YYYY
Untuk aturan ini, kita akan membuat format yang harus diisikan pada inputan tanggal. Jika format yang diinginkan adalah MM/DD/YYYY atau YYYY-MM-DD, Kkta dapat menggunakan rule bawaan JQuery yaitu menambahkan sintak date:true. Namun dalam rule diatas, diinginkan format tanggalnya adalah DD/MM/YYYY sehingga kita perlu membuat fungsi validator sendiri.

Perhatikan fungsi indonesianDate() beserta penerapannya berikut ini:

$(document).ready(function() {
    $('#form').validate({
            rules: {
                tgl: {
                    indonesianDate:true
                }
            }
    });
});

$.validator.addMethod("indonesianDate",
    function(value, element) {
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
    }, 
    "Isikan tanggal dengan format DD/MM/YYYY"
);

3. Inputan UMUR diisi dengan angka antara 0-100
Pada aturan ini kita dapat menggunakan fungsi bawaan yaitu range serta batasan inputan berupa angka (digits). 

$(document).ready(function() {
    $('#form').validate({
            rules: {
                umur: {
                    digits: true,
                    range: [0, 100]
                }
            }
    });
});

4. Inputan PASSWORD dan ULANGI PASSWORD harus sama 
Pada aturan ini bahwa ulangi password harus sama dengan password, untuk itu kita bisa menggunakan fungsi bawaan equalsTo.

$(document).ready(function() {
    $('#form').validate({
            rules: {
                pass2: {
                    qualTo: "#pass1"
                }
            }
    });
});

Berikut sintak keseluruhan aturan 1 - 4

$(document).ready(function() {
    $('#form').validate({
            rules: {
                nim : {
                    digits: true,
                    minlength:10,
                    maxlength:10
                },
                tgl: {
                    indonesianDate:true
                },
                umur: {
                    digits: true,
                    range: [0, 100]
                },
                pass2: {
                    equalTo: "#pass1"
                }
            }
    });
});

$.validator.addMethod(
    "indonesianDate",
    function(value, element) {
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
    },
    "Isikan tanggal dengan format DD/MM/YYYY"
);

Baca Selengkapnya »

Membuat Validasi Form Dengan JQuery

Validasi form pada web aplikasi merupakan hal yang wajid dilakukan untuk melakukan pengecekan data yang diinputkan oleh user. Jika data yang diinputkan user tersebut sudah sesuai maka akan diproses untuk disimpan di database sedangkan jika terjadi kesalahan penginputan maka data tersebut tidak akan disimpan dan dikembalikan ke user dengan muncul peringatan atau pesan yang menyatakan data tersebut tidak valid.
Ada banyak cara memvalidasi form berbasis web, namun cara yang paling simple dan menarik menurut penulis adalah menggunakan jQuery, lebih tepatnya menggunakan jquey Plugin bernama JQuery validate.
Untuk penggunaan jquery validate ikuti langkah berikut :
1. Download Jquery.js dan jquery.validate.js
2. Include-kan file js tersebut ke dalam tag <head> di HTML seperti berikut

<head>

<title>Sample Validasi</title>

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

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

</head>

3. Tuliskan script untuk menjalankan validasi di form

<script type="text/javascript">

$(document).ready(function() {

    $("#form").validate(); //id form

});

</script>

4. Buat sintak HTML nya

<form id="form" method="post" action="proses.php"> 

<label for="nama">Name</label>           

<input id="nama" name="nama" size="25" class="required" minlength="2" />

<label for="umur">umur</label> 

<input id="umur" name="umur" size="25" class="required number" /> 

<label for="email">E-Mail</label> 

<input id="email" name="email" size="25"  class="required email" /> 

<input class="submit" type="submit" value="Daftar"/> 

</form>

Untuk menempelkan validasi di tiap inputan atau tag <input>, kita harus menambahkan nama class seperti di sintak di atas. Berikut penjelasan nama class untuk validasi,
required, inputan tersebut wajib diisi.
number, yang diinputkan harus angka tidak boleh huruf.
email, yang diinputkan harus berformat email misalnya : nama@mail.com


Berikut sintak keseluruhan untuk menjalankan validasi di form inputan

<html>
<head>

<title>Sample Validasi</title>

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

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

<script type="text/javascript">

$(document).ready(function() {

    $("#form").validate(); //id form

});

</script>

</head>
<body>

<form id="form"> 

<label for="nama">Name</label>           

<input id="nama" name="nama" size="25" class="required" minlength="2" />

<label for="umur">umur</label> 

<input id="umur" name="umur" size="25" class="required number" /> 

<label for="email">E-Mail</label> 

<input id="email" name="email" size="25"  class="required email" /> 

<input class="submit" type="submit" value="Daftar"/> 

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

Untuk lebih memahami bisa dilihat di link Berikut.

Semoga bermanfaat..

Baca Selengkapnya »

Menampilkan Pilihan Bulan dan Tahun (Dropdown) Dan Menentukan Range Tahun Pada JQuery UI Datepicker

Pada artikel sebelumnya sudah dibahas mengenai penggunaan datepicker dalam membantu pembuatan aplikasi web terutama dalam penulisan tanggal. Pada artikel ini akan dibahas bagaimana cara memilih tahun dan bulan dengan lebih mudah seperti pada saat kita akan memilih bulan dan tahun pada tanggal lahir diperlukan dropdown / pilihan untuk memudahkan dalam memilih bulan dan tahun lahir kita.
Berikut adalah sintak untuk pemanggilan datepicker biasa,
$(function() {
      $("#datepicker").datepicker();
});  

Pada syntak javascript pemanggilan datepicker diatas untuk membuat tambahan dropdown pada bulan dan tahun, kita hanya cukup menambahkan changeYear dan changeMonth di dalam datepicker tersebut seperti berikut,
$(function() {
      $("#datepicker").datepicker({
           changeMonth : true,
           changeYear : true
      });
});


Sehingga tampilan dari jQuery datepicker tersebut menjadi seperti ini

Pada gambar diatas terlihat pada bagian atas terdapat pilihan / dropdown untuk bulan dan tahun.
Untuk pilihan tahun kita juga bisa membatasi berapa tahun kedepan dan berapa tahun kebelakang yang perlu di tampilkan di dropdown tersebut, dengan cara menambahkan sintak yearRange seperti berikut,
$(function() {
      $("#datepicker").datepicker({
           changeMonth : true,
           changeYear : true,
           yearRange : -50:+50
      });
});

Pada yearRange terdapat nilai -50:+50 menandakan bahwa -50 adalah 50 tahun kebelakang dari tahun sekarang sedangkan +50 adalah 50 tahun kedepan dari tahun sekarang. Misalnya sekarang tahun 2015, yang akan tampil di dropdown dari tahun 1965(2015-50) s/d 2065 (2015+50).

Semoga bermanfaat.

Baca Selengkapnya »

Membuat Input Tanggal Pada Textbox Menggunakan JQuery UI Datepicker

Dalam membuat sebuah aplikasi terkadang kita membuat inputan untuk tanggal misalnya tanggal lahir atau tanggal invoice, dan pada proses penginputan data tanggal tersebut kita sering mengalami kesalahan terutama dalam penulisan format tanggal, oleh karena itu diperlukannya bantuan atau fasilitas untuk memudahkan user / pengguna dalam memasukan tanggal. Pada artikel ini akan di jelaskan bagaiman membuat fasilitas tersebut dengan menggunakan JQuery Datepicker.
JQuery Datepicker adalah salah satu jquery yang sering digunakan dalam memilih tanggal, bulan, dan tahun. jQuery Datepicker cukup populer dikalangan web designer karena jQuery Datepicker memberikan kemudahan bagi pengguna website.

Berikut langkah penggunaan JQuery Datepicker,
1. Download JQuery UI di link Berikut, kemudain lakukan ekstrak file yang di download tersebut.

2. Buat folder js untuk menyimpan file jquery-1.10.2.js dan  jquery-ui.js. Folder themes untuk menyimpan file style jquery-ui.css.

3. Include-kan file css dan js yang ada dalam folder ter-ekstrak tadi ke dalam tag <head> seperti berikut

<head>
<title>Sample Datepicker</title>
<link rel="stylesheet" href="themes/smoothness/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="ui/jquery-ui.js"></script>
</head>

4. Tuliskan script untuk memanggil datepicker,

<script type="text/javascript">
$(function() {
      $("#datepicker").datepicker();
});
</script>

5. Buat tag HTML nya,

<p><input type="text" id="datepicker"></p>

6. Berikut hasil dari script datepicker diatas














Script keseluruhan untuk memanggil datepicker

<html>
<head>
<title>Sample Datepicker</title>
<link rel="stylesheet" href="themes/smoothness/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="ui/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
  $("#datepicker").datepicker();
});
</script>
</head>
<body>
<p><input type="text" id="datepicker"></p>
</body>
</html> 

Selamat mencoba dan semoga bermanfaat.

Baca Selengkapnya »

Membuat Efek Show dan Hide Dengan JQuery Toggle

JQuery Toggle digunakan untuk membuat efek show() dan hide() yang tidak lain adalah untuk menampilkan dan menyembunyikan elemen dengan menggunakan metode toggle(). Syntax yang di gunakan seperti dibawah ini:

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

Agar bisa lebih mudah dalam memahami penggunaan JQuery toggle ikutilah contoh di bawah ini. Pada contoh ini kita akan menyembunyikan dan menampilkan suatu elemen HTML.

CSS

#button{
padding:5px 15px;
background:#2ecc71;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#isi{
display:none;
text-align:center;
background:#2ecc71;
color:#fff;
padding:50px 0
}

HTML

<button id='button'>Toggle</button>
<div id='isi'>Penggunaan jQuery toggle</div> 

JQuery

$(document).ready(function(){
  $("#button").click(function(){
    $("#isi").toggle();
  });
});

 Untuk melihat hasil dari script di atas klik link Contoh JQuery Toggle


Pada JQuery toggle ini kita bisa menambahkan parameter speed untuk membuat efek animasinya lebih terlihat.

$(document).ready(function(){
  $("#button").click(function(){
    $("#isi").toggle(1000); //parameter speed
  });
});

Menambahkan parameter Callback

$(document).ready(function(){
  $("#button").click(function(){
    $("#isi").toggle(1000,function(){
      alert("Pesan ini muncul setelah toggle selesai berjalan");
    });
  });
}); 

Baca Selengkapnya »

Mengenal Beberapa Event Pada Javascript : .onClick, .onLoad, onMouseOver dan onMouseOut

Event adalah suatu aksi yang dilakukan oleh pemakai yang memicu jalannya kode JavaScript yang sudah dibuat. Sebagian besar event dipicu oleh pemakai yang memanipulasi halaman web pada program browsernya , misalnya jika suatu tombol di klik maka akan menjalankan suatu function.
Berikut beberapa penjelasan dan contoh event pada javascript,

.OnClick
Event ini terjadi jika pemakai mengklik tombol mouse pada link atau elemen yang terdapat pada form HTML. Pada contoh berikut kita akan membuat sebuah tombol pada halaman website yang jika di tekan akan memunculka pesan windows alert.
Lakukanlah penulisan script dibawah ini kedalam notepad lalu simpan dengan ekstensi .HTML dan kemudian jalankan di browser.

<html>

<head>

 <title> Contoh event OnClick Javascript</title>

<script type="text/javascript">

    function klik(){

        alert("Ini adalah contoh event klik");

    }

</script>

</head> 

<body>

    <form>

        <input type="button" name="test" value="Silahkan Klik" onClick="klik()" />

    </form>

</body>

</html>

Setelah dijalankan di browser, hasilnya seperti berikut

.OnLoad
Event ini akan di jalankan apabila suatu objek diload, dalam kasus ini kita akan menaruh event onload di bagian tag <body> sehinga ketika suatu halaman web diload maka akan muncul sebuah pesan seperti contoh diatas.
Lakukan seperti di atas tulis script dibawah ini kedalam notepad, simpan dengan ekstensi .HTML dan jalankan di browser.
 

<html>

<head>

 <title> Contoh event OnLoad Javascript</title>

<script type="text/javascript">

    function load(){

        alert("Ini adalah contoh event load");

    }

</script>

</head> 

<body onLoad="load()">

         Contoh menjalankan event onload pada tag <body>

</body>

</html>

 Berikut hasil dari script diatas,

.OnMouseOver dan .OnMouseOut
Event .onMouseOver berjalan jika pemakai meletakkan mouse di atas sebuah link atau suatu objek HTML.
Event .onMouseOut berjalan bila kursor mouse keluar dari daerah link atau suatu objek HTML.
Berikut ini kita akan membuat contoh penggunaan event onMouseOver dan onMouseOut pada kolom tabel, ketika kursor berada d atas kolom tersebut makan backgroundnya akan berganti warna.
Lakukan seperti di atas tulis script dibawah ini kedalam notepad, simpan dengan ekstensi .HTML dan jalankan di browser.

<html>
<body>
   <table>
     <tr onmouseover="this.bgColor='red'" onmouseout="this.bgColor='#fff'" bgcolor="#fff">
         <td>Letakan Mouse Di sini untuk menjalankan event OnMouseOver</td>
     </tr>
     <tr onmouseover="this.bgColor='blue'" onmouseout="this.bgColor='#fff'" bgcolor="#fff">
         <td>Letakan Mouse Di sini juga untuk menjalankan event OnMouseOver</td>
     </tr>
        </table>
</body>
</html>

Berikut hasil script diatas,

Selamat mencoba dan semoga bermanfaat.

Baca Selengkapnya »

Cara Mengetahui Kesalahan Pada Javascript Menggunakan Fasilitas Browser

Pada saat kita membuat script javascript di aplikasi web terkadang hasilnya tidak sesuai dengan apa yang kita inginkan, ini diakibatkan oleh pembuatan script yang tidak sempurna atau terjadi kesalahan. Hal semacam ini terkadang membuat kita sulit untuk mengetahui kesalahannya, oleh karena itu pada artikel ini akan dijelaskan bagaimana kita mengetahui kesalahan tersebut menggunakan fasilitas yang ada di browser.

Buatlah script html sebagai berikut,

<html>
<head>
    <title>Pengetesan keasalahan Javascript</title>
</head>
<body>
<script type="text/javascript">
    var a = 1;
    var b = 2;
    var c = 3;
    document.write(a+b+c+d);
</script>
</body>
</html>

Ketika script diatas di jalankan pada browser akan muncul tampilan sebgai berikut,

Pada gambar diatas tidak muncul tulisan apapun di browser, ini menandakan ada kesalahan pada script yang kita buat tadi. Untuk mengetahui kesalahan dan posisinya dimana, pada keyboard tekan Ctrl + Shift + J sehingga muncul tampilan sebagai berikut,

Pada bagian kanan browser akan muncul inspect Element (posisi inspect element ini bisa terletah di kanan browser, bisa juga di bawah). Tekan tanda >> samping Element sehinggal muncul tampilan seperti diatas dan anda pilih atau klik bagian console (yang di lingkari merah), sehingga muncul seperti di bawah,

Pada gambar diatas yang di lingkari muncul tulisan yang berwarna merah yang isinya "ReferenceError: d is not defined" itu menandakan terjadi kesalahan pada script yang dibuat bahwa variabel d tidak ada atau tidak didefinisikan. sebelah kanan tulisan tersebut ada tulisan hitam "error.html:10" menandakan bahwa error tersebut terletak pada baris ke 10 di halaman error.html.

Dengan melihat kesalahan dan posisi kesalahannya membuat kita lebih mudah mengetahui masalah yang terjadi dan bagaimana membetulkan kesalahan tersebut.

Untuk membetulkan kesalahan tersebut, tambahkan var d = 1 di bawah var c = 3 kemudian simpan dan refresh browser, makan di bagian inspect element (console) tersebut tulisan yang berwarna merah yang tadi akan hilang.

Semoga bermanfaat.

Baca Selengkapnya »

Selector JQuery

Berikut syntak dasar dari JQuery,

$(selector).action()

Tanda dollar ($), mendefinisikan JQuery
Selector, merupakan element HTML
Action(), merupakan aksi yang diberikan untuk elemen HTML tersebut.

Berikut contoh penggunaan JQuery,
$(this).hide() //menyembunyikan element ini
$("p").hide() //menyembunyikan semua paragraph
$("p.test").hide() //menyembunyikan semua paraghraph dengan class="test"
$("#test").hide() //menyembunyikan element dengan id="test"

Pada contoh diatas syntak this, p, p.test dan #test adalah selector, dan hide() adalah action.
Berikut beberapa penjelasan untuk selector pada element HTML.

$("p") semua element paraghraph <p>
$("p.intro") semua element <p> yang memiliki class="intro"
$(".intro") semua element yang memiliki class="intro"
$("#intro") semua element yang memiliki id="intro"
$("div#intro .head") semua element dengan class="head" didalam <div> yang memiliki id="intro"
$("ul li:first") tag <li> pertama untuk setiap tag <ul>

Baca Selengkapnya »

Membuat Table Zebra Dengan CSS

Dalam membuat sebuah tabel kita biasanya menginginkan baris di table seperti zebra yaitu warna background baris genap dan ganjil berbeda. Hal ini dilakukan supaya memudahkan orang dalam membaca tiap baris dari table tersebut.
Berikut saya akan jelaskan membuat table zebra dengan menggunakan style CSS,

Pertama-tama buatlah class di css, misalnya disini kita buat class zebra seperti berikut :

<style>
.zebra tr:nth-child(even) {
     background-color: #f9f9f9;
}
.zebra tr:nth-child(odd) {
     background-color: #DCDCDC;
}
</style>

Kemudian style tersebut tempelkan pada table seperti berikut,

<table class="zebra">
     <tr><td></td></tr>
     <tr><td></td></tr>
</table> 

Supaya ketika kita arahkan mouse (hover) ke setiap baris bisa berubah warna, tambahkan baris berikut ke tag <style>

.zebra tr:hover {
     background-color: #4679BD;
}

Untuk contoh bisa dilihat pada link berikut Sample Table Zebra

Baca Selengkapnya »

Membuat Tab Dengan JQuery UI

Berikut saya akan jelaskan mengenai pembuatan Tab pada sebuah web dengan menggunakan JQuery UI. Pada pembuatan tab ini anda terlebih dahulu harus menyiapkan file .js dari JQuery UI diantaranya jquery.js, jquery-ui.js dan style dari JQuery UI yaitu jquery-ui.css. File tersebut bisa didapatkan dengan cara mendownload atau dengan cara langsung ngelink ke situs JQuery.
Berikut sample pembuatan tab dengan menggunakan file .js dan style yang ngelink ke situs JQuery,

<html lang="en">

<head>

<meta charset="utf-8">

<title>Tab dengan jQuery UI</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<script>

   $(function() {

     $("#tabs").tabs();

   });

</script>

</head>

<body>

<div id="tabs">

   <ul>

     <li><a href="#tabs-1">Tab 1</a></li>

     <li><a href="#tabs-2">Tab 2</a></li>

     <li><a href="#tabs-3">Tab 3</a></li>

   </ul>

   <div id="tabs-1">

     <p>Isi dari tab pertama</p>

   </div>

   <div id="tabs-2">

     <p>Isi dari tab kedua.</p>

   </div>

   <div id="tabs-3">

     <p>Isi dari tab ketiga.</p>

   </div>

</div>

</body>

</html>

Untuk lebih jelas bisa dilihat pada sample di link Sample Pembuatan Tab

Baca Selengkapnya »

.removeClass dan .addClass() Pada JQuery

.removeClass, digunakan untuk menghapus nama class pada tag HTML. Perintah ini dapat digunakan pada satu tag HTML maupun semua tag yang memiliki nama class yang sama. Misalnya kita akan menghapus nama class 'myClass' pada tag <p>

HTML

<p class="myClass">Ini Paragraph Yang akan di hapus nama class</p>

JQuery

$("p").removeClass("myClass")

Hasil

<p>Ini Paragraph Yang akan di hapus nama class</p>

.addClass, digunakan untuk menambahkan nama class pada tag HTML. Misalnya kita akan menambahkan nama class 'yourClass' pada tag <p>

HTML

<p>Ini Paragraph yang akan di tambah nama class</p>

JQuery

$( "p" ).addClass( "yourClass" );

Hasil

<p class="yourClass">Ini Paragraph yang akan di tambah nama class</p>

Perintah .removeClass dan .addClass dapat di gunakan secara bersama untuk beralih kelas elemen dari satu ke yang lain, seperti berikut:

 $( "p" ).removeClass( "myClass" ).addClass( "yourClass" );
 
perintah diatas digunakan untuk mengganti class 'myClass' dengan class 'yourClass' pada tag <p>.

Untuk menambah class bisa juga menggunakan perintah .attr("class", "NamaClassBaru")  seperti berikut : 

$( "p" ).attr("class","yourClass");

Baca Selengkapnya »

Style CSS Untuk Menghilangkan Garis Bintik-bintik Jejak Link

Pada saat kita membuat sebuah link dan ketika link yang kita buat tersebut di klik selalu meninggalkan jejak berupa garis bintik-bintik seperti border dotted. Untuk menghilangkan jejak tersebut sangatlah mudah cukup menambahkan style CSS sebagai berikut :

a:active{
  text-decoration:none;
  color:#ffffff;
  border:0px;
  -moz-outline-style:none;
}

a:focus{
  outline:none;
  -moz-outline-style:none;
}

Baca Selengkapnya »

.parent(), .parents() dan .children() pada JQuery

.parent() digunakan untuk menyeleksi elemen induk terdekat. 

.parents() digunakan untuk menyeleksi elemen induk pada level tertentu. 

.children() digunakan untuk menyeleksi anak elemen terdekat.

Kita mulai dengan .parent(). Misalnya kita mempunyai list seperti ini:

<ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li><a href="#">Item 3</a></li>

    <li>Item 4</li>

</ul>

Jika kita ingin menyeleksi elemen induk terdekat dari <a> agar dikenai CSS border berupa border:1px dotted black, maka yang perlu Anda lakukan adalah seperti ini:

$('a').parent().css('border', '1px dotted black');

Dengan begitu, elemen <li> yang menjadi induk dari elemen tersebut akan dikenai border dotted berwarna hitam. Namun berbeda dengan .parents(). Saat kita menggunakan .parents(), kita bisa bebas menentukan elemen induk level berapapun:

$('a').parents('ul').css('border', '1px dotted black');

Kode di atas tidak akan menyeleksi elemen <li> yang menjadi induk dari elemen <a> melainkan akan mengenai elemen <ul> yang menjadi elemen induk dari <a> dan juga <li>.

Untuk contoh bisa dilihat pada link  berikut

Sample .parent()

.children() hanya akan menyeleksi anak elemen level pertama saja, sedangkan anak elemen sejenis di bawahnya/di dalamnya tidak akan ikut terkena:

$('#luar').children().addClass('children');

Kode di atas akan menambahkan kelas children pada anak level pertama dari elemen #luar, sedangkan elemen-elemen selain anak pertama akan diabaikan.

Untuk contoh bisa dilihat pada link berikut

Sample .children()

Sumber 

Baca Selengkapnya »