私たちの Modal プラグインは、従来の modal js プラグインを非常にスリムにしたものであり、ここ twitter で必要な最低限の機能のみを含めるように特別な注意を払っています。

ダウンロード

ブートストラップモーダルの使用

$ ( '#my-モーダル' ). モーダル(オプション)

オプション

名前	タイプ	デフォルト	説明
背景	ブール値、文字列	間違い	モーダル背景要素が含まれています。"static"背景がクリックされたときにモーダルを閉じたくない場合は、背景を に設定します。
キーボード	ブール値	間違い	エスケープキーが押されたときにモーダルを閉じます
見せる	ブール値	間違い	クラスの初期化時にモーダルを開く

マークアップ

JavaScript を 1 行も書かなくても、ページでモーダルを簡単に有効化できます。data-controls-modal要素にモーダル要素 ID に対応する属性を与えるだけで、クリックするとモーダルが起動します。モーダル オプションを追加するには、それらをデータ属性として含めるだけです。

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" >モーダルを起動</a>    

注意モーダルをアニメーション化したい場合は、要素に.fadeクラスを追加するだけ.modalです (デモを参照して動作を確認してください)。

メソッド

.modal(オプション)

コンテンツをモーダルとしてアクティブにします。オプションのオプションを受け入れますobject。

$ ( '#my-モーダル' ). モーダル({
  キーボード:真 
}))

.modal('トグル')

モーダルを手動で切り替えます。

$ ( '#my-モーダル' ). モーダル( 「トグル」)

.modal('表示')

モーダルを手動で開きます。

$ ( '#my-モーダル' ). モーダル( 「表示」)

.modal('隠す')

モーダルを手動で非表示にします。

$ ( '#my-モーダル' ). モーダル( 「非表示」)

.modal(真)

要素のモーダル クラス インスタンスを返します。

$ ( '#my-モーダル' ). モーダル( true )

注または、 で取得することもできます$().data('modal')。

イベント

Bootstrap のモーダル クラスは、モーダル機能にフックするためのいくつかのイベントを公開します。

イベント	説明
見せる	showこのイベントは、インスタンス メソッドが呼び出されるとすぐに発生します。
示した	このイベントは、モーダルがユーザーに表示されるようになったときに発生します (css トランジションが完了するのを待ちます)。
隠れる	hideこのイベントは、インスタンス メソッドが呼び出されるとすぐに発生します。
隠れた	このイベントは、モーダルがユーザーから非表示にされたときに発生します (css トランジションが完了するのを待ちます)。

$ ( '#my-モーダル' ). bind ( 'hidden' , function () {   
  // 何かをする ...
}))

デモ

起動モーダル

このプラグインは、ドロップダウン インタラクションをブートストラップ トップバーまたはタブ付きナビゲーションに追加するためのものです。

ダウンロード

bootstrap-dropdown.js の使用

$ ( '#トップバー' ). ドロップダウン()

マークアップ

ドロップダウン機能を任意の nav 要素にすばやく追加するには、data-dropdown属性を使用します。有効なブートストラップ ドロップダウンは自動的に有効になります。

<ulクラス= "タブ" > 
  <li class = "active" ><a href = "#" >ホーム</a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" >ドロップダウン</a>  
    <ul class = "ドロップダウンメニュー" > 
      <li><a href = "#" >二次リンク</a></li> 
      <li><a href = "#" >その他</a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" >別のリンク</a></li> 
    </ul>
  </li>
</ul>

UI に複数のドロップダウンがある場合は、またはdata-dropdownのようなより重要なコンテナー要素に属性を追加することを検討してください。.tabs.topbar

メソッド

$().ドロップダウン()

特定のトップバーまたはタブ付きナビゲーションのメニューをアクティブ化するためのプログラム API。

デモ

このプラグインは、scrollspy (ナビゲーションの自動更新) インタラクションをブートストラップ トップバーに追加するためのものです。

ダウンロード

bootstrap-scrollspy.js の使用

$ ( '#トップバー' ). scrollSpy ()

マークアップ

scrollspy の動作をナビゲーションに簡単に追加するには、data-scrollspy属性を.topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

メソッド

$().scrollSpy()

自動は、ユーザーのスクロール位置によってナビゲーション ボタンをアクティブにします。

