分销商微信小程序_Bootstrap根本插件学习笔记之按钮(21)

Bootstrap基本插件学习笔记之按钮(21)       这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之按钮的相关资料,实现按钮状态控制等形式的交互,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前面已经介绍过Button的使用。通过button按钮,我们还能实现一些诸如按钮状态控制等形式的交互。

0x01 加载状态

添加data-loading-text=”Loading…”属性:

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link href="../../css/bootstrap.min.css" rel="stylesheet" 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="../../js/bootstrap.min.js" /script 
 title 按钮交互 /title 
 /head 
 body 
 div 
 div 
 h1 按钮交互 /h1 
 /div 
 button id="btnLoad" type="button" data-loading-text="Loading..." 
 加载状态
 /button 
 script 
 $(function () {
 $("#btnLoad").click(function () {
 $(this).button('loading').delay(1000).queue(
 function () {
 $(this).button('reset');
 $(this).dequeue();
 /script 
 /div 
 /body 
 /html 

效果如下:

$("#btnLoad").click(function () {
 $(this).button('loading').delay(1000).queue(
 function () {
 $(this).button('reset');
 $(this).dequeue();

loading状态持续1s后,将会执行reset,恢复原始状态。

0x02 复选框

设置data-toggle为”buttons”可以实现复选框按钮组的效果:

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link href="../../css/bootstrap.min.css" rel="stylesheet" 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="../../js/bootstrap.min.js" /script 
 title 复选框按钮组 /title 
 /head 
 body 
 div 
 div 
 h1 复选框按钮组 /h1 
 /div 
 div data-toggle="buttons" 
 button 
 input type="checkbox" 选项1
 /button 
 button 
 input type="checkbox" 选项2
 /button 
 button 
 input type="checkbox" 选项3
 /button 
 /div 
 /div 
 /body 
 /html 

效果如下:

0x03 单选按钮

类似地:

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link href="../../css/bootstrap.min.css" rel="stylesheet" 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="../../js/bootstrap.min.js" /script 
 title 单选按钮 /title 
 /head 
 body 
 div 
 div 
 h1 单选按钮 /h1 
 /div 
 div data-toggle="buttons" 
 button 
 input type="radio" name="radio" 选项1
 /button 
 button 
 input type="radio" name="radio" 选项2
 /button 
 button 
 input type="radio" name="radio" 选项3
 /button 
 /div 
 /div 
 /body 
 /html 

效果如下:

如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读