按钮插件概述
之前我们学习过按钮一章,在里面我们创建了按钮,并学习了简单改变按钮的状态(由激活改成不激活),其实借助于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>
运行结果
点击前 点击后 ,鼠标悬停时样式也发生改变。
按钮的按压状态
如果你想将按钮的状态改为按压状态,那么只需简单添加data-toggle="button"即可
<div class="container">
<button class="btn btn-primary" type="button" data-toggle="button">点击改变按钮状态</button>
</div>
运行结果
点击前 点击后
单选按钮
假设现在你希望创建一个单选按钮,点击按钮时,每个按钮的状态发生改变。那么你可以用到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>
运行结果
点击前点击选项1点击选项2
方法
案例
<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"
运行结果