Tutorial Programming

Plugin Javacricpt Bootstrap II 

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
 photo collapse.png
    • Versi Simpel (Perhatikan atribut data-target dan id nya, pastikan sama ya )
1
2
3
4
5
6
7
<button class="btn btn-danger btn-mini" data-toggle="collapse" data-target="#demo">
  Klik Saya
</button>
      
<div id="demo" class="collapse in"
  Change this and that and try again. Duis mollis, est non commodo luctus, 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 )
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
<div class="accordion" id="accordion2">
    <div class="accordion-group">
    <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Collapsible Group Item #1</a>
        </div>
         
    <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                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>
     
  <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">Collapsible Group Item #2</a>
        </div>
         
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
                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>
     
  <div class="accordion-group">
    <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">Collapsible Group Item #3</a>
        </div>
         
    <div id="collapseThree" class="accordion-body collapse">
            <div class="accordion-inner">
                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>
</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.
 photo dd.png
1
2
3
4
5
6
7
8
9
10
11
12
<div  style="padding:10px;">
    <div class="dropdown" id="menu1">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#menu1"> Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <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
 photo tabs.png
Berikut HTML nya
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
<ul id="tab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">HTML</a></li>
    <li><a href="#profile" data-toggle="tab">CSS</a></li>
     
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
        <li><a href="#dropdown1" data-toggle="tab">JS</a></li>
                <li><a href="#dropdown2" data-toggle="tab">AJAX</a></li>
            </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="home">
        <p>HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML </p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS  CSS </p>
    </div>
    <div class="tab-pane fade" id="dropdown1">
        <p>JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS   JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS  JS </p>
    </div>
    <div class="tab-pane fade" id="dropdown2">
        <p>AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  AJAX  </p>
    </div>
</div>

Typehead

 photo th.png
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
Cara pemakaiannya sangat mudah, lihat kode html dibawah ini.
1
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Ahmedabad","Akola","Asansol","Aurangabad","Bangaluru","Baroda","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

No comments:

Post a Comment

Tutorial Programming Designed by Templateism | Ary EJFA Copyright © 2015

Theme images by richcano. Powered by Blogger.