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

ダウンロード

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

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

オプション

名前	タイプ	デフォルト	説明
背景	ブール値	間違い	モーダル背景要素が含まれています
キーボード	ブール値	間違い	エスケープキーが押されたときにモーダルを閉じます
見せる	ブール値	間違い	クラスの初期化時にモーダルを開く

マークアップ

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

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

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

メソッド

.modal(オプション)

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

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

.modal('トグル')

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

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

.modal('表示')

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

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

.modal('隠す')

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

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

.modal(真)

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

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

注意または、これは で取得できます$().data('modal')。

イベント

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

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

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

デモ

起動モーダル

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

ダウンロード

boostrap-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 (ナビゲーションの自動更新) インタラクションをブートストラップ トップバーに追加するためのものです。

ダウンロード

boostrap-scrollspy.js の使用

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

マークアップ

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 ( 「リフレッシュ」)

デモ

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

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

ダウンロード

boostrap-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> 
</ul>
 
<スクリプト>
  $ (関数() {  
    $ ( 「.tabs」)。タブ()
  }))
</script>

デモ

• 家
• プロフィール
• メッセージ
• 設定

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

ダウンロード

bootstrap-twipsy.js の使用

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

オプション

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

メソッド

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

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

.twipsy('ショー')

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

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

.twipsy('非表示')

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

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

.twipsy(真)

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

$ ( 「#要素」)。twipsy (真)

注意または、これは で取得できます$().data('twipsy')。

デモ

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

ダウンロード

boostrap-popover.js の使用

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

オプション

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

メソッド

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

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

.popover('表示')

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

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

.popover('隠す')

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

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

デモ

ホバーでポップオーバー

The alert plugin is a super tiny class for adding close functionality to alerts.

Download

Using bootstrap-alerts.js

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

Markup

Just add a data-alert attribute to your alert messages to automatically give them close functionality.

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert-message").alert('close')

Demo