우리의 Modal 플러그인은 전통적인 modal js 플러그인을 매우 슬림하게 변형한 것으로 여기 twitter에서 우리가 필요로 하는 기본적인 기능만 포함하도록 특별한 주의를 기울입니다.

다운로드

부트스트랩 모달 사용

$ ( '#my-modal' ). 모달 ( 옵션 )

옵션

이름	유형	기본	설명
배경	부울	거짓	모달 배경 요소 포함
건반	부울	거짓	이스케이프 키를 누르면 모달을 닫습니다.
보여 주다	부울	거짓	클래스 초기화 시 모달을 엽니다.

마크업

자바스크립트를 한 줄도 작성하지 않고도 페이지에서 모달을 쉽게 활성화할 수 있습니다. 요소에 모달 요소 ID에 해당 하는 data-controls-modal속성을 지정하기만 하면 클릭하면 모달이 실행됩니다. 모달 옵션을 추가하려면 데이터 속성으로도 포함하면 됩니다.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > 모달 시작 </a>    

알림 모달이 안팎으로 움직이게 하려면 요소에 .fade클래스를 추가하기만 하면 .modal됩니다(이 동작을 보려면 데모 참조).

행동 양식

.modal(옵션)

콘텐츠를 모달로 활성화합니다. 선택적 옵션을 허용합니다 object.

$ ( '#my-modal' ). 모달 ({
  closeOnEscape : 사실 
})

.modal('토글')

수동으로 모달을 토글합니다.

$ ( '#my-modal' ). 모달 ( '토글' )

.modal('표시')

수동으로 모달을 엽니다.

$ ( '#my-modal' ). 모달 ( '표시' )

.modal('숨기기')

수동으로 모달을 숨깁니다.

$ ( '#my-modal' ). 모달 ( '숨기기' )

.modal(참)

요소 모달 클래스 인스턴스를 반환합니다.

$ ( '#my-modal' ). 모달 ( 참 )

알림 또는 로 검색할 수 있습니다 $().data('modal').

이벤트

부트스트랩의 모달 클래스는 모달 기능에 연결하기 위한 몇 가지 이벤트를 노출합니다.

이벤트	설명
보여 주다	show이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
표시	이 이벤트는 모달이 사용자에게 표시될 때 시작됩니다(css 전환이 완료될 때까지 기다림).
숨다	hide이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 .
숨겨진	이 이벤트는 모달이 사용자에게 숨겨졌을 때 시작됩니다(css 전환이 완료될 때까지 기다림).

$ ( '#my-modal' ). 바인드 ( '숨겨진' , 함수 () {   
  // 뭔가를 ...
})

데모

모달 실행

이 플러그인은 부트스트랩 상단 표시줄 또는 탭 탐색에 드롭다운 상호 작용을 추가하기 위한 것입니다.

다운로드

boosttrap-dropdown.js 사용

$ ( '#상단바' ). 드롭다운 ()

마크업

탐색 요소에 드롭다운 기능을 빠르게 추가하려면 data-dropdown속성을 사용하세요. 모든 유효한 부트스트랩 드롭다운이 자동으로 활성화됩니다.

<ul 클래스 = "탭" > 
  <li class = "active" ><a href = "#" > 홈 </a></li>  
  <li class = "dropdown" 데이터-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > 드롭다운 </a>  
    <ul class = "드롭다운 메뉴" > 
      <li > <a href = "#"> 보조 링크 </a></li> 
      <li><a href = "#" > 여기에 다른 것이 있습니다 </a></li> 
      <li 클래스 = "분할기" ></li> 
      <li > <a href = "#"> 다른 링크 </a></li> 
    </ul>
  </li>
</ul>

알림 UI에 여러 드롭다운이 있는 경우 또는 data-dropdown와 같은 더 중요한 컨테이너 요소에 속성을 추가하는 것을 고려하십시오 ..tabs.topbar

