ブートストラップでの data-[*] 属性の整理-jsチュートリアル-php.cn

ブートストラップでの data-[*] 属性の整理

亚连

リリース： 2018-05-30 15:40:39

オリジナル

2090 人が閲覧しました

この記事はBootstrapのdata-[*]属性に関する知識をまとめてまとめたものですので、興味のある方はぜひ一緒にご覧ください

【1 data-attribute】

data属性はHTML5の新しい属性です。開発者は、データを保存するためにタグに属性を自由に追加できます。通常、このようなカスタム属性は「data-」で始まります。

保存された（カスタム）データはページのJavaScriptで使用できます。

data-* 属性は 2 つの部分で構成されます:

* 属性名には大文字を含めることはできず、接頭辞「data-」の後に少なくとも 1 文字が必要です。
* 属性値には任意の文字列を指定できます。

端的に言うと、これはデータ属性の適用です。そのため、HTML タグは暗黙的にデータを添付でき、JavaScript はこれらの属性データを読み書きして、対応するアクションやイベントを作成できます。

【Bootstrapの2つのデータ属性】 公式Webサイトには、JavaScriptコードを1行も書かずに、データ属性APIだけですべてのBootstrapプラグインを使用できるとの紹介があります。これは Bootstrap のファーストクラス API であり、最初に選択する必要があります。

これまでネイティブ javascrpt を使用していたときは、まずフロントエンドスタイルのレイアウトとインタラクティブなイベントを決定し、次に JavaScript と HTML DOM ツリーを使用して既存のテキストオブジェクトを操作し、動的な効果やその他のインタラクションを実装していました。

その後、Facebook は、ドロップダウンメニュー、折りたたみ、モーダルボックスなど、多くの基本的な Web ページ効果が一般的に使用され、頻繁に使用されることを発見しました。これらの一般的に使用されるものを標準モデルのセットに抽出し、使用するときはそのルールに従って直接使用するだけでよいのではないか、ということでブートストラップが誕生しました。

端的に言うと、以前は機能要件が最初にあり、それを実装していました。これで関数は基本的にカバーされ、js 操作関数が記述され、css スタイルも記述されました。これを使用したい場合は、そのルールに従って呼び出すだけです。次に、より多様性を持たせるために、bootstrap.js の関数には異なるパラメーター値を設定できます。これらのパラメーター値は、タグに指定した属性に従って設定されます。 (実際、現在、js プラグインは基本的にこのルーチンを使用しています)

タグの class="xxx" 属性は、主にブートストラップの CSS スタイルを使用するためと、識別可能なオブジェクトのクラス名識別子として使用されます。

タグの data-[xx]="yy" 属性は、主にブートストラップコンポーネントとプラグインの使用と呼び出しに使用されます。つまり、bootstrap.js を使用していくつかのインタラクティブな効果を実現します。

【3つのブートストラップ共通データ属性】

1 data-toggle data-toggleは、どのようなイベントタイプがトリガーされるかを指します。一般的に使用されるものは次のとおりです。

data-toggle="dropdown"//下拉菜单
data-toggle="model" //模态框事件
data-toggle="tooltip"//提示框事件
data-toggle="tab"//标签页
data-toggle="collapse"//折叠
data-toggle="popover"//弹出框
data-toggle="button"//按钮事件

ログイン後にコピー

一般イベントはラベルオブジェクトに影響します。それが別のラベルオブジェクトである場合は、data-target を使用してイベントのラベルターゲットを参照する必要があります。そのため、data-loggle と data-target が一緒に使用されることがあります。以下の通り

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 开始演示模态框
</button>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-dialog">
  <p class="modal-content">
   <p class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    code。。。
   </p>
  </p><!-- /.modal-content -->
 </p><!-- /.modal -->
</p>

ログイン後にコピー

2 data-dismiss

モーダルウィンドウを閉じるためにモーダルウィンドウでよく使用されます data-dismiss="modal"

3 data-slide-to、data-slide、data- carouselカルーセルにはride

data-slide-to、data-slide、data-rideが使用されます。

data-slide 属性は、現在の位置を基準にしてスライドの位置を変更するために使用されるキーワード prev または next を受け入れます。

data-slide-to を使用して生のスライドインデックスをカルーセルに渡します。 data-slide-to="2" はスライダーを特定のインデックスに移動し、インデックスは 0 からカウントを開始します。

data-ride="carousel" 属性は、ページが読み込まれたときにアニメーションの再生を開始するカルーセルをマークするために使用されます

上記は、すべての人のためにまとめたものです。将来、すべての人に役立つことを願っています。

関連記事：vseervlet3.0および純粋なjavascript ajax相互作用の例を介してnodeノード要素操作方法を置き換える

角Cliを使用して、Angular 5プロジェクトチュートリアルを生成します。

以上がブートストラップでの data-[*] 属性の整理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。