jQuery 플러그인 Tocify 동적 노드가 디렉토리 메뉴를 구현합니다.-JS 튜토리얼-php.cn

jQuery 플러그인 Tocify 동적 노드가 디렉토리 메뉴를 구현합니다.

php中世界最好的语言

풀어 주다： 2018-04-23 11:46:07

원래의

2125명이 탐색했습니다.

이번에는 디렉토리 메뉴를 구현하기 위한 jQuery 플러그인 Tocify 동적 노드를 가져왔습니다. jQuery 플러그인 Tocify 동적 노드에서 디렉토리 메뉴를 구현하기 위한 주의 사항은 무엇입니까? 봐.

Tocify는 기사 노드 디렉터리를 동적으로 생성할 수 있는 jQuery 플러그인입니다. 여러 노드가 있는 긴 기사가 있는 경우 Tocify를 사용하여 노드 요소를 기반으로 기사 디렉토리를 동적으로 생성할 수 있습니다. 디렉토리를 클릭하면 해당 노드로 원활하게 스크롤할 수 있습니다. 물론 페이지를 스크롤할 때 디렉토리 구조는 현재를 기반으로 합니다. 모니터링되는 노드는 현재 디렉터리 state로 전환됩니다.

효과 표시 소스 코드 다운로드

Tocify는 현재 Twitter Bootstrap 및 jQueryUI Themeroller 두 가지 테마 스타일을 지원합니다. 실제 프로젝트에 따라 스타일 중 하나를 선택할 수 있습니다. 또한 필요한 조건은 jQuery 1.7입니다. .2+ 및 jQueryUI 위젯 팩토리 1.8.21+. 최신 브라우저인 IE7+에서 사용할 수 있으니 안심하세요.

CSS 및 Javascript 파일

css 파일

<link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> 
<link type="text/css" rel="stylesheet" href="bootstrap.css" />

로그인 후 복사

JavaScript 파일

<script src="jquery-1.7.2.min.js"></script> 
<script src="jquery-ui-1.9.1.custom.min.js"></script> 
<script src="jquery.tocify.min.js""></script>

로그인 후 복사

HTML 구조

p 태그를 생성한 다음 이 태그에 ID 또는 클래스를 추가하세요. 예를 들어 : toc

<p id="toc"></p>

로그인 후 복사

이 p#toc에는 기본적으로 빈 콘텐츠가 있습니다. 기사 디렉토리를 동적으로 생성하는 데 사용됩니다. 기사 디렉토리는 어떻게 기사 노드를 동적으로 연결합니까? 또한 다음과 같이 기사 노드에 대한 몇 가지 계획을 세워야 합니다.

<p class="wrap"> 
<h1>Tocify</h1> 
<br /> 
<section> 
<h2>节点1</h2> 
<p>内容</p> 
</section> 
<br /> 
<section> 
<h2>节点2</h2> 
<p>内容</p> 
</section> 
... 
</p>

로그인 후 복사

위의 HTML 구조 코드 tocify의 CSS 파일을 수정하여 프로젝트의 시각적 요구 사항을 충족할 수 있습니다.

Javascript

jQuery를 사용하여 toc 요소를 선택한 다음 tocify() 메서드를 통해 Tocify 플러그인을 호출합니다.

$(function() { 
$("#toc").tocify(); 
});

로그인 후 복사

이런 식으로 웹페이지를 실행하면 동적 기사 디렉토리가 생성됩니다.

옵션 설정

Tocify는 다양한 옵션 설정을 제공하며 프로젝트의 실제 필요에 따라 다양한 옵션 매개변수를 설정할 수 있습니다. 다음은 주요 매개변수 옵션에 대한 소개입니다.

Options	Description	기본값
context	사용 가능한 jQuery 선택기	"body"
selectors	Article 노드를 연결하여 목차 생성 가능	"h1 ,h2 ,h3"
showAndHide	보조 디렉터리 구조를 표시할지 여부	true
showEffect	디렉터리 표시 효과: "none", "fadeIn", "show" 또는 "slideDown"	"슬라이드다운"
showEffectSpeed	디렉터리 표시 속도: "느림", "보통", "빠름" 또는 숫자(밀리초)	"medium"
hideEffect	디렉터리 숨겨진 효과: "none", "fadeOut", "hide", "slideUp"	"none"
hideEffectSpeed	디렉터리 숨기기 속도: "느림", "보통", "빠름" 또는 숫자(밀리초)	"보통"
smoothScroll	디렉터리 노드 메뉴를 클릭할 때 기사에 해당하는 노드 콘텐츠로 부드럽게 스크롤할지 여부	true
smoothScrollSpeed	부드러운 스크롤 속도(숫자(밀리초) 또는 String): "느림", "보통" 또는 "빠름"	"보통"
scrollTo	페이지가 스크롤될 때 페이지 상단과 목차 사이의 간격	0
showAndHideOnScroll	페이지를 스크롤할 때 디렉토리 하위 메뉴	true
theme	콘텐츠 표시 스타일을 표시하고 숨길지 여부. "부트스트랩", "jqueryui" 또는 "없음"	"부트스트랩"