آموزش پلاگین دکمه در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش پلاگین دکمه در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پلاگین دکمه در بوت استرپ خواهیم پرداخت.

با استفاده از این افزونه می توانید برخی از تعاملات مانند حالت های دکمه کنترل را اضافه کنید یا گروههایی از دکمه ها را برای اجزای بیشتری مانند نوار ابزار ایجاد کنید.

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

حالت بارگیری

برای افزودن حالت بارگیری به یک دکمه، به سادگی داده “…data-loading-text = “Loading را به عنوان ویژگی به عنصر دکمه اضافه کنید همانطور که در مثال زیر نشان داده شده است –

&lt;button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button"&gt; 
   Loading state 
&lt;/button&gt;

&lt;script&gt;
   $(function() { 
      $(".btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
         });        
      });
   });  
&lt;/script&gt;

Loading state

</button>

$(function() {

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

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

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

});

</script>

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

toggle تنها

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

&lt;button type = "button" class = "btn btn-primary" data-toggle = "button"&gt;
   Single toggle
&lt;/button&gt;

Single toggle

</button>

چک باکس

شما می توانید به سادگی با افزودن مشخصه data data-toggle = “buttons” به btn-group گروه چک باکس ایجاد کرده و toggle را به آن اضافه کنید.

&lt;div class = "btn-group" data-toggle = "buttons"&gt;
   &lt;label class = "btn btn-primary"&gt;
      &lt;input type = "checkbox"&gt; Option 1
   &lt;/label&gt;
   
   &lt;label class = "btn btn-primary"&gt;
      &lt;input type = "checkbox"&gt; Option 2
   &lt;/label&gt;
   
   &lt;label class = "btn btn-primary"&gt;
      &lt;input type = "checkbox"&gt; Option 3
   &lt;/label&gt;
&lt;/div&gt;

<input type = "checkbox"> Option 1

</label>

<input type = "checkbox"> Option 2

</label>

<input type = "checkbox"> Option 3

</label>

</div>

رادیو

به همین ترتیب می توانید گروهی از ورودی های رادیویی ایجاد کرده و به سادگی با افزودن ویژگی “data-toggle = “buttons به گروه btn دکمه لغزنده را به آن اضافه کنید.

&lt;div class = "btn-group" data-toggle = "buttons"&gt;
   &lt;label class = "btn btn-primary"&gt;
      &lt;input type = "radio" name =" options" id = "option1"&gt; Option 1
   &lt;/label&gt;
   
   &lt;label class = "btn btn-primary"&gt;
      &lt;input type = "radio" name = "options" id = "option2"&gt; Option 2
   &lt;/label&gt;
   
   &lt;label class = "btn btn-primary"&gt;
      &lt;input type = "radio" name = "options" id = "option3"&gt; Option 3
   &lt;/label&gt;
&lt;/div&gt;

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

</label>

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

</label>

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

</label>

</div>

گزینه ها

هیچ گزینه ای وجود ندارد

متدها

در زیر برخی از روش های مفید برای پلاگین دکمه ها آورده شده است –

متد

توضیح

مثال

button(‘toggle’)

وضعیت فشار را تغییر می دهد. به دکمه ظاهر می شود که فعال شده است. با استفاده از ویژگی data-toggle می توانید ضامن خودکار دکمه را نیز فعال کنید.

$().button('toggle')

1	$().button('toggle')

.button(‘loading’)

هنگام بارگیری ، دکمه غیرفعال شده و متن به گزینه ویژگی data-loading-text عنصر دکمه تغییر می یابد

$().button('loading')

1	$().button('loading')

.button(‘reset’)

حالت دکمه بازنشانی، محتوای اصلی را به متن بازگرداند. این روش زمانی مفید است که باید دکمه را به حالت اولیه برگردانید

$().button('reset')

1	$().button('reset')

.button(string)

رشته در این روش به هر رشته اعلان شده توسط کاربر گفته می شود. برای تنظیم مجدد حالت دکمه و آوردن محتوای جدید از این روش استفاده کنید.

$().button(string)

1	$().button(string)

مثال

مثال زیر استفاده از روش های فوق را نشان می دهد –

&lt;h2&gt;Click on each of the buttons to see the effects of methods&lt;/h2&gt;
&lt;h4&gt;Example to demonstrate .button('toggle') method&lt;/h4&gt;

&lt;div id = "myButtons1" class = "bs-example"&gt;
   &lt;button type = "button" class = "btn btn-primary"&gt;Primary&lt;/button&gt;
&lt;/div&gt;

&lt;h4&gt;Example to demonstrate  .button('loading') method&lt;/h4&gt;

&lt;div id = "myButtons2" class = "bs-example"&gt;
   &lt;button type = "button" class = "btn btn-primary" data-loading-text = "Loading..."&gt;
      Primary
   &lt;/button&gt;
&lt;/div&gt;

&lt;h4&gt;Example to demonstrate .button('reset') method&lt;/h4&gt;

&lt;div id = "myButtons3" class = "bs-example"&gt;
   &lt;button type = "button" class = "btn btn-primary" data-loading-text = "Loading..."&gt;
      Primary
   &lt;/button&gt;
&lt;/div&gt;

&lt;h4&gt;Example to demonstrate  .button(string) method&lt;/h4&gt;

&lt;button type = "button" class = "btn btn-primary" id = "myButton4" 
   data-complete-text = "Loading finished"&gt;
   Click Me
&lt;/button&gt;

&lt;script type = "text/javascript"&gt;
   $(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');
         });        
      });
   }); 
&lt;/script&gt;

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

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

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

</div>

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

Primary

</button>

</div>

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

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>

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

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش پلاگین دکمه در بوت استرپ

آموزش پلاگین دکمه در بوت استرپ

حالت بارگیری

toggle تنها

چک باکس

رادیو

گزینه ها

متدها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش پلاگین دکمه در بوت استرپ

حالت بارگیری

toggle تنها

چک باکس

رادیو

گزینه ها

متدها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه