Button Plugin Bootstrap

Button Plugin Bootstrap

Tutorial kali ini kita akan membahas Button plugin Bootstrap. Dengan plugin ini kita bisa menambahkan dalam beberapa interaksi seperti kontrol tombol atau membuat grup tombol untuk komponen lebih seperti toolbar.

Jika Anda ingin menyertakan fungsi plugin ini secara individual, maka kita akan perlu yang button.js. Lain, kita dapat menyertakan bootstrap.js atau diminimalkan dengan kita.min.js.

Loading State

Untuk menambahkan loading state dalam pemuatan tombol, cukup menambahkan data-loading-text = "Loading ..." sebagai atribut untuk elemen tombol seperti yang ditunjukkan dalamberikut contoh:

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading…" type="button"> Loading state

</button>

<script>

$(function() {

$(".btn").click(function(){

$(this).button('loading').delay(1000).queue(function() {

// $(this).button('reset');

});

});

});

</script>

Single Toggle

Untuk mengaktifkan Toggling (yaitu mengubah keadaan normal tombol ke keadaan dorongan dan sebaliknya wakil) dari satu tombol, menambahkan data-toggle = "buttons" sebagai atribut untuk elemen button seperti yang ditunjukkan dalam contoh berikut:

<button type=" button " class=" btn btn-primary " data-toggle=" button "> Single toggle </button>

Checkbox

Dalam hal membuat checkbox centang dan menambahkan Toggling, kita hanya menambahkan Data data atribut-toggle = "button" ke btn-group.

<div class="btn-group" data-toggle="buttons">

<label class="btn btn-primary">

<input type="checkbox"> Option 1

</label>

<label class="btn btn-primary">

<input type="checkbox"> Option 2

</label>

<label class="btn btn-primary">

<input type="checkbox"> Option 3

</label>

</div>

Radio

Demikian pula Anda dapat membuat grup input radio dan menambahkan Toggling untuk itu dengan hanya menambahkan data data atribut-toggle = "buttons" ke btn-group.

<div class="btn-group" data-toggle=" buttons ">

<label class=" btn btn-primary ">

<input type="radio" name="options" id="option1"> Option 1

</label>

<label class="btn btn-primary">

<input type="radio" name="options" id="option2"> Option 2

</label>

<label class="btn btn-primary">

<input type="radio" name="options" id="option3"> Option 3

</label>

</div>

Contoh berikut menunjukkan penggunaan metode :

<h2> Click on each of the buttons to see the effects of methods </h2>

<h4> Example to demonstrate .button('toggle') method </h4>

<div id="myButtons1" class="bs-example">

<button type="button" class="btn btn-primary"> Primary </button>

</div>

<h4> Example to demonstrate .button('loading') method </h4>

<div id="myButtons2" class="bs-example">

<button type="button" class="btn btn-primary" data-loading-text="Loading..."> Primary </button>

</div>

<h4> Example to demonstrate .button('reset') method </h4>

<div id="myButtons3" class="bs-example">

<button type="button" class="btn btn-primary"

data-loading-text="Loading...">Primary

</button>

</div>

<h4> Example to demonstrate .button(string) method </h4>

<button type="button" class="btn btn-primary" id="myButton4" data-complete-text="Loading finished"> Click Me </button>

<script type="text/javascript">

$(function () {

$("#myButtons1 .btn").click(function(){

$(this).button('toggle');

});

});

$(function() {

$("#myButtons2 .btn").click(function(){

$(this).button('loading').delay(1000).queue(function() {

});

});

});

$(function() {

$("#myButtons3 .btn").click(function(){

$(this).button('loading').delay(1000).queue(function() {

$(this).button('reset');

});

});

});

$(function() {

$("#myButton4").click(function(){

$(this).button('loading').delay(1000).queue(function() {

$(this).button('complete');

});

});

});

</script>