boottstrap confirmation 단추 알림 구성 요소 사용 설명

boottstrap-confirmation 단 추 는 구성 요 소 를 알려 줍 니 다.js 에서 confirm 과 유사 한 기능 으로 인터페이스 가 더욱 아름 답 습 니 다.
이 구성 요 소 를 소개 하기 전에 boottstrap 에 있 는 알림 상자 의 효 과 를 볼 수 있 습 니 다.

1.소스 주소
http://ethaizone.github.io/Bootstrap-Confirmation/
2.효과 전시

3.코드 예제
필요 한 js 와 css 도입

<link href="css/bootstrap.css" rel="external nofollow" rel="stylesheet" /> 
 <script src="js/jquery-1.11.3.js"></script> 
 <script src="js/bootstrap.js"></script> 
 <script src="js/bootstrap-confirmation.js"></script> 
 
초기 화

<button type="button" id="btn_submit1" class="btn btn-primary" style="margin: 100px;">
<span class="glyphicon glyphicon-remove" aria-hidden="true">
</span>  </button> 
js 구현 코드

<script type="text/javascript"> 
 $(function () { 
  $('#btn_submit1').confirmation({ 
   animation: true, 
   placement: "top", 
   title: "      ?", 
   btnOkLabel: '  ', 
   btnCancelLabel: '  ', 
   onConfirm: function () { 
    alert("     "); 
   }, 
   onCancel: function () { 
    alert("     "); 
 
   } 
  }) 
 
 }); 


</script> 

상용 속성.예 를 들 면:
btnOkClass:단추 의 스타일 을 확인 합 니 다.
btnCancelClass:취소 단추 의 스타일;
singleton:확인 상자 만 표시 할 수 있 습 니까?
popout:사용자 가 다른 곳 을 클릭 할 때 확인 상 자 를 숨 길 지 여부;
제목:제목;
placement:배치 위치;
onConfirm:이벤트 확인;
onCancel:이벤트 취소;
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기