スクロール監視(Scrollspy)プラグイン、つまり、ナビゲーションプラグインの自動更新は、スクロールバーの位置に応じて対応するナビゲーションターゲットを自動的に更新します。その基本的な実装は、スクロール時のスクロールバーの位置に基づいて、ナビゲーションバーにアクティブクラスを追加することです。
プラグインの機能を個別に参照する場合は、scrollspy.jsを参照する必要があります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
1。使用法
スクロールリスニング動作をトップナビゲーションに追加できます。
1。データ属性を介して:聴取したい要素(通常はボディ)にdata-spy = "scroll"を追加します。次に、bootstrap .navコンポーネントまたはクラスのプロパティの親要素のIDで属性データターゲットを追加します。適切に機能するためには、聴きたいリンクのIDに一致する要素がページのボディにあることを確認する必要があります。
<body data-spy = "scroll" data-target = "。vavbar-example"> ... <div> <ul> ... </ul> </div> ... </body>
2。JavaScriptを介して:JavaScriptを介してスクロール監視を呼び出し、聴く要素を選択し、.scrollspy()関数を呼び出すことができます。
$( 'body')。scrollspy({target: '.navbar-example'})
2。スクロール監視
スクロールリスニングプラグインは、スクロールバーが配置されている位置に基づいてナビゲーションアイテムを自動的に更新し、ハイライトされたナビゲーションアイテムを表示します。
// <nav id = "nav"> <a href = "#"> web Development </a> <ul> <li> <li> <a href = "#html5"> html5 </a> </li> <li> <a href = "#bootstrap"> boottrap </a> <span> </span> </a> <ul> <li> <a href = "#jquery"> jquery </a> </li> <li> <a href = "#yui"> yui </a> </li> <li> <a href = "#extjs"> extjs </a> </li> data-offset = "0" data-target = "#nav" data-spy = "scroll" style = "height:" height:200px; overflow:auto; position:relative; padding:0 10px; "> <h4 id =" html5 "> html5 </h4> <p> HTML5およびその他の基準は残されました。 Web Standardization Movementの開発を促進するために、一部の企業は力を合わせてWeb Hypertext Application Technology Working Group(HyperTed Technology Working Group-WhatWG-WhatWGのWeb組織を確立しました。 id = "Bootstrap> Bootstrapは、Twitterからのフロントエンドフレームワークです。 Bootstrapは、Dynamic CSS言語ではあまり発売されていないエレガントなHTMLとCSSの仕様を提供し、NASAのMSNBC(Microsoft NBC)を含む人気のあるオープンソースプロジェクトを提供しています。 [3] </p> <h4 id = jquery </h4> <p> jqueryは、プロトタイプの後の別の優れたJavascriptライブラリであり、CSS3と互換性があり、さまざまなブラウザー、FF 1.5+、Saf 2.0+ IE6/7/8のブラウザは、ユーザーがより便利にHTML(標準的なマークアップ言語でアプリケーション)を処理し、アニメーション効果を達成することができますつまり、コマンドを呼び出すためにJSの束を挿入する必要はありません。雨が降った後、多くの優れたフレームワークがデスクトップブラウザと、開発の両方のフレームワークを促進していますid = "extjs"> extjs </h4> <p> extjsは、RIA、つまり豊富なクライアントのAjaxアプリケーションを使用することができます。 ExtjsはもともとYuiテクノロジーに基づいており、Javaswingやその他のメカニズムを参照することにより、視覚的なコンポーネントを整理しました
下の図に示すように、2つの重要な属性があります。
PS:メニューと簡単な時間で、データターゲットは安定して、監視の強調表示を設定せずに理解することもできます。ただし、複数のナビゲーションのときにそれらのいずれかを関連付けない場合、エラーが発生するため、通常は追加する必要があります。
JavaScriptスクリプトメソッドを使用する場合、データ - *を削除し、スクリプト属性の定義:オフセット、スパイ、およびターゲットを使用できます。特定の方法は次のとおりです。
//プロパティ$( '#content')。scrollspy({offset:0、target: '#nav'、});新しいエントリに切り替えるイベントもあります。
//イベントはナビゲーションに縛られています
$( '#nav')。
アラート( 'このイベントは、新しいエントリがアクティブになった後にトリガーされます!');
});
スクロールリスニングでコンテナDOMを更新する方法もあります。
// HTMLパーツ
<section> <h4 id = "html5"> html5 <a href = "#" onclick = "removesec(this)">これを削除</a> </h4> <p> ... </p> </section>
//コンテンツを削除するときは、ナビゲーションの監視の不整合を避けるためにDOMを更新します
関数removesec(e){$(e).parents( '。sec')。remove(); $( '#content')。scrollspy( 'refresh');}注:この方法は、データ - *宣言的なものを使用する必要があります。
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。