스크롤 모니터링 (ScrollSpy) 플러그인, 즉 탐색 플러그인의 자동 업데이트는 스크롤 막대의 위치에 따라 해당 탐색 대상을 자동으로 업데이트합니다. 기본 구현은 스크롤 할 때 스크롤 바 위치를 기반으로 네비게이션 바에 .active 클래스를 추가하는 것입니다.
플러그인의 기능을 별도로 참조하려면 scrollspy.js를 참조해야합니다. 또는 Bootstrap 플러그인 개요 장에서 언급했듯이 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조하십시오.
1. 사용법
최상위 내비게이션에 스크롤 청취 동작을 추가 할 수 있습니다.
1. 데이터 속성을 통해 : Data-Spy = "Scroll"을 듣고 싶은 요소 (일반적으로 본문)에 추가하십시오. 그런 다음 부트 스트랩 .NAV 구성 요소 또는 클래스 속성의 상위 요소의 ID에 속성 데이터 타겟을 추가하십시오. 제대로 작동하려면 페이지 본문에 듣고 싶은 링크의 ID와 일치하는 요소가 있는지 확인해야합니다.
<body data-spy = "scroll"data-target = ". navbar-example"> ... <div> <ul> ... </ul> </div> ... </body>
2. JavaScript를 통해 : JavaScript를 통해 Scroll Monitoring을 호출하고, 청취 할 요소를 선택한 다음 .scrollspy () 함수를 호출 할 수 있습니다.
$ ( 'body'). scrollspy ({target : '.navbar-example'})
2. 스크롤 모니터링
스크롤 청취 플러그인은 스크롤 막대가 위치한 위치를 기반으로 내비게이션 항목을 자동으로 업데이트하고 디스플레이 내비게이션 항목이 강조 표시됩니다.
// 기본 예 <nav id = "nav"> <a href = "#"> 웹 개발 </a> <ul> <li> <a href = "#html5"> html5 </a> </li> <li> <a href = "#bootstrap"> bootstrap </a> <li> <a href = "#"#"#"#"#"# <span> </span> </a> <ul> <li> <a href = "#jQuery"> jQuery </a> </li> <li> <a href = "#yui"> yui </a> <li> <a href = "#extjs"> extjs </a </li> </li> </li> </li> </li> </li> </li> </li> </li> data-offset = "0"data-target = "#nav"data-spy = "scroll"style = "height : 200px; 오버 플로; 오버 플로우 : 자동; 위치 : 상대; 패딩 : 0 10px;"> <h4 id = "html5"> html5 </h4> <p> Html4.01에 발표 된 후에 발표 된 후에 발표 된 후에 html5 </h4> <p> html5 </h4> <p> HTML5 및 기타 표준이 남았습니다. 웹 표준화 움직임의 개발을 촉진하기 위해 일부 회사는 Web HyperText Application Technology Working Group (HyperText Application Application Technology Working Group-Whatwg의 웹 조직을 설립하기 위해 힘을 합쳐서 웹 양식 및 응용 프로그램에 전념하는 반면 W3C (월드 와이드 웹 컨소시엄)는 XHTML2.0에 중점을두고 있습니다. XHTML2.0에 중점을두고 있습니다. Id = "bootstrap"> bootstrap </h4> <p> Bootstrap은 현재 HTML, CSS 및 JavaScript를 기반으로합니다. Bootstrap은 Dynamic CSS Language로 작성된 우아한 HTML 및 CSS 사양을 제공합니다. Bootstrap은 Github에서 인기있는 오픈 소스 프로젝트를 제공했습니다. 성능 최적화를위한 소스 코드 [3] </p> <h4 id = "jQuery"> jQuery는 프로토 타입 후의 또 다른 우수한 JavaScript 라이브러리이며 CSS3과 호환되며 다양한 브라우저와 함께 호환됩니다 후속 버전은 더 이상 IE6/7/8 브라우저를 사용하면 HTML (표준 Universal Markup 언어에 따라 응용 프로그램), 애니메이션 효과를 얻을 수 있으며 웹 사이트에 대한 AJAX 상호 작용을 편리하게 제공 할 수 있습니다 즉, HTML 컨텐츠와는 별개로, 명령을 호출하기 위해 HTML에 많은 JS를 삽입 할 필요가 없습니다. 비가 내린 후에는 많은 우수한 프레임 워크가 데스크탑 브라우저와 모바일 측면에서 가장 뛰어난 프레임 워크가 등장했습니다. 미래. </p <h4 id = "extjs"> extjs </h4> <p> extjs는 RIA를 개발할 수 있습니다. Java, PHP 등은 YUI 기술을 기반으로했으며 Developer Jackslocum은 UI 인터페이스의 CSS 스타일 응용 프로그램을 참조하여 시각적 구성 요소를 구성합니다
아래 그림과 같이 두 가지 중요한 속성이 있습니다.
추신 : 메뉴와 쉬운 시간에서 데이터 타겟은 설정없이 스크롤 모니터링 강조 표시를 실현할 수 있습니다. 그러나 여러 탐색시 중 하나를 연결하지 않으면 오류가 발생하므로 일반적으로 추가해야합니다.
JavaScript 스크립팅 방법을 사용하는 경우 데이터를 제거하고 스크립트 속성 정의 (오프셋, 스파이 및 대상을 사용할 수 있습니다. 특정 방법은 다음과 같습니다.
// 속성 정의 $ ( '#content'). scrollspy ({오프셋 : 0, target : '#nav',});새 항목으로 전환 할 이벤트도 있습니다.
// 이벤트는 내비게이션에 묶여 있습니다
$ ( '#nav'). on ( 'activate.bs.scrollspy', function () {
경고 ( '이 이벤트는 새 항목이 활성화 된 후에 트리거됩니다!');
});
스크롤 청취에서 컨테이너 dom을 업데이트하는 방법도 있습니다.
// html 부분
<섹션> <h4 id = "html5"> html5 <a href = "#"onclick = "removesec (this)"> this </a> </h4> <p> ... </p> </section>
// 컨텐츠를 삭제할 때 DOM을 새로 고침하여 내비게이션 모니터링의 오정렬을 피하십시오.
함수 제거 (e) {$ (e) .parents ( '. sec'). remove (); $ ( '#content'). scrollspy ( 'refresh');}참고 :이 방법은 데이터* 선언을 사용해야합니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.