행동 양식

$().드롭다운()

주어진 상단 표시줄 또는 탭 탐색에 대한 메뉴를 활성화하기 위한 프로그래밍 방식 API입니다.

데모

이 플러그인은 부트스트랩 상단 표시줄에 scrollspy(자동 업데이트 탐색) 상호 작용을 추가하기 위한 것입니다.

다운로드

boostrap-scrollspy.js 사용

$ ( '#상단바' ). 드롭다운 ()

마크업

탐색에 scrollspy 동작을 쉽게 추가하려면 data-scrollspy속성을 .topbar.

<div 클래스 = "topbar" 데이터-scrollspy = "scrollspy" > ... </div>   

행동 양식

$().scrollspy()

자동은 사용자가 스크롤 위치에 따라 탐색 버튼을 활성화합니다.

$ ( '본체 > .topbar' ). 스크롤스파이 ()

알림 Topbar 앵커 태그에는 확인 가능한 ID 대상이 있어야 합니다. 예를 들어, a <a href="#home">home</a>는 dom과 같은 항목과 일치해야 합니다 <div id="home"></div>.

.scrollspy('새로고침')

scrollspy는 성능을 위해 탐색 버튼과 섹션 좌표를 캐시합니다. 이 캐시를 업데이트해야 하는 경우(동적 콘텐츠가 있는 경우) 이 새로 고침 메서드를 호출하면 됩니다. 데이터 속성을 사용하여 scrollspy를 정의했다면 본문에서 새로 고침을 호출하기만 하면 됩니다.

$ ( '본문' ). scrollspy ( '새로 고침' )

데모

이 페이지에서 상단 표시줄 탐색을 확인하십시오.

이 플러그인은 빠르고 동적인 탭과 알약 기능을 추가합니다.

다운로드

boosttrap-tabs.js 사용

$ ( '.tabs' ). 탭 ()

마크업

자바스크립트를 작성하지 않고 단순히 data-tabs또는 data-pills속성을 제공하여 탭 또는 알약 탐색을 활성화할 수 있습니다.

 <ul 클래스 = "탭" 데이터 탭 = "탭" > ... </ul>   

행동 양식

$().tabs 또는 $().pills

지정된 컨테이너에 대한 탭 및 알약 기능을 활성화합니다. 탭 링크는 문서의 ID를 참조해야 합니다.

<ul 클래스 = "탭" > 
  <li class = "active" > <a href = "#home"> 홈 </a></li>  
  <li > <a href = "#profile"> 프로필 </a></li> 
  <li > <a href = "#messages"> 메시지 </a></li> 
  <li > <a href = "#settings"> 설정 </a></li> 
</ul>
 
<div 클래스 = "알약 함량" > 
  <div 클래스 = "활성" id = "집" > ... </div>  
  <div ID = "프로필" > ... </div> 
  <div ID = "메시지" > ... </div> 
  <div ID = "설정" > ... </div> 
</ul>
 
<스크립트>
  $ ( 함수 () {  
    $ ( '.tabs' ). 탭 ()
  })
</스크립트>

데모

• 집
• 프로필
• 메시지
• 설정

Jason Frame이 작성한 우수한 jQuery.tipsy 플러그인을 기반으로 합니다. twipsy는 이미지에 의존하지 않고 애니메이션에 CSS3를 사용하고 타이틀 저장에 데이터 속성을 사용하는 업데이트된 버전입니다!

다운로드

bootstrap-twipsy.js 사용

$ ( '#예제' ). 트위시 ( 옵션 )

옵션