$ ( 「本体 > .トップバー」)。scrollSpy ()

トップバーのアンカー タグには、解決可能な ID ターゲットが必要です。たとえば、 a<a href="#home">home</a>は のような dom 内の何かに対応している必要があり<div id="home"></div>ます。

.scrollSpy('リフレッシュ')

scrollspy は、パフォーマンスのためにナビゲーション ボタンとセクション座標をキャッシュします。このキャッシュを更新する必要がある場合 (動的コンテンツがある場合など) は、この更新メソッドを呼び出すだけです。data 属性を使用して scrollspy を定義した場合は、本体で refresh を呼び出すだけです。

$ ( 「本体」)。scrollSpy ( 「リフレッシュ」)

デモ

このページのトップバー ナビゲーションを確認してください。

このプラグインは、ボタンの状態を管理するための追加機能を提供します。

ダウンロード

bootstrap-buttons.js の使用

$ ( 「.tabs」)。ボタン()

メソッド

$().button('トグル')

プッシュ状態を切り替えます。btn がアクティブになっているように見えます。

通知data-toggle属性を使用して、ボタンの自動切り替えを有効にすることができます。

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('読み込み中')

ボタンの状態を読み込み中に設定します - ボタンを無効にし、テキストを読み込み中のテキストに切り替えます。読み込み中のテキストは、ボタン要素で data 属性を使用して定義する必要がありますdata-loading-text。

<button class = "btn" data-loading-text = "���み込み中..." > ... </button>   

$().button('リセット')

ボタンの状態をリセット - テキストを元のテキストに入れ替えます。

$().ボタン(文字列)

ボタンの状態をリセット - テキストを任意のデータ定義のテキスト状態にスワップします。

<button class = "btn" data-complete-text = "finished!" > ... </button>   
<スクリプト>
  $('.btn').button('完了')
</scrip>

デモ

デモを読み込んでいます デモを切り替え

このプラグインは、すばやく動的なタブとピルの機能を追加します。

ダウンロード

bootstrap-tabs.js の使用

$ ( 「.tabs」)。タブ()

マークアップ

data-tabsordata-pills属性を指定するだけで、javascript を記述することなく、タブまたはピルのナビゲーションを有効にすることができます。

 <ul class = "tabs" data-tabs = "tabs" > ... </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 class = "active" id = "home" > ... </div>  
  <div id = "プロフィール" > ... </div> 
  <div id = "メッセージ" > ... </div> 
  <div id = "設定" > ... </div> 
</div>
 
<スクリプト>
  $ (関数() {  
    $ ( 「.tabs」)。タブ()
  }))
</script>

イベント

イベント	説明
変化する	このイベントは、タブの変更時に発生します。event.targetとを使用しevent.relatedTargetて、それぞれアクティブなタブと前のアクティブなタブをターゲットにします。

$ ( 「#.tabs」)。bind ( '変更' ,関数( e ) {   
  e . ターゲット// アクティブ化されたタブ
  e . relatedTarget // 前のタブ
}))

デモ

• 家
• プロフィール
• メッセージ
• 設定
• 落ちる
  • @太い
  • @mdo

Jason Frame によって書かれた優れた jQuery.tipsy プラグインに基づいています。twipsy は更新されたバージョンで、画像に依存せず、アニメーションに css3 を使用し、タイトルの保存に data-attributes を使用します!

ダウンロード

bootstrap-twipsy.js の使用

$ ( '#例' ). twipsy (オプション)

オプション

名前	タイプ	デフォルト	説明
アニメーション化	ブール値	真実	ツールチップに CSS フェード トランジションを適用する
遅延イン	番号	0	ツールチップを表示するまでの遅延 (ミリ秒)
遅延アウト	番号	0	ツールチップを非表示にするまでの遅延 (ミリ秒)
後退する	ストリング	''	ツールチップのタイトルがない場合に使用するテキスト
配置	ストリング	'その上'	ツールチップの配置方法 - 上 | 以下 | 左 | 左 | 右
html	ブール値	間違い	ツールチップ内の HTML コンテンツを許可します
住む	ブール値	間違い	個々のイベント ハンドラの代わりにイベント委任を使用する
オフセット	番号	0	ターゲット要素からのツールチップのピクセル オフセット
題名	文字列、関数	'題名'	タイトル テキストを取得するための属性またはメソッド
引き金	ストリング	「ホバー」	ツールチップのトリガー方法 - ホバー | フォーカス | マニュアル
テンプレート	ストリング	[デフォルトのマークアップ]	twipsy のレンダリングに使用される html テンプレート。

