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

이번에는 디렉토리 메뉴를 구현하기 위한 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는 다양한 옵션 설정을 제공하며 프로젝트의 실제 필요에 따라 다양한 옵션 매개변수를 설정할 수 있습니다. 다음은 주요 매개변수 옵션에 대한 소개입니다.

믿습니다. 이 기사의 사례를 읽으신 후, 더 흥미로운 정보를 얻으려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

jQuery 플러그인을 사용하여 업로드된 파일의 크기와 형식을 제한하는 방법

jQuery를 구현하여 XML 파일을 구문 분석하고 js 파일을 동적으로 추가하는 방법

자세한 설명 jQuery에서 XML 파일을 읽고 분석하는 단계

위 내용은 jQuery 플러그인 Tocify 동적 노드가 디렉토리 메뉴를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!