jQuery 플러그인 Tocify 소스 코드가 포함된 동적 노드 디렉터리 메뉴 생성기 download_jquery

Tocify는 기사 노드의 디렉터리를 동적으로 생성할 수 있는 jQuery 플러그인입니다. 여러 노드가 있는 긴 기사가 있는 경우 Tocify를 사용하여 노드 요소를 기반으로 기사 디렉토리를 동적으로 생성할 수 있습니다. 디렉토리를 클릭하면 해당 노드로 원활하게 스크롤할 수 있습니다. 현재 모니터링을 기반으로 노드가 현재 디렉터리 상태로 전환됩니다.

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

Tocify는 현재 Twitter Bootstrap과 jQueryUI Themeroller의 두 가지 테마 스타일을 지원합니다. 또한 실제 프로젝트에 따라 스타일 중 하나를 선택할 수 있습니다. 또한 필요한 요구 사항은 jQueryUI Widget Factory 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" /> 

자바스크립트 파일

<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 구조

DIV 태그를 생성한 다음 이 태그에 ID 또는 클래스를 추가합니다. 예: toc

<div id="toc"></div>

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

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

위 HTML 구조 코드의 경우 프로젝트의 시각적 요구 사항에 맞게 tocify의 CSS 파일을 수정할 수 있습니다.

자바스크립트

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

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

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

옵션 설정

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

옵션	설명	기본값
컨텍스트	사용 가능한 jQuery 선택기	"몸"
선택기	기사 노드를 연결하여 디렉토리를 생성할 수 있습니다	"h1,h2,h3"
표시 및 숨기기	보조 디렉터리 구조 표시 여부	그렇습니다
쇼이펙트	디렉터리 표시 효과: "none", "fadeIn", "show" 또는 "slideDown"	"슬라이드다운"
showEffectSpeed	디렉터리 표시 속도: "느림", "보통", "빠름" 또는 숫자(밀리초)	"중간"
효과 숨기기	디렉토리 숨기기 효과: "none", "fadeOut", "hide", "slideUp"	"없음"
hideEffectSpeed	디렉터리 숨김 속도: "느림", "보통", "빠름" 또는 숫자(밀리초)	"중간"
부드러운 스크롤	디렉토리 노드 메뉴 클릭 시 기사에 해당하는 노드 콘텐츠로 원활하게 스크롤되는지 여부	그렇습니다
부드러운스크롤 속도	부드러운 스크롤 속도는 숫자(밀리초) 또는 문자열일 수 있습니다: "느림", "중간" 또는 "빠름"	"중간"
스크롤	페이지 스크롤 시 페이지 상단과 목차 사이의 공백	0
ShowAndHideOnScroll	페이지 스크롤 시 디렉토리 하위 메뉴 표시 여부	그렇습니다
테마	콘텐츠 표시 스타일은 "bootstrap", "jqueryui" 또는 "none"일 수 있습니다	"부트스트랩"