pemalam jQuery Tocify penjana menu direktori nod dinamik dengan kod sumber download_jquery

Tocify ialah pemalam jQuery yang boleh menjana direktori nod artikel secara dinamik. Jika kita mempunyai artikel panjang dengan berbilang nod, maka Tocify boleh digunakan untuk menjana direktori artikel secara dinamik berdasarkan elemen nod Mengklik pada direktori boleh menatal ke nod yang sepadan Sudah tentu, apabila menatal halaman, struktur direktori akan berdasarkan pemantauan semasa Nod ditukar kepada keadaan direktori semasa.

Paparan kesan Muat turun kod sumber

Tocify kini menyokong dua gaya tema: Twitter Bootstrap dan jQueryUI Themeroller Kami boleh memilih salah satu gaya mengikut projek sebenar Selain itu, keperluan yang diperlukan ialah jQuery 1.7.2 dan jQueryUI Widget Factory 1.8.21. Selamat digunakan pada IE7, pelayar moden.

Perkenalkan fail CSS dan Javascript

fail css

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

Fail 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> 

Struktur HTML

Buat teg DIV, kemudian tambahkan ID atau Kelas pada teg ini, contohnya: toc

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

Div#toc ini mempunyai kandungan kosong secara lalai Ia digunakan untuk menjana direktori artikel secara dinamik. Bagaimanakah direktori artikel mengaitkan nod artikel secara dinamik. Kami juga perlu membuat beberapa rancangan untuk nod artikel, seperti:

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

Untuk kod struktur HTML di atas, anda boleh mengubah suai fail CSS tocify untuk memenuhi keperluan visual projek anda.

Javascript

Gunakan jQuery untuk memilih elemen toc kami, dan kemudian panggil pemalam Tocify melalui kaedah tocify().

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

Dengan cara ini, jalankan halaman web dan direktori artikel dinamik akan dihasilkan.

Tetapan pilihan

Tocify menyediakan banyak tetapan pilihan, dan kami boleh menetapkan parameter pilihan yang berbeza mengikut keperluan sebenar projek. Berikut ialah pengenalan kepada pilihan parameter utama:

Pilihan	Penerangan	Nilai lalai
konteks	Mana-mana pemilih jQuery yang tersedia	"badan"
pemilih	Nod artikel boleh dikaitkan untuk menjana direktori	"h1,h2,h3"
tunjukkanDanSembunyikan	Sama ada mahu memaparkan struktur direktori sekunder	benar
showEffect	Kesan paparan direktori: "tiada", "fadeIn", "show" atau "slideDown"	"slideDown"
showEffectSpeed	Kelajuan paparan direktori: "perlahan", "sederhana", "pantas" atau nombor (milisaat)	"sederhana"
hideEffect	Kesan penyembunyian direktori: "tiada", "fadeOut", "hide", "slideUp"	"tiada"
hideEffectSpeed	Kelajuan menyembunyikan direktori: "perlahan", "sederhana", "pantas" atau nombor (milisaat)	"sederhana"
Tatal lancar	Apabila mengklik menu nod direktori, sama ada untuk menatal dengan lancar ke kandungan nod yang sepadan dengan artikel	benar
smoothScrollSpeed	Kadar tatal yang lancar, boleh dalam bentuk nombor (milisaat) atau Rentetan: "perlahan", "sederhana" atau "cepat"	"sederhana"
tatalKe	Apabila halaman menatal, jurang antara bahagian atas halaman dan jadual kandungan	0
showAndHideOnScroll	Sama ada mahu menunjukkan dan menyembunyikan submenu direktori semasa menatal halaman	benar
tema	Gaya paparan kandungan, boleh menjadi "bootstrap", "jqueryui" atau "tiada"	"bootstrap"