Home Archives for 02/13/16

Cara membuat accordion dengan Jquery UI

00:45:00 |
Selamat sore semua, berjumpa lagi bersama saya nih.Sudah lama kita tak jumpa, sorry karena belakangan ini tidak sempat buat kan artikel untuk teman-teman setia Biongo Attacker.Karena pada waktu itu saya sibuk kerjain project, jadi agak sibuk dan lupa deh untuk buat artikel di blog ini.Dan puji Tuhan di hari ini kita masih bisa bertemu kembali dengan tubuh yang sehat dan yang pasti Tuhan selalu melindungi kalian semua hehehe.Pada hari ini kita akan membahas tentang cara membuat accordion dengan Jquery UI.Disini saya tidak akan jelaskan apa itu Jquery UI dan apa itu Accordion, pasti para teman-teman akan tahu sendiri apa itu accordion dengan cara mengikuti tutorial ini.Maka dari itu mari kita langsung saja ke tutorial nya atau caranya.

Untuk melanjutkan tutorialnya saya sarankan teman-teman sudah belajar dasar Javascript terlebih dahulu, untuk tutorial dasar Javascript, kami tidak menyidiakannya, mungkin teman-teman bisa mencari tutorial di google.Oke saya anggap teman-teman yang membaca tutorial ini sudah belajar Javascript dasar.Mari kita lanjut.

Langkah pertama yang harus kita lakukan adalah menghubungkan plugin jquery ui ini dengan script yang akan kita taruh untuk membuat accordion.Berikut scriptnya.

 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jqu  ery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Setelah itu kita akan membuat accordion dan beserta isinya.Berikut scriptnya.

<div id="accordion" class="css">
    <u>Tentang</u>
    <div>
       <!-- disini kalian isi sesuai menu accordion -->
       <!-- Kata-kata dibawah ini bisa kalian ganti sesuai kata kalian sendiri  -->
       <i> Hallo nama saya Alsaskar Mirando, saya adalah founder dari Biongo Attacker.Saya juga anak yang suka tertawa. </i>
    </div>
    <u>Tutorial</u>
    <div>
      <!-- disini kalian isi sesuai menu accordion -->
      <!-- Kata-kata dibawah ini bisa kalian ganti sesuai kata kalian sendiri -->
      <b><i>Cara Membuat Accordion dengan Jquery UI bersama - BIONGO ATTACKER</i></b>
    </div>
    <u>Hubungi Kami</u>
    <div>
      <!-- disini kalian isi sesuai menu accordion -->   
      <!-- Kata-kata dibawah ini bisa kalian ganti sesuai kata kalian sendiri -->     
      <b><i>Fanspage : Biongo Attacker </i></b><br>
      <b><i>Twitter : @BiongoAttacker </i></b><br>
      <b><i>Blog : biongo-attacker.blogspot.com </i></b>
    </div>
 </div>
 <br>
 <div align="center">
  <b>Jangan lupa untuk kunjungi selalu Blog kami </b>
 </div>

Dan yang terakhir adalah menaruh script javascriptnya kedalam semua script yang kalian sudah copy tadi.Berikut sciptnya.

 

  <script type="text/javascript">
     $(document).ready(function(){
       $('#accordion').accordion();
     });
 </script>
Untuk script seluruhnya seperti ini.

<html>
<head>
  <title> Belajar Membuat Accordion </title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

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

</head>

 <!-- bgcolor : untuk membuat warna pada background -->

<body bgcolor="aqua">
  <div id="accordion" class="css">
    <u>Tentang</u>
    <div>
       <!-- disini kalian isi sesuai menu accordion -->
       <!-- Kata-kata dibawah ini bisa kalian ganti sesuai kata kalian sendiri  -->
       <i> Hallo nama saya Alsaskar Mirando, saya adalah founder dari Biongo Attacker.Saya juga anak yang suka tertawa. </i>
    </div>
    <u>Tutorial</u>
    <div>
      <!-- disini kalian isi sesuai menu accordion -->
      <!-- Kata-kata dibawah ini bisa kalian ganti sesuai kata kalian sendiri -->
      <b><i>Cara Membuat Accordion dengan Jquery UI bersama - BIONGO ATTACKER</i></b>
    </div>
    <u>Hubungi Kami</u>
    <div>
      <!-- disini kalian isi sesuai menu accordion -->   
      <!-- Kata-kata dibawah ini bisa kalian ganti sesuai kata kalian sendiri -->     
      <b><i>Fanspage : Biongo Attacker </i></b><br>
      <b><i>Twitter : @BiongoAttacker </i></b><br>
      <b><i>Blog : biongo-attacker.blogspot.com </i></b>
    </div>
 </div>
 <br>
 <div align="center">
  <b>Jangan lupa untuk kunjungi selalu Blog kami </b>
 </div>
 </body>
 </html>

Dan lihat hasilnya, jika semua berhasil dengan baik maka hasilnya akan seperti ini.


Kalau ada yang bingung bisa langsung berkomentar di bawah.
oke sekian dulu tutorial nya, semoga bermanfaat.
Subscribe to: Posts (Atom)