Plugin Javascript Bootstrap 2

(1)

Plugin Javascript Bootstrap 2

Oleh: ricky orlando napitupulu

Salam bro/sis :) Setelah sebelumnya saya memberikan tutorial tentang

plugin JS jquery yang super keren. Nah kini saya tambahin lagi lanjutanya.

let's roll :D Sebelumnya siapkan dulu file yang dibutuhkan yaitu

bootstrap.css jquery.js dan bootstrap.js Jika ditutorial sebelumnya sudah

download file ini kamu tidak perlu mendownload ulang lagi. Kamu bisa

download disini Jika sudah didownload jang...

Salam bro/sis :) Setelah sebelumnya saya memberikan tutorial tentang plugin JS jquery yang super keren. Nah kini saya tambahin lagi lanjutanya. let's roll :D

Sebelumnya siapkan dulu file yang dibutuhkan yaitu bootstrap.css jquery.js dan bootstrap.js Jika ditutorial sebelumnya sudah download file ini kamu tidak perlu mendownload ulang lagi.

Kamu bisa download disini

Jika sudah didownload jangan dibiarin aje ye :D di embed ke dokumen html nya :D Jika sudah yuk kita mulai

Collapse

❍

Collapse ini bisa dibilang satu darah dengan yang namanya spolier, Tau spoiler kan ? Nah jadi collapse ini dapat menyembunyikan dan menampilkan suatu konten

Versi Simpel (Perhatikan atribut data-target dan id nya, pastikan sama ya )

■

Klik Saya </button>

(2)

nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

</div>

Versi agak keren :D (Coba dihayati dulu skripnya pasti ngerti cara ngotak-atiknya, kalo ga tau

■

boleh ditanyakan )

<a class="accordion-toggle" data-toggle="collapse"

data-parent="#accordion2" href="#collapseOne">Collapsible Group Item #1</a>

</div>

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non

cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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

data-parent="#accordion2" href="#collapseTwo">Collapsible Group Item #2</a>

</div>

(3)

data-parent="#accordion2" href="#collapseThree">Collapsible Group Item #3</a>

</div>

</div>

Jika kamu ingin secara default ada yang sudah terbuka kamu dapat menghapus class collapse berikut : class="accordion-body collapse"

Dropdown

❍

Pada umumnya plugin js bootstrap yang satu ini diimplementasikan pada menu navbar.

(4)

<a class="btn dropdown-toggle" data-toggle="dropdown" href="#menu1"> Dropdown <b class="caret"></b></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li>

<li><a href="#">Separated link</a></li> </ul>

</div> </div>

Tabs

❍

hmmm.... bingung mau kasi deskripsi gimana, coba liat penampakanya pasti tau :D

Berikut HTML nya

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

</li> </ul>

(5)

</div> </div>

Typehead

❍

Typehead ini adalah sebuah textbox yang mendukung fitur suggestion atau textbox nya menyediakan pilihan data sesuai dengan huruf yang diinput, nah contohnya anda ketik huruf a nah ntar muncul da data-data yang ada huruf a nya

(6)

data-provide="typeahead" data-items="4"

data-source="["Ahmedabad","Akola","Asansol","Aurangabad","Bangaluru","Baro da","Belgaon","Berhumpur","Calicut","Chennai","Chapra","Cherapunji"]">

Penjelasan : Span3 bisa kamu ganti angka 3 nya jadi angka hingga 12, ini untuk panjang dari textbox nya. data-items berfungsi untuk mengatur banyak maksimal data sugesti yang ada.

Gimana keren bukan :D ?

Sekian tutorial kali ini, See you on next tutorial

Download Demo

Tentang Penulis

ricky orlando napitupulu

Nothing special :) Saya seorang lelaki, mahasiswa, blogger, cinta musik dan juga sedang mencoba ilmu desain grafis. Tidak banyak pengetahuan yang bisa saya bagikan, Namun saya akan sangat senang membagikan pengetahuan tersebut bila dibutuhkan :).