Arabiyatuna

Mengubah warna homepage menggunakan jQuery

—

by

Arabiyatuna.Com
in

dari : http://www.koder.web.id/tutorial-jquery/mengubah-warna-homepage-menggunakan-jquery/

Tanpa basa basi, langsung aja. para penonton sekalian, sekarang kita akan sama – sama belajar membuat sebuah halaman web bisa diganti-ganti themes nya dengan menunggukan framework javascript yang sangat handal, yaitu JQUERY. Tutorial ini terinspirasi dari my.yahoo.com saat dapat tugas membuat portal web internal tapi yang akan kita coba disini adalah mensimulasikan bagaimana jquery bisa menghandle style dari sebuah halaman

OK mulai, karena ini sifatnya simulasi, jadi CSS dan javascriptnya digabung ke dalam 1 file

DEMO APPDOWNLOAD

1.Pembuatan layout HTML

Langkah awal kita buat terlebih dahulu layout dari homepagenya

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
    <div class="head">HEADER</div>
    <div class="wrapper">
         <div class="leftPanel">
             <!-- link untuk ganti themes -->
             <a href="#" class="biru">Biru</a> |
             <a href="#" class="merah">Merah</a> |
             <a href="#" class="hijau">Hijau</a>
             <!-- end links -->
            <h3>Judul 1</h3>
            <div class="contentModul">Content</div>
        </div> 
        <div class="rightPanel">
          <h3>Detail</h3>
          <div class="contentModul">
            Content Kanan
          </div>
        </div>
    </div>

2. Membuat Css Standar

Setelah membuat layoutnya lalu buatlah style standarnya. Css Ini adalah css pertama kali ketika homepage di tampilan.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
body {
    font-family:arial;
    font-size:11px;
}
 
h3, ul, h4 {
   padding:0px;
   margin:0px;
}
.head {
   width:800px;
   border:1px solid blue;
   height:100px;
   background:#315091;
}
.wrapper{
   width:800px;
   float:left;
   border:1px solid blue;
}
.leftPanel {
   float:left;
   width:200px;
   border:1px dotted blue;  
   margin:5px;
}
 
.leftPanel h3 {
   background:#929db5;
}
 
.rightPanel{
   float:left;
   width:550px;
   border:1px dotted blue;
   margin:5px;
}
 
.rightPanel h3 {
   background:#929db5;
}

3. Membuat Additonal Style Themes

Selanjutnya tambahkan style themes, disini kita akan coba membuat 3 themes, yaitu biru(default), merah, dan hijau. Nah sebelumnya, kita tentukan dulu DOM apa aja yang akan berubah nantinya, apakah header saja? ataukah panel kiri saja?ataukah semuanya?kali ini yang ingin kita ganti-ganti adalah :

border dan background Header -> .head
Border Panel kiri dan kanan -> .leftPanel,.rightPanel
background Title -> .leftPanel h3 dan .rightPanel h3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
.merah .head{
    border:1px solid #d06c36;
    background:#d06c36;
}
.merah .leftPanel,.merah .rightPanel{
    border:1px dotted red;
}
.merah .leftPanel h3, .merah .rightPanel h3{
   background:#dba07f;
}
.hijau .head{
   border:1px solid #8fc960;
   background:#8fc960;
}
.hijau .leftPanel,.hijau .rightPanel{
   border:1px dotted green;
}
.hijau .leftPanel h3, .hijau .rightPanel h3{
   background:#b6d1a0;
}

4. Membuat Script Javascript

Javascriptnya simple aja, yaitu membuat agar jquery mengganti attribut “class”
di body sesuai keinginan

1
2
3
4
5
6
7
 
<script>
$(document).ready(function(){
  $(".leftPanel > a").click(function(){
            $('body').attr('class',$(this).attr('class')); 
    } )
})
</script>

Sederhana bukan??? dan Penontonpun menjawab “Bukaaan”

Share

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *