Sabtu, 19 November 2016

Manipulasi Halaman Website Dengan jQuery

Posted By: Unknown on 22.35


Mengenal jQuery

Jquery adalah library atau kumpulan kode Javascript siap  pakai. Keunggulan menggunakan jquery dibandingkan dengan javascript standar, yaitu menyederhanakan kode javascript dengan cara memanggil fungsi-fungsi yang disediakan oleh jquery. Javascript sendiri merupakan bahasa scripting yang bekerja di sisi client/browser sehingga website bisa lebih interaktif.
Jquery pertama kali dirilis tahun 2006 oleh John Resig. Jquery menjadi sangat populer hingga telah digunakan pada banyak website termasuk website kelas dunia seperti Google, Amazon, Twitter, ESPN, dan lain-lain.
     Ada banyak sebab jquery menjadi sangat populer, diantaranya:
·      Jquery kompatible dengan banyak browser.
·      Jquery mendukung semua versi CSS.
·      Ukuran jquery sangat kecil, sekitar 20kB.
·      Dokumentasi jquery yang Iengkap.
·      Dukungan komunitas terhadap jquery.
·      Tersedianya plugin jquery yang sangat beragam.
          Sebab terakhir dl atas merupakan salah satu alasan utama mengapa banyak pengembang website mengunakan jquery.


Cara manipulasi halaman website dengan jQuery

Untuk memulai manipulasi halaman website dengan jQuery maka terlebih dahulu harus memiliki framework jQuery itu sendiri, framework ini dapat didownload pada situs resminya yaitu www.jquery.com.
Setelah didownload untuk menggunakannya terlebih dahulu harus menautkan kedalam form html sintaks dasarnya adalah:
   <script type="text/javascript" src="jenis/lokasi file jquery anda"></script>
Contoh:
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
Demikian sedikit perkenalan tentang jQuery, jika teori saja maka dapat dipastikan tidak akan paham maka dari itu berikut ini saya akan jabarkan beberapa contoh penerapan jQuery untuk memanipulasi halaman website yang di buat agar lebih responsif.

1.      Menu Dropdown
Pada bagian ini akan dijelaskan bagaimana cara membuat menu yang lebih responsif dimana ketika memilih menu pada halaman website maka akan tampil submenunya secara otomatis, 
Gambar 1.1 Tampilan menu dropdown

           
Gambar 1.2 Tampilan menu dropdown

untuk membuatnya terlebih dahulu membuat file berekstensi .html kemudian pastekan koding berikut yang telah diberi nama index.html, untuk melihat kodingnya silahkan klik tombol buka, begitu pula untuk menutupnya, jangan lupa menyiapkan bahan utamanya yaitu jQuery, jQuery ini yang nantinya akan ditautkan pada html, seperti yang telah saya jelaskan diatas.
     index.html:
<!doctype html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Manipulasi Halaman Website</title>
     <link rel="stylesheet" href="style.css">
    
     <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
     <script type="text/javascript" src="twd-menu.js"></script>

</head>
<body>
<div class="container">
     <!-- Header -->
     <header>
       <font align="center"> <h1>Menu Dropdown </h1></font>
      
     </header>
     <!-- /Header -->
    
     <div class="content">
       <nav>
              <ul id="nav">
                  <li><a href="#">Beranda</a></li>
                  <li><a href="#">Tentang</a></li>
                     <li><a href="#">web desain</a>
                             <ul>
                          <li><a href="#">CSS</a>
                            <ul>
                                  <li><a href="#">CSS 1</a></li>
                                  <li><a href="#">CSS 2</a>  
                                                </li>
                            </ul>
                          </li>
                          <li><a href="#">CSS 3</a></li>
                          <li><a href="#">Bootsrap</a></li>
                    </ul>
                      </li>
                  <li><a href="#">Latihan</a>
                    <ul>
                          <li><a href="#">HTML</a>
                            <ul>
                                  <li><a href="#">HTML 1</a></li>
                                  <li><a href="#">HTML 2</a> 
                                                </li>
                            </ul>
                          </li>
                          <li><a href="#">CSS</a></li>
                          <li><a href="#">PHP</a></li>
                    </ul>
                  </li>
              </ul>
       </nav> <!-- /Navigation -->
     </div> <!-- /Content -->
    
</div> <!-- /Container -->

</body>
</html>

untuk mengatur tampilannya buat file lagi yang berekstensi .css kemudian pastekan koding berikut yang telah diberi nama style.css, untuk melihat kodingnya silahkan klik tombol buka, begitu pula untuk menutupnya
     style.css :
body{
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.container{
width: 800px;
padding:20px;
margin: 50px auto;
border-top: 5px solid blue;
background: #f4f4f4;
overflow: hidden;
}
.content{
       height: 200px;
}

#nav, #nav ul{
       margin:0;
       padding:0;
       list-style-type:none;
       list-style-position:outside;
       position:relative;
       line-height:1.5em;
}

#nav a{
       display:block;
       padding:5px 5px;
       border:1px solid blue;
       color:#fff;
       text-decoration:none;
       background-color:blue;
       padding-left:20px;
}

#nav a:hover{
       background-color:#fff;
       color:#333;
}

#nav li{
       float:left;
       position:relative;
}

#nav ul {
       position:absolute;
       display:none;
       width:12em;
       top:2.3em;
}

#nav li ul a{
       width:12em;
       height:auto;
       float:left;
}

#nav ul ul{
       top:auto;
}   

#nav li ul ul {
       left:12em;
       margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
       display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
       display:block;
   }


Demo Klik | DISINI

      Demikian sedikit perkenalan dari saya tentang jQuery dan implementasinys dalam ilmu website, sebenarnya masih banyak lagi yang dapat dilakukan library jQuery untuk memanipulasi halaman website seperti membuat slide gambar pada halaman utama, animasi cursor, background bentuk slide, animasi loading dll. berhubung jadwal yang padat karena tuntutan kuliah dan kerja maka tutorialnya saya cukupkan sampai disini dulu, emm selanjutnya saya akan mencoba membuat yang agak sulit yaitu "Galeri website responsif" seperti ini.
         Demo Klik | DISINI
                  
         Penasaran.. tetap pantengin laman saya yaa gan, selamat mencoba dan semoga berhasil         ^ ^

Bersambung.....
Read More
Langganan: Komentar (Atom)

Copyright @ 2016 Muhammad Janawi Al-Islami.