注意個々の twipsy インスタンス オプションは、データ属性を使用して指定することもできます。

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'タイトル テキスト' >テキスト</a>    

メソッド

$().twipsy(オプション)

twipsy ハンドラーを要素コレクションにアタッチします。

.twipsy('ショー')

要素の twipsy を明らかにします。

$ ( 「#要素」)。twipsy ( 「表示」)

.twipsy('非表示')

要素の twipsy を非表示にします。

$ ( 「#要素」)。twipsy ( 「非表示」)

.twipsy(真)

要素の twipsy クラス インスタンスを返します。

$ ( 「#要素」)。ツイプシー(真)

注または、 で取得することもできます$().data('twipsy')。

デモ

ポップオーバー プラグインは、アプリケーションにポップオーバーを追加するためのシンプルなインターフェースを提供します。これはbootstrap-twipsy.jsプラグインを拡張するため、プロジェクトにポップオーバーを含めるときは、必ずそのファイルも取得してください!

注記 bootstrap-popover.js の前に、bootstrap- twipsy.jsファイルを含める必要があります。

ダウンロード

bootstrap-popover.js の使用

$ ( '#例' ). ポップオーバー(オプション)

オプション

名前	タイプ	デフォルト	説明
アニメーション化	ブール値	真実	ツールチップに CSS フェード トランジションを適用する
遅延イン	番号	0	ツールチップを表示するまでの遅延 (ミリ秒)
遅延アウト	番号	0	ツールチップを非表示にするまでの遅延 (ミリ秒)
後退する	ストリング	''	ツールチップのタイトルがない場合に使用するテキスト
配置	ストリング	'右'	ツールチップの配置方法 - 上 | 以下 | 左 | 左 | 右
html	ブール値	間違い	ツールチップ内の HTML コンテンツを許可します
住む	ブール値	間違い	個々のイベント ハンドラの代わりにイベント委任を使用する
オフセット	番号	0	ターゲット要素からのツールチップのピクセル オフセット
題名	文字列、関数	'題名'	タイトル テキストを取得するための属性またはメソッド
コンテンツ	文字列、関数	「データコンテンツ」	コンテンツ テキストを取得するための文字列またはメソッド。何も指定されていない場合、コンテンツは data-content 属性から供給されます。
引き金	ストリング	「ホバー」	ツールチップのトリガー方法 - ホバー | フォーカス | マニュアル
テンプレート	ストリング	[デフォルトのマークアップ]	ポップオーバーのレンダリングに使用される html テンプレート。

個々のポップオーバー インスタンス オプションは、データ属性を使用して指定することもできます。

<aデータ配置= "下" href = "#"クラス= "btn 危険" rel = "ポップオーバー" >テキスト</a>    

メソッド

$().popover(オプション)

要素コレクションのポップオーバーを初期化します。

.popover('表示')

要素のポップオーバーを表示します。

$ ( 「#要素」)。ポップオーバー( '表示' )

.popover('隠す')

要素のポップオーバーを非表示にします。

$ ( 「#要素」)。ポップオーバー( '隠す' )

デモ

ホバーでポップオーバー

アラート プラグインは、アラートにクローズ機能を追加するための非常に小さなクラスです。

ダウンロード

bootstrap-alerts.js の使用

$ ( ".アラートメッセージ" ). アラート()

マークアップ

data-alertアラート メッセージに属性を追加するだけで、アラート メッセージにクローズ機能が自動的に付与されます。

オプション

名前	タイプ	デフォルト	説明
セレクタ	ストリング	'。近い'	アラートをクローズするために対象とするセレクター。

メソッド

$().アラート()

すべてのアラートをクローズ機能でラップします。閉じたときにアラートがアニメーション化されるようにするには、アラートに.fadeand.inクラスが既に適用されていることを確認してください。

.alert('閉じる')

アラートを閉じます。

$ ( ".アラートメッセージ" ). アラート( 「閉じる」)

デモ