按钮插件概述

  之前我们学习过按钮一章,在里面我们创建了按钮,并学习了简单改变按钮的状态(由激活改成不激活),其实借助于BootstrapAPI以及Java Script我们可以为按钮添加更多的功能以及状态

加载状态

  创建加载状态需要用到Java Script

  • 创建基本样式按钮
  • 在按钮中添加data-loading-text="loading"," "中为加载状态下按钮显示的文本
  • 利用Java Script添加互动,按钮点击事件发生后,按钮改变为加载状态

Java Script代码(点击按钮状态改变)

$(function(){
   $('.btn').click(function(){
     $(this).button('loading')});
});

案例代码

  <div class="container">
        <button class="btn btn-primary" type="button" data-loading-text="loading..">点击改变按钮状态</button>
  </div>
  <script>
    $(function () {
        $(".btn").click(function () {
            $(this).button('loading')
        })
    })
 </script>

运行结果

 点击前 Bootstrap学习日记之按钮插件-LMLPHP   点击后 Bootstrap学习日记之按钮插件-LMLPHP,鼠标悬停时样式也发生改变。

按钮的按压状态

  如果你想将按钮的状态改为按压状态,那么只需简单添加data-toggle="button"即可

  <div class="container">
        <button class="btn btn-primary" type="button" data-toggle="button">点击改变按钮状态</button>
  </div>

运行结果

 点击前Bootstrap学习日记之按钮插件-LMLPHP  点击后Bootstrap学习日记之按钮插件-LMLPHP

单选按钮

  假设现在你希望创建一个单选按钮,点击按钮时,每个按钮的状态发生改变。那么你可以用到data="buttons"。

<body>
  <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary">
          <input type="radio" name="options" id="options1">选项1
      </label>
      <label class="btn btn-primary">
          <input type="radio" name="options" id="options2">选项2
      </label>
      <label class="btn btn-primary">
          <input type="radio" name="options" id="options3">选项3
      </label>
  </div>
</body>

运行结果

点击前Bootstrap学习日记之按钮插件-LMLPHP点击选项1Bootstrap学习日记之按钮插件-LMLPHP点击选项2Bootstrap学习日记之按钮插件-LMLPHP

方法

Bootstrap学习日记之按钮插件-LMLPHP

案例

 <div class="container">
      <div class="bs-example" id="myButton1" >
      <p>toggle方法</p>
      <button class="btn btn-primary" type="button">原始</button>
      </div>
      <div id="myButton2">
      <p>loading方法</p>
      <button class="btn btn-primary" data-loading-text="loading"  type="button">原始</button>
      </div>
      <div id="myButton3">
      <p>reset方法</p>
      <button class="btn btn-primary"  data-loading-text="loading" type="button">原始</button>
      </div>
      <div id="myButton4">
      <p>string方法</p>
      <button class="btn btn-primary" type="button" data-complete-text="Loading finished">原始</button>
      </div>
  </div>
  <script>
    $(function () {
        $('#myButton1 .btn').click(function () {
            $(this).button('toggle');
        });
    });
    $(function () {
        $('#myButton2 .btn').click(function () {
            $(this).button('loading');
        });
    });
    $(function () {
        $('#myButton3 .btn').click(function () {
            $(this).button('loading').delay(1000).queue(function () {
                $(this).button('reset');
            });
        });
    });
    $(function () {
        $('#myButton4 .btn').click(function () {
            $(this).button('loading').delay(1000).queue(function () {
                $(this).button('complete');
            });
        });
    });
</script>

代码解读:toggle方法以及loading方法跟之前我们学的都一样,但是,reset以及string方法不同,看Java Script中,我们是先加载了loading方法才用reset以及string方法  注意这里我犯了一个很基本的错误!!!<button>内不该添加ID属性。

  这里解释一下String方法,它借助点击事件,将按钮中的文本改变成你需要的文本,其本质是('complete方法'),如例子中,我们在id="myButton4"中的按钮data-complete-text="Loading finished",那么当点击事件发生以后,等待加载状态完成,我们将看到按钮文本变为"Loading finished"

运行结果

Bootstrap学习日记之按钮插件-LMLPHP

 

 

 

 

 

 

 

 

 

 

 

10-07 10:55