Tab Accordian Bubbling Library

Ada yang menyebutnya efek tirai  atau juga sliding door. namun jika kita gooling,   input kata atau istilah yang populer untuk efek ini adalah " accordian ".  contoh efek "Accordian" ini bisa saudara rasakan  langsung pada sidebar kanan blog ini paling atas:  Profile , Comment , Contact.

Seperti hal-nya Tab View yang lebih dulu populer di gunakan oleh para blogger lokal, efek ini juga merupakan library javascript dari YUI (  Yahoo User Interface ), namun di iris lagi menjadi Javascript Bubbling Library, yang menurut situs resminya lisensi bebas di gunakan.

" All components in the Bubbling Library have been released as open source under a BSD license and are free for all uses."

Selain tab " Accordian "  ini, banyak juga plugin yang tersedia pada Bubbling Library , kita langsung tinggal pake saja. tampa perlu nyegir. karena tersedia beberapa pustaka skrip dan framework untuk kita gunakan. mytechblogs

View-Demo | Download

Untuk menerapkan salah satu efek semisal tab " accordian"  ke dalam blog  kodenya cukup panjang, tapi jika membutuhkan bisa saudara lanjutkan membacanya.

1. Buka Tata-Letak - Edit Html. kemudian cari tag penutup

</head>

setelah itu masukan sebelum tag penutup tersebut . kode berikut ini.

kode Css.

<style type="text/css">
.myAccordion {
  float: left;
  margin-right: 15px;
}
h3{
padding: 8px;
color: #636363;
background-color: #ffffff;
background-image: url(http://lh3.ggpht.com/jaloee/
SGus4MMnuCI/AAAAAAAACIg/BQmSAeBbk0A/s144/h3bg.jpg);
background-position: top;
background-repeat: repeat-x;
font-weight: normal;
}
  .myAccordion .yui-cms-accordion .yui-cms-item {
    border: 1px solid #cccccc;
    width: 200px;
  }
    .myAccordion .yui-cms-accordion .yui-cms-item h3 {
      margin: 0px;
    }
        .myAccordion .yui-cms-accordion .yui-cms-item .accordionToggleItem {
          background: url(http://www.geocities.com/jaloea/accordion.gif) no-repeat 0px 0px;
          text-decoration: none;
          padding-left: 20px;
          display: block;
        }
        .myAccordion .yui-cms-accordion .yui-cms-item.selected .accordionToggleItem {
          background: url(http://www.geocities.com/jaloea/accordion.gif) no-repeat 0px -100px;
        }
    .myAccordion .yui-cms-accordion .yui-cms-item .bd {
        height: 0px;
        overflow: hidden;
        background-color: #fff;
    }
        .myAccordion .yui-cms-accordion .yui-cms-item .bd .fixed {
            overflow: hidden;
            padding: 5px;
            height: 230px;
        }
</style>

 

Dan kode Javascript ini.

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js">
</script>
<script type="text/javascript" src="http://js.bubbling-
library.com/1.5.0/build/bubbling/bubbling.js"></script>
<script type="text/javascript" src="http://js.bubbling-
library.com/1.5.0/build/accordion/accordion.js"></script>

 

Simpan Perubahan

2. Kemudian tambahkan sebuah Elemen Html/JavaScript .

Setelah terbuka masukan kode berikut ini.

<div class="myAccordion">   
<div class="yui-cms-accordion persistent rollover slow">
<div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd">
<div class="fixed">
<p>

Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div>
<div class="yui-cms-item selected">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd" style="height: auto;">
<div class="fixed">
<p>
Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div> <div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd">
<div class="fixed">
<p>
Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div> <div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Judul/Title</a></h3>
<div class="bd">
<div class="fixed">
<p>
Content Kita : Tulisan / Javascript semisal Shoutbox, Ajax Feed dll.

</p>
</div>
</div>
</div>
</div>
</div> 

 

Technorati tags: YUI LIBRARY

Page views this post: reader