جلسه چهل و یک از دوره آموزش Bootstrap : پلاگین Button

پلاگین Button

پلاگین های بوت استرپ

کلیدها در فصل «کلیدهای بوت استرپ» توضیح داده شده اند. با استفاده از این پلاگین ، می توانیم در برخی از تعاملات مانند حالت کلید ، کنترل اضافه کنیم یا گروه هایی از کلیدها را برای مؤلفه های بیشتری مانند نوار ابزار (toolbar) ایجاد کنیم.

اگر بخواهیم که این پلاگین را به صورت جداگانه وارد کنیم ، در این صورت به فایل button.js نیاز خواهیم داشت. در غیر این صورت ،  همان طور که در مقاله "مروری بر پلاگین های بوت استرپ" ذکر شد ، می توانیم از یکی از فایل های bootstrap.js یا bootstrap min.js.min.js استفاده نماییم.

وضعیت بارگذاری (loading)

برای افزودن یک وضعیت loading به یک کلید ، به سادگی مقدار "...data-loading-text=”Loading را به عنوان یک ویژگی به عنصر Button اضافه می کنیم ، همان طور که در مثال زیر نشان داده شده است :

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

وقتی که روی کلید کلیک می شود ، خروجی مطابق تصویر زیر نمایش داده می شود :

Toggle تکی

برای فعال کردن toggle (یعنی حالت عادی یک کلید به وضعیت فشار و بالعکس تبدیل می شود) روی یک کلید تکی ، مقدار "data-toggle = "button  را به عنوان یک ویژگی برای عنصر button اضافه می کنیم ، همان طور که در مثال زیر نشان داده شده است :

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

خروجی قطعه کد فوق به صورت زیر می باشد :

Chechbox

ما می توانیم گروهی از checkbox ها را ایجاد کردن و toggle شدن ، از طریق افزودن ویژگی داده "data-toggle=”buttons به 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

به طور مشابه ، می توانیم یک گروه از ورودی های radio را ایجاد کرده و به راحتی toogle شدن را با افزودن ویژگی داده "data-toggle = "buttons  به 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>	

خروجی قطعه کد فوق به صورت زیر می باشد :

نحوه کاربرد

ما می توانید پلاگین Button را از طریق جاوا اسکریپت همان طور که زیر نشان داده شده است ، فعال نماییم :

$('.btn').button()

آپشن ها

این پلاگین آپشنی ندارد

متدها

در جدول زیر برخی از متدهای کاربردی برای پلاگین Buttons ارائه شده است :

$().button('toggle')

$().button('loading')

$().button('reset')

$().button(string)

مثال

مثال زیر کاربرد متدهای فوق را نشان می دهد :

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

خروجی قطعه کد فوق به صورت زیر می باشد :