Home > TagScript > html,cssテンプレート > Bootstrap > Bootstrap 4 ドキュメントの和訳

JavaScript

新規作成日 2017-01-06
最終更新日

原文:JavaScript

jQuery上で、私たちの選択可能なJavaScriptプラグインをビルドする、Bootstrapを生活に導入します。それぞれのプラグイン、データとプログラムのAPIオプションなどについて学びます。

それぞれ、あるいは、コンパイル済み

Individual or compiled

プラグインは、(Bootstrapのそれぞれの*.jsファイルを使用して)、あるいは、bootstrap.jsや軽量化されたbootstrap.min.jsを使用して、すべて一度に、(両方を含めてはいけません)個別に含めることができます。

依存関係

Dependencies

いくつかのプラグインとCSSコンポーネントは、他のプラグインに依存しています。あなたが、個別にプラグインを組み込む場合、ドキュメントで、これらの依存関係のための確認するために、確認します。また、すべてのプラグインが、jQueryに依存しているとこに注意して下さい。(これは、jQueryが、プラグイン・ファイルの前に組み込まれている必要があることを示しています)。サポートされているjQueryのバージョンを確認するには、package.jsonを参照してください。

また、私たちのドロップダウン、ポップオーバーとツールチップは、Popper.jsに依存しています。

データ属性

Data attributes

ほとんど全てのBootstrapプラグインは、有効にすることができます。そして、データ属性で単独でHTMLを通して設定することができます。(JavaScriptの機能を使用するために推奨される方法)。確実に、1つの要素の上で、データ属性の一つの設定だけを使用て下さい。(例えば、同じボタンからツールチップとモーダルをトリガーすることはできません)。

しかしながら、状況によっては、この機能を無効にすることが望ましい場合があります。データ属性APIを無効にするために、次のように、データAPIを使用した文書の名前空間上のすべてのイベントを解除します。:

$(document).off('.data-api')

他の方法として、特定のプラグインを対象とするために、プラグインの名前を、名前空間としてdata-apiの名前空間と一緒に、以下のように含めます:

$(document).off('.alert.data-api')

イベント

Events

Bootstrapは、ほとんどのプラグインの一意の動作のために、カスタム・イベントを提供します。通常、これらは、不定詞と過去分詞形式でやって来ます。-不定詞では(例。show)、イベントの開始が起動されます。そして、その過去分詞の形式(例。shown)が、動作の完了時に起動されます。

すべての不定詞イベントは、preventDefault()機能を提供します。これは、動作が開始する前に、実行を停止する機能を提供します。また、イベント・ハンドラからfalseを返すと、preventDefault()を自動的に呼び出します。

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

プログラムに基づいたAPI

Programmatic API

また、私たちは、あなたが、純粋に、JavaScript APIによって、すべてのBootstrapプラグインを使用することができるはずだと信じています。すべての公開されたAPIは、一つの連鎖可能なメソッドであり、処理されたコレクションを返します。

$('.btn.danger').button('toggle').addClass('fat')

すべてのメソッドは、特定のメソッドを対象とする文字列、あるいは、何もしない選択可能なオプション・オブジェクトを受け入れる必要があります。(それは、デフォルトの動作でプラグインを開始します):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

また、各々のプラグインは、Constructorプロパティ上で、その生のコンストラクタを公開しています。:$.fn.popover.Constructor.

あなたが、特定のプラグイン・インスタンスを取得したいと思う場合、要素から直接それを取得します。:

$'[rel="popover"]').data('popover').

非同期関数と遷移

Asynchronous functions and transitions

すべてのプログラムに基づいたAPIメソッドは非同期です。そして、遷移が開始されると終了する前に、呼び出し元に戻ります。

遷移が完了したらアクションを実行するために、あなたは、対応するイベントを聞くことができます。

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
 // 折りたたみ領域が展開された後に実行する動作
})

さらに、遷移コンポーネントのメソッド呼び出しは無視されます。

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})
					  // スライド1への移行が終了すると、すぐにスライド2にスライドします
$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
					 // スライド1にスライドし始めて、呼び出し側に帰ります
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
					 // !!スライド1への移行が終了していないので、無視されます!!

既定の設定

Default settings

プラグインのConstructor.Defaultオブジェクトを修正することによって、あなたは、プラグインのためのデフォルトの設定を変更することができます。:

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false
		// モーダル・プラグインの `keyboard`オプションのデフォルトをfalseに変更します

矛盾しない

No conflict

ときどき、それは、他のUIフレームワークで、Bootstrapプラグインを使用するために必要です。これらの状況で、名前空間の衝突は、時折、発生することがあります。この場合、あなたは、値を元に戻したいプラグインで、.noConflictを呼び出すことができます。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
							     // 以前に割り当てられた値に$.fn.buttonを返します。
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
							     // $().bootstrapBtnにBootstrap機能を与えます

バージョン番号

Version numbers

BootstrapのjQueryプラグインの各々のバージョンは、プラグインのコンストラクタのVERSIONプロパティを通してアクセスすることができます。例えば、ツールチップのプラグインのために:

$.fn.tooltip.Constructor.VERSION // => "4.0.0-beta.2"

JavaScriptが無効である場合、特別な代替品はありません。

No special fallbacks when JavaScript is disabled

Bootstrapのプラグインは、JavaScriptが無効のとき、特に優雅に元に戻りません。この場合のユーザーの経験が気になる場合は、<noscript>を使用してユーザーに状況を説明し(JavaScriptを再び有効にする方法)、独自のカスタムフォールバックを追加することができます。

サードパーティ製のライブラリ

Third-party libraries

Bootstrapは、PrototypeやjQuery UIのようなサードパーティ製のJavaScriptライブラリを公式にサポートしていません。.noConflictとnamespacedイベントにもかかわらず、あなた自身で修正する必要がある互換性の問題があるかもしれません。

ユーティリティ

Util

すべてのBootstrapのJavaScriptファイルは、util.jsに依存しています。そして、それは、他のJSファイルと一緒に組み込まれる必要があります。あなたが、コンパイルされた(または軽量化された)bootstrap.jsを使用している場合、これを組み込む必要性はありません。-それは、既に、そこにあります。

util.jsには、ユーティリティ関数、そして、transitionEndイベントのための基本的なヘルパーと同じように、CSS移行エミュレーターが含まれています。それは、CSSの移行をサポートするための確認をするために、そして、移行を捕まえるために、他のプラグインによって使用されます。

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」