이름	유형	기본	설명
생명 있는	부울	진실	툴팁에 CSS 페이드 전환 적용
지연	숫자	0	툴팁을 표시하기 전에 지연(ms)
지연	숫자	0	툴팁을 숨기기 전 지연(ms)
대체	끈	''	툴팁 제목이 없을 때 사용할 텍스트
놓기	끈	'위에'	툴팁을 배치하는 방법 - 위 | 아래 | 왼쪽 | 오른쪽
HTML	부울	거짓	툴팁 내에서 html 콘텐츠 허용
라이브	부울	거짓	개별 이벤트 핸들러 대신 이벤트 위임 사용
오프셋	숫자	0	대상 요소에서 툴팁의 픽셀 오프셋
제목	문자열 | 기능	'제목'	제목 텍스트를 검색하기 위한 속성 또는 메서드
방아쇠	끈	'호버'	툴팁이 트리거되는 방법 - hover | 초점 | 수동

행동 양식

$().twipsy(옵션)

요소 컬렉션에 twipsy 처리기를 연결합니다.

.twipsy('표시')

트윕시 요소를 표시합니다.

$ ( '#요소' ). 트위시 ( '쇼' )

.twipsy('숨기기')

요소를 숨깁니다.

$ ( '#요소' ). 트윅시 ( '숨기기' )

.twipsy(사실)

요소 twipsy 클래스 인스턴스를 반환합니다.

$ ( '#요소' ). 트위시 ( 사실 )

알림 또는 로 검색할 수 있습니다 $().data('twipsy').

데모

팝오버 플러그인은 애플리케이션에 팝오버를 추가하기 위한 간단한 인터페이스를 제공합니다. 이것은 boostrap-twipsy.js 플러그인을 확장하므로 프로젝트에 팝오버를 포함할 때 해당 파일도 가져와야 합니다!

다운로드

boosttrap-popover.js 사용

$ ( '#예제' ). 팝오버 ( 옵션 )

옵션

이름	유형	기본	설명
생명 있는	부울	진실	툴팁에 CSS 페이드 전환 적용
지연	숫자	0	툴팁을 표시하기 전에 지연(ms)
지연	숫자	0	툴팁을 숨기기 전 지연(ms)
대체	끈	''	툴팁 제목이 없을 때 사용할 텍스트
놓기	끈	'오른쪽'	툴팁을 배치하는 방법 - 위 | 아래 | 왼쪽 | 오른쪽
HTML	부울	거짓	툴팁 내에서 html 콘텐츠 허용
라이브	부울	거짓	개별 이벤트 핸들러 대신 이벤트 위임 사용
오프셋	숫자	0	대상 요소에서 툴팁의 픽셀 오프셋
제목	문자열 | 기능	'제목'	제목 텍스트를 검색하기 위한 속성 또는 메서드
콘텐츠	문자열 | 기능	'데이터 콘텐츠'	콘텐츠 텍스트를 검색하기 위한 속성 또는 메서드
방아쇠	끈	'호버'	툴팁이 트리거되는 방법 - hover | 초점 | 수동

행동 양식

$().팝오버(옵션)

요소 컬렉션에 대한 팝오버를 초기화합니다.

.popover('표시')

요소 팝오버를 표시합니다.

$ ( '#요소' ). 팝오버 ( '표시' )

.popover('숨기기')

요소 팝오버를 숨깁니다.

$ ( '#요소' ). 팝오버 ( '숨기기' )

데모

팝오버를 위해 마우스를 가져갑니다.

경고 플러그인은 경고에 가까운 기능을 추가하기 위한 초소형 클래스입니다.

다운로드

bootstrap-alerts.js 사용

$ ( ".alert-message" ). 경고 ()

마크업

data-alert경고 메시지에 속성을 추가하기만 하면 자동으로 닫기 기능을 제공할 수 있습니다.

행동 양식

$().경고()

닫기 기능으로 모든 경고를 래핑합니다. 알림이 닫힐 때 알림이 표시되도록 하려면 알림에 .fade및 .in클래스가 이미 적용되어 있는지 확인하세요.

.alert('닫기')

경고를 닫습니다.

$ ( ".alert-message" ). 경고 ( '닫기' )

데모