Bootstrap의 버튼 플러그인 사용법-JS 튜토리얼-php.cn

이전 말

　버튼 플러그인은 버튼의 비활성화 상태, 로딩 상태, 정상 상태 등 버튼의 여러 상태를 제어할 수 있는 기능 세트를 제공합니다. 이 글에서는 부트스트랩 버튼 플러그인에 대해 자세히 소개합니다

Loading status

　버튼을 클릭하면 로딩 상태 정보가 표시되는 상태 프롬프트를 디자인할 수 있습니다. 예를 들어, "로드" 버튼을 클릭하면 버튼의 로딩 상태가 트리거됩니다

data-loading-text="Loading..."를 추가하면 버튼의 로딩 상태를 설정할 수 있습니다. 하지만 v3.3.5부터 이 기능은 더 이상 권장되지 않으며 v4에서는 삭제되었습니다data-loading-text="Loading..." 可以为按钮设置正在加载的状态，但从 v3.3.5 版本开始，此特性不再建议使用，并且已经在 v4 版本中删除了

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

<button class="btn btn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button><script>$(function(){
    $("#loaddingBtn").click(function () {var $btn = $(this).button("loading");
        setTimeout(function(){
            $btn.button('reset')
        },1000);
      });
});    
</script>

로그인 후 복사

模拟单选

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

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

<div class="btn-group" data-toggle="buttons"><label class="btn btn-primary"><input type="radio" name="options" id="options1">男</label><label class="btn btn-primary"><input type="radio" name="options" id="options2">女</label></div>

로그인 후 복사

模拟多选

　　使用按钮组来模拟复选按钮和模拟单选按钮是一样的，具有同等效果，也是通过在按钮组上自定义data-toggle="buttons"

　[참고] If If data-loading-text가 설정되지 않았습니다. 버튼 텍스트가 로드 중 상태일 때 기본 표시는 '로드 중...'입니다.

<div class="btn-group" data-toggle="buttons"><label class="btn btn-primary"><input type="checkbox" name="options" id="options1">电影</label><label class="btn btn-primary"><input type="checkbox" name="options" id="options2">音乐</label><label class="btn btn-primary"><input type="checkbox" name="options" id="options3">游戏</label><label class="btn btn-primary"><input type="checkbox" name="options" id="options4">摄影</label></div>

로그인 후 복사

라디오 선택 시뮬레이션

버튼은 단일 선택 작업을 구현하는 버튼 세트입니다. 라디오 버튼 그룹을 시뮬레이션하기 위해 버튼 그룹을 사용하면 디자인을 더욱 개인화하고 더욱 아름다운 라디오 버튼 그룹을 사용자 정의할 수 있습니다

Bootstrap 프레임워크의 버튼 플러그인에서 버튼 그룹 `data-toggle="buttons"`

<button type="button" data-toggle="button" class="btn btn-primary">有状态的按钮</button><button type="button" class="btn btn-primary">普通按钮</button>

로그인 후 복사

다중 선택 시뮬레이션

버튼 그룹을 사용하여 체크 버튼을 시뮬레이션하는 것은 라디오 버튼을 시뮬레이션하는 것과 동일하며 효과도 같습니다. 버튼 그룹에서 `data-toggle="buttons"`를 사용자 정의하여 달성할 수 있습니다. 유일한 차이점은 input[type="radio"]를 input[type="checkbox"]

$("#mybutton").button("toggle");//反转按钮状态
$("#mybutton").button("reset");//重置按钮状态
$("#mybutton").button("任意字符参数名");//替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值

로그인 후 복사

button state

로 바꾸는 것입니다. data-toggle 속성을 사용하면 버튼의 동작 상태도 활성화할 수 있습니다. , 활성화 및 비활성 사이의 상태 전환을 달성합니다. 클릭하면 버튼이 활성화되고 다시 클릭하면 버튼이 기본 상태로 복원됩니다

<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('complete');
        },1000);
      });
});    
</script>

로그인 후 복사

JS 트리거

