부트 스트랩 버튼 (단추) 위젯
에있는 버튼 (단추) 부트 스트랩 버튼이 장에서 소개했다. A 버튼 (단추) 플러그인, 당신은 몇 가지 다음과 같은 대화 형 조작 버튼의 상태를 추가하거나 (예 : 도구 모음)을 다른 구성 요소에 대한 버튼의 그룹을 만들 수 있습니다.
당신은 각각의 플러그인 기능을 참조하려면button.js를 참조 할 필요가있다.또는, 부트 스트랩 플러그인 개요 장에서는 언급, 당신은bootstrap.js또는bootstrap.min.js의압축 된 버전을 참조 할 수있습니다.
로드 상태
버튼의 부하 상태에 추가하려면"로드 버튼 요소 데이터 로딩 텍스트 = 추가..." 속성으로 할 수있는, 다음의 예와 같이
예
<버튼 ID = "지방 btn을" 클래스 = "BTN의 BTN-차" 데이터 로딩 텍스트 = "로드 중 ..."
= "버튼"> 입력로드 상태 </ 버튼>
<script> $ (함수 () {$ ( ". щࣉ ="). 클릭 (함수 () {$ (이) .button ( '로드'). 지연 (1000) .queue를 (함수 () {// $ ( 이) .button () '재설정' )})})} </ script>
»시도
결과는 다음과 같다 :
단일 스위치
하나의 버튼 스위치를 활성화하려면, 단지데이터 토글 = "버튼"속성으로 버튼 요소를 추가 (즉, 버튼의 정상 상태가 상태와 그 반대를 누르면 변경) 할 수있는, 다음의 예와 같이
결과는 다음과 같다 :
확인란 (체크 박스)
사용자는 체크 박스 그룹을 생성 할 수 있으며, 추가로 데이터는 스위치 박스 그룹을 추가BTN 그룹 = "버튼"데이터토글 때문이다.
예
<사업부 클래스 = "BTN 그룹" 데이터 전환 = "버튼">
<라벨 클래스 = "BTN의 BTN-차" >
<입력 = "체크 상자를"> 입력 옵션 1 </ 라벨>
<라벨 클래스 = "BTN의 BTN-차" >
<입력 = "체크 상자를"> 입력 옵션 2 </ 라벨>
<라벨 클래스 = "BTN의 BTN-차" >
<입력 = "체크 상자를"> 입력 옵션 3 </ 라벨>
</ DIV>
»시도
결과는 다음과 같다 :
라디오 버튼 (라디오)
마찬가지로, 라디오 그룹을 생성하고 데이터를데이터 전환 속성 추가 할 수 = "버튼"라디오버튼 그룹을 전환BTN-그룹을추가 할 수 있습니다.
예
<사업부 클래스 = "BTN 그룹" 데이터 전환 = "버튼">
<라벨 클래스 = "BTN의 BTN-차" >
<입력 유형 = "라디오" 이름은 = "옵션" ID = "옵션 1"> 옵션 1 </ 라벨>
<라벨 클래스 = "BTN의 BTN-차" >
<입력 유형 = "라디오" 이름은 = "옵션" ID = "옵션 2"> 옵션 2 </ 라벨>
<라벨 클래스 = "BTN의 BTN-차" >
<입력 유형 = "라디오" 이름은 = "옵션" ID = "옵션 3"> 옵션 3 </ 라벨>
</ DIV>
»시도
결과는 다음과 같다 :
용법
다음과 같이자바 스크립트를 통해 연결 단추 (버튼)를 사용할 수 있습니다 :
$ ( '. щࣉ ='). 버튼 ()
옵션
옵션은 없습니다.
방법
다음 단추 (버튼)의 일부 플러그인 유용한 방법 :
| 方法 | 描述 | 实例 |
|---|---|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
예
다음의 예는 상기 방법의 사용을 보여
예
<H2> 방법 </ H2>의 효과를 보려면 각 버튼을 클릭
<H4> 데모 .button ( '토글') 방법 </ H4>
<사업부 ID = "myButtons1" 클래스 = "BS-예를 들어">
<버튼 = "버튼"을 입력 클래스 = "BTN의 BTN-차" > 원래 </ 버튼>
</ DIV>
<H4> 데모 .button ( '로드') 방법 </ H4>
<사업부 ID = "myButtons2" 클래스 = "BS-예를 들어">
<버튼 = "버튼"을 입력 클래스 = "BTN의 BTN-차"
데이터 로딩 텍스트 = "로드 중 ..."> 원래 </ 버튼>
</ DIV>
<H4> 데모 .button ( '리셋') 방법 </ H4>
<사업부 ID = "myButtons3" 클래스 = "BS-예를 들어">
<버튼 = "버튼"을 입력 클래스 = "BTN의 BTN-차"
데이터 로딩 텍스트 = "로드 중 ..."> 원래 </ 버튼>
</ DIV>
<H4> 데모 .button (문자열) 방법 </ H4>
<버튼 = "버튼"을 입력 클래스 = "BTN의 BTN-차" ID = "myButton4"
데이터 전체 텍스트 = "로드 완료"> > 나는 / 버튼 <클릭
<스크립트>
$ (함수 () {$ ( "# MyButtons1 .btn" )를 누른 상태에서 클릭 (함수 () {$ (이) 버튼 ( '토글');});}); $ (함수 () {$ ( "#의 MyButtons2의 .btn" ). 클릭 (함수 () {$ (이). 버튼 ( '로드'). 지연 (1000). 큐 (함수 () {
});});}) ; $ (함수 () {$ ( "#의 MyButtons3의 .btn" ). 클릭 (함수 () {$ (이). 버튼 ( '로드'). 지연 (1000). 큐 (함수 () {$ (이) 버튼 ( ' )};)}); 재설정')} $ (함수 () {$ ( "# MyButton4") . 클릭 (함수 () {$ (이). 버튼 ( '로드'). 지연 (1000). 큐 (함수 () {$ (이) 버튼 (. '완료');})})});
</ 스크립트>
»시도
결과는 다음과 같다 :
