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