버튼 플러그인은 버튼 함수를 호출한 후 특정 항목을 전달하여 구현할 수 있습니다. 버튼 기능에 대한 매개변수입니다. 매개변수 중 두 개, 즉 토글(toggle)과 재설정(reset)이 고정되어 있습니다. 다른 것들은 마음대로 정의할 수 있습니다:

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

로그인 후 복사

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

로그인 후 복사

JS source code

【1】IIFE

즉시 호출 기능을 사용하여 플러그인 내의 코드가 누출되는 것을 방지합니다. 폐쇄 루프이며 jQuery의 fn

  //设置按钮状态的方法
  Button.prototype.setState = function (state) {//按钮需要禁用时使用它，先赋值一个临时变量var d    = 'disabled'//当前元素var $el  = this.$element//如果是input，则使用val获取值，否则，使用html获取值var val  = $el.is('input') ? 'val' : 'html'//获取当前元素的自定义属性，所有以data-开头的属性var data = $el.data()//组装需要用到的属性，如传入loading，则组装成loadingTextstate += 'Text'//如果data里不包含data-reset-text值，则将当前元素的值临时存放，以便过后再恢复使用它if (data.resetText == null) $el.data('resetText', $el[val]())//不阻止事件，以允许表单的提交setTimeout($.proxy(function () {      //给元素赋值，如果是元素默认没有值，则从options里查询，否则，从自定义属性里查询  $el[val](data[state] == null ? this.options[state] : data[state])      //如果传入的是loading  if (state == 'loadingText') {//设置加载状态为truethis.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('[data-toggle="buttons"]')//如果父元素存在if ($parent.length) {      //查找触发元素内是否存在input元素  var $input = this.$element.find('input')      //如果是单选按钮  if ($input.prop('type') == 'radio') {//如果被选中，则设置changed为falseif ($input.prop('checked')) changed = false//查找同级元素是否有active样式，如果有，则删除active样式$parent.find('.active').removeClass('active')//给当前元素添加active样式this.$element.addClass('active')      //如果是多选按钮  } else if ($input.prop('type') == 'checkbox') {//如果多选按钮选中了，但元素没有active样式//或者多选按钮没有选中，但元素却有active样式，则设置changed为falseif (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false//重置元素的active样式this.$element.toggleClass('active')
      }      //将多选按钮的checked设置为是否有active样式  $input.prop('checked', this.$element.hasClass('active'))      //如果changed为true，则触发change事件  if (changed) $input.trigger('change')
    } else {      this.$element.attr('aria-pressed', !this.$element.hasClass('active'))      //重置元素的active样式  this.$element.toggleClass('active')
    }
  }

로그인 후 복사

【2】초기 설정

  function Plugin(option) {//根据选择器，遍历所有符合规则的元素return this.each(function () {      var $this   = $(this)      //获取自定义属性bs.button的值  var data    = $this.data('bs.button')      var options = typeof option == 'object' && option      //如果值不存在，则将Button实例设置为bs.button值  if (!data) $this.data('bs.button', (data = new Button(this, options)))      //如果option是toggle，则直接调用该方法    if (option == 'toggle') data.toggle()      //否则调用setState()方法  else if (option) data.setState(option)
    })
  }  var old = $.fn.button  //保留其他库的$.fn.button代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
  $.fn.button             = Plugin  //重设插件构造器，可以通过该属性获取插件的真实类函数
  $.fn.button.Constructor = Button

로그인 후 복사

【3】플러그인 코어 코드

🎜

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

로그인 후 복사

🎜🎜【4】jQuery 플러그인 정의🎜🎜

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

로그인 후 복사

🎜에서만 확장할 수 있습니다. 🎜【5】충돌 방지 처리 🎜🎜rrreee🎜🎜【6】바인드 트리거 이벤트🎜🎜rrreee🎜🎜【관련 강좌 추천: 🎜🎜부트스트랩 튜토리얼🎜🎜】🎜

위 내용은 Bootstrap의 버튼 플러그인 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!