搜索
首页web前端Bootstrap教程详解Bootstrap中的按钮组件

详解Bootstrap中的按钮组件

Apr 19, 2021 pm 07:19 PM
bootstrap

本篇文章带大家详细了解一下Bootstrap中的按钮组件。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

详解Bootstrap中的按钮组件

按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态、正在加载状态、正常状态等。本文将详细介绍Bootstrap按钮插件

加载状态

  通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息。例如,点击“加载”按钮,会触发按钮的加载的状态

  通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态,但从 v3.3.5 版本开始,此特性不再建议使用,并且已经在 v4 版本中删除了

  [注意]如果不设置data-loading-text,则按钮文本在Loading状态时,默认显示的是'loading...'

3e12984cc4b2743b0e22ec797cbcb388加载65281c5ac262bf6d81768915a4a77ac0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(function(){
    $("#loaddingBtn").click(function () {
        var $btn = $(this).button("loading");
        setTimeout(function(){
            $btn.button('reset')
        },1000);
      });
});    
2cacc6d41bbb37262a98f745aa00fbf0

1.gif

【相关推荐:《bootstrap教程》】

模拟单选

  模拟单选按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组,能够让设计更具个性化,可以定制出更美观的单选按钮组

  在Bootstrap框架中按钮插件中,可以通过给按钮组自定义属性data-toggle="buttons"

16f501a688f37bdef311eee2a5428a39
    7738f54b83deb1a51e6cada3afd9a541
        5a612b70d5562e865f4381538dcdd3a7男
    8c1ecd4bb896b2264e0711597d40766c
    7738f54b83deb1a51e6cada3afd9a541
        2d231ed76ecd4f1484321b5938d00a4d女
    8c1ecd4bb896b2264e0711597d40766c
16b28748ea4df4d9c2150843fecfba68

2.gif

模拟多选

  使用按钮组来模拟复选按钮和模拟单选按钮是一样的,具有同等效果,也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是,将input[type="radio"]换成input[type="checkbox"]

16f501a688f37bdef311eee2a5428a39
    7738f54b83deb1a51e6cada3afd9a541
        1a01211f270fbe786da4c30eb6877b3c电影
    8c1ecd4bb896b2264e0711597d40766c
    7738f54b83deb1a51e6cada3afd9a541
        eca06fa1a663335fb4524c52571e0a0d音乐
    8c1ecd4bb896b2264e0711597d40766c
    7738f54b83deb1a51e6cada3afd9a541
        c634eb5d543f9b3a98041f3c19fa36b5游戏
    8c1ecd4bb896b2264e0711597d40766c
    7738f54b83deb1a51e6cada3afd9a541
        5414359f1de489e9aadb9070d77a68ee摄影
    8c1ecd4bb896b2264e0711597d40766c
16b28748ea4df4d9c2150843fecfba68

3.gif

按钮状态

  使用 data-toggle 属性还可以激活按钮的行为状态,实现在激活和未激活之间进行状态切换。单击时将按钮激活,再单击可以让按钮恢复到默认状态

a8d9c283128161270f7b7529cd531745有状态的按钮65281c5ac262bf6d81768915a4a77ac0
c0da018427a22f22a069c7d690eece88普通按钮65281c5ac262bf6d81768915a4a77ac0

4.gif

JS触发

  按钮插件可以通过调用button函数,然后给button函数传入具体的参数,实现不同的效果。而其中有两个参数是固定不变的,即toggle和reset。其他的都可以随意定义:

