Bootstrap - Düğme Eklentisi

Düğmeler Önyükleme Düğmeleri bölümünde açıklanmıştır . Bu eklenti ile kontrol düğmesi durumları gibi bazı etkileşimler ekleyebilir veya araç çubukları gibi daha fazla bileşen için düğme grupları oluşturabilirsiniz.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, button.js. Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde belirtildiği gibi , bootstrap.js'yi veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Yükleme Durumu

Bir düğmeye yükleme durumu eklemek için, data-loading-text = "Loading..." aşağıdaki örnekte gösterildiği gibi düğme öğesinin bir niteliği olarak -

<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>

Düğmeye tıkladığınızda çıktı aşağıdaki resimde görüldüğü gibi olacaktır -

Tek geçiş

Tek bir düğmeyle geçişi etkinleştirmek için (yani, bir düğmenin normal durumunu bir basma durumuna ve tersini), data-toggle = "button" aşağıdaki örnekte gösterildiği gibi düğme öğesinin bir niteliği olarak -

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

Onay kutusu

Sadece veri özelliğini ekleyerek onay kutuları grubu oluşturabilir ve buna geçiş yapabilirsiniz. data-toggle = "buttons" için 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>

Radyo

Benzer şekilde, bir grup radyo girişi oluşturabilir ve sadece veri özelliğini ekleyerek geçiş yapabilirsiniz. data-toggle = "buttons" için 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>

Kullanım

Düğmeler eklentisini etkinleştirebilirsiniz via JavaScript aşağıda gösterildiği gibi -

$('.btn').button()

Seçenekler

Seçenek yok.

Yöntemler

Aşağıda, buton eklentisi için faydalı yöntemlerden bazıları verilmiştir -

Yöntem	Açıklama	Misal
düğme ('geçiş')	İtme durumunu değiştirir. Düğmeye, etkinleştirildiği görünümü verir. Ayrıca, bir düğmenin otomatik olarak değiştirilmesini,data-toggle öznitelik.	`$().button('toggle')`
.button ('yükleniyor')	Yükleme sırasında, düğme devre dışı bırakılır ve metin, data-loading-text düğme öğesinin özelliği	`$().button('loading')`
.button ('sıfırla')	Orijinal içeriği metne geri getirerek düğme durumunu sıfırlar. Bu yöntem, düğmeyi birincil duruma geri döndürmeniz gerektiğinde kullanışlıdır.	`$().button('reset')`
.button (dize)	Bu yöntemdeki dizge, kullanıcı tarafından bildirilen herhangi bir dizeyi ifade eder. Düğme durumunu sıfırlamak ve yeni içerik getirmek için bu yöntemi kullanın.	`$().button(string)`

Misal

Aşağıdaki örnek, yukarıdaki yöntemlerin kullanımını göstermektedir -

<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>