$("#mybutton").button("toggle");//反转按钮状态
$("#mybutton").button("reset");//重置按钮状态
$("#mybutton").button("任意字符参数名");//替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值
<button class="btn btn-primary" data-complete-text="加载完成" type="button" id="mybutton">加载</button>
<script>
$(function(){
    $("#mybutton").click(function () {
        var $btn = $(this).button("loading");
        setTimeout(function(){
            $btn.button(&#39;complete&#39;);
        },1000);
      });
});    
</script>

5.gif

JS源码

【1】IIFE

  使用立即调用函数,防止插件内代码外泄,从而形成一个闭环,并且只能从jQuery的fn里进行扩展

+function ($) {
    //使用es5严格模式
    &#39;use strict&#39;;
    //
}(window.jQuery);

【2】初始设置

var Button = function (element, options) {
    //要触发的元素
    this.$element  = $(element)
    //合并参数
    this.options   = $.extend({}, Button.DEFAULTS, options)
    //是否是加载状态
    this.isLoading = false
  }
  //版本号为3.3.7
  Button.VERSION  = &#39;3.3.7&#39;
  //默认loadinf时的文本内容为&#39;loading...&#39;
  Button.DEFAULTS = {
    loadingText: &#39;loading...&#39;
  }

【3】插件核心代码

//设置按钮状态的方法
  Button.prototype.setState = function (state) {
    //按钮需要禁用时使用它,先赋值一个临时变量
    var d    = &#39;disabled&#39;
    //当前元素
    var $el  = this.$element
    //如果是input,则使用val获取值,否则,使用html获取值
    var val  = $el.is(&#39;input&#39;) ? &#39;val&#39; : &#39;html&#39;
    //获取当前元素的自定义属性,所有以data-开头的属性
    var data = $el.data()
    //组装需要用到的属性,如传入loading,则组装成loadingText
    state += &#39;Text&#39;
    //如果data里不包含data-reset-text值,则将当前元素的值临时存放,以便过后再恢复使用它
    if (data.resetText == null) $el.data(&#39;resetText&#39;, $el[val]())

    //不阻止事件,以允许表单的提交
    setTimeout($.proxy(function () {
      //给元素赋值,如果是元素默认没有值,则从options里查询,否则,从自定义属性里查询
      $el[val](data[state] == null ? this.options[state] : data[state])
      //如果传入的是loading
      if (state == &#39;loadingText&#39;) {
        //设置加载状态为true
        this.isLoading = true
        //禁用该元素(即添加disabled样式和disabled属性)
        $el.addClass(d).attr(d, d).prop(d, true)
      } else if (this.isLoading) {
        this.isLoading = false
        //如果不是,则删除disabled样式和disabled属性
        $el.removeClass(d).removeAttr(d).prop(d, false)
      }
    }, this), 0)
  }
  //切换按钮状态
  Button.prototype.toggle = function () {
    //设置change标记
    var changed = true
    //查找带有[data-toggle="buttons"]属性的最近父元素
    var $parent = this.$element.closest(&#39;[data-toggle="buttons"]&#39;)
    //如果父元素存在
    if ($parent.length) {
      //查找触发元素内是否存在input元素
      var $input = this.$element.find(&#39;input&#39;)
      //如果是单选按钮
      if ($input.prop(&#39;type&#39;) == &#39;radio&#39;) {
        //如果被选中,则设置changed为false
        if ($input.prop(&#39;checked&#39;)) changed = false
        //查找同级元素是否有active样式,如果有,则删除active样式
        $parent.find(&#39;.active&#39;).removeClass(&#39;active&#39;)
        //给当前元素添加active样式
        this.$element.addClass(&#39;active&#39;)
      //如果是多选按钮
      } else if ($input.prop(&#39;type&#39;) == &#39;checkbox&#39;) {
        //如果多选按钮选中了,但元素没有active样式
        //或者多选按钮没有选中,但元素却有active样式,则设置changed为false
        if (($input.prop(&#39;checked&#39;)) !== this.$element.hasClass(&#39;active&#39;)) changed = false
        //重置元素的active样式
        this.$element.toggleClass(&#39;active&#39;)
      }
      //将多选按钮的checked设置为是否有active样式
      $input.prop(&#39;checked&#39;, this.$element.hasClass(&#39;active&#39;))
      //如果changed为true,则触发change事件
      if (changed) $input.trigger(&#39;change&#39;)
    } else {
      this.$element.attr(&#39;aria-pressed&#39;, !this.$element.hasClass(&#39;active&#39;))
      //重置元素的active样式
      this.$element.toggleClass(&#39;active&#39;)
    }
  }

【4】jQuery插件定义

function Plugin(option) {
    //根据选择器,遍历所有符合规则的元素
    return this.each(function () {
      var $this   = $(this)
      //获取自定义属性bs.button的值
      var data    = $this.data(&#39;bs.button&#39;)
      var options = typeof option == &#39;object&#39; && option
      //如果值不存在,则将Button实例设置为bs.button值
      if (!data) $this.data(&#39;bs.button&#39;, (data = new Button(this, options)))
      //如果option是toggle,则直接调用该方法  
      if (option == &#39;toggle&#39;) data.toggle()
      //否则调用setState()方法
      else if (option) data.setState(option)
    })
  }

  var old = $.fn.button
  //保留其他库的$.fn.button代码(如果定义的话),以便在noConflict之后可以继续使用该老代码
  $.fn.button             = Plugin
  //重设插件构造器,可以通过该属性获取插件的真实类函数
  $.fn.button.Constructor = Button

【5】防冲突处理

$.fn.button.noConflict = function () {
    //恢复以前的旧代码
    $.fn.button = old
    //将$.fn.button.noConflict()设置为Bootstrap的Tab插件
    return this
  }

【6】绑定触发事件

$(document)
    //查询所有以button开头,data-toggle属性的值,绑定click事件
    .on(&#39;click.bs.button.data-api&#39;, &#39;[data-toggle^="button"]&#39;, function (e) {
      //查找当前单击对象的最近的有btn样式的父元素
      var $btn = $(e.target).closest(&#39;.btn&#39;)
      Plugin.call($btn, &#39;toggle&#39;)
      //如果单击对象不是单选或多选按钮
      if (!($(e.target).is(&#39;input[type="radio"], input[type="checkbox"]&#39;))) {
        //阻止默认行为
        e.preventDefault()
        //如果$btn是单选或多选按钮,触发focus事件
        if ($btn.is(&#39;input,button&#39;)) $btn.trigger(&#39;focus&#39;)
        //否则,找到子元素中的第一个具有visible状态的input或button,触发focus事件
        else $btn.find(&#39;input:visible,button:visible&#39;).first().trigger(&#39;focus&#39;)
      }
    })
    //查询所有以button开头,data-toggle属性的值,绑定focus事件
    .on(&#39;focus.bs.button.data-api blur.bs.button.data-api&#39;, &#39;[data-toggle^="button"]&#39;, function (e) {
      $(e.target).closest(&#39;.btn&#39;).toggleClass(&#39;focus&#39;, /^focus(in)?$/.test(e.type))
    })

更多编程相关知识,请访问:编程入门!!

以上是详解Bootstrap中的按钮组件的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:博客园。如有侵权,请联系admin@php.cn删除
Bootstrap的目的:建立一致且有吸引力的网站Bootstrap的目的:建立一致且有吸引力的网站Apr 19, 2025 am 12:07 AM

Bootstrap的主要用途是帮助开发者快速构建响应式、移动优先的网站。其核心功能包括:1.响应式设计,通过网格系统实现不同设备的布局调整;2.预定义组件,如导航栏和模态框,确保美观和跨浏览器兼容性;3.支持自定义和扩展,使用Sass变量和mixins调整样式。

Bootstrap与其他框架:比较概述Bootstrap与其他框架:比较概述Apr 18, 2025 am 12:06 AM

Bootstrap优于TailwindCSS、Foundation和Bulma,因为它易用且快速开发响应式网站。1.Bootstrap提供丰富的预定义样式和组件库。2.其CSS和JavaScript库支持响应式设计和交互功能。3.适合快速开发,但自定义样式可能较复杂。

在React中集成引导样式:方法和技术在React中集成引导样式:方法和技术Apr 17, 2025 am 12:04 AM

在React项目中整合Bootstrap可以通过两种方法:1)使用CDN引入,适合小型项目或快速原型设计;2)使用npm包管理器安装,适用于需要深度定制的场景。通过这些方法,你可以在React中快速构建美观且响应式的用户界面。

React的引导:优势和最佳实践React的引导:优势和最佳实践Apr 16, 2025 am 12:17 AM

将Bootstrap集成到React项目中的优势包括:1)快速开发,2)一致性和可维护性,3)响应式设计。通过直接引入CSS文件或使用React-Bootstrap库,可以在React项目中高效使用Bootstrap的组件和样式。

Bootstrap:网络框架的快速指南Bootstrap:网络框架的快速指南Apr 15, 2025 am 12:10 AM

Bootstrap是由Twitter开发的框架,帮助快速搭建响应式、移动优先的网站和应用。1.易用性和丰富组件库使开发更快。2.庞大社区提供支持和解决方案。3.通过CDN引入并使用类名控制样式,如创建响应式网格。4.可自定义样式和扩展组件。5.优点包括快速开发和响应式设计,缺点是样式一致性和学习曲线。

打破bootstrap:是什么以及为什么重要打破bootstrap:是什么以及为什么重要Apr 14, 2025 am 12:05 AM

Bootstrapisafree,开放式frameworkthatsimplifiesRessiveandMobile-firstwebsitedEvelvelopment.itofferspre-styledComponentsAndAgridSystem,流化inthiningthecreationofaesthethetshethetshetshetshetshetshetshetshetshetshethetshethet interpleaseansing和Runctinctionalwebdesigns。

Bootstrap:使网页设计更容易Bootstrap:使网页设计更容易Apr 13, 2025 am 12:10 AM

Bootstrap让网页设计更容易的原因是其预设组件、响应式设计和丰富的社区支持。1)预设组件库和样式让开发者无需编写复杂的CSS代码;2)内置网格系统简化了响应式布局的创建;3)社区支持提供了丰富的资源和解决方案。

Bootstrap的影响:加速网络开发Bootstrap的影响:加速网络开发Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web开发,通过提供预定义的样式和组件,开发者可以快速搭建响应式网站。1)它缩短了开发时间,例如在项目中几天内完成基本布局。2)通过Sass变量和mixins,Bootstrap允许定制样式以满足特定需求。3)使用CDN版本可以优化性能,提高加载速度。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器