欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery插件之Tocify動態(tài)節(jié)點目錄菜單生成器附源碼下載

 更新時間:2016年01月08日 11:41:54   投稿:mrr  
Tocify是一個能夠動態(tài)生成文章節(jié)點目錄的jQuery插件,通過本文給大家分享jQuery插件之Tocify動態(tài)節(jié)點目錄菜單生成器,對tocify菜單生成器相關(guān)知識感興趣的朋友一起學習吧

Tocify是一個能夠動態(tài)生成文章節(jié)點目錄的jQuery插件。假如我們有一篇很長的文章,文章有多個節(jié)點,那么使用Tocify可以根據(jù)節(jié)點元素動態(tài)生成文章目錄,點擊目錄可以平滑滾動到對應的節(jié)點,當然當滾動頁面時,目錄結(jié)構(gòu)會根據(jù)當前監(jiān)聽到的節(jié)點進行切換到當前目錄狀態(tài)。


效果展示         源碼下載

Tocify目前支持Twitter Bootstrap和jQueryUI Themeroller兩種主題風格,我們可以根據(jù)實際項目任選其中一種風格,另外必要條件jQuery 1.7.2+和jQueryUI Widget Factory 1.8.21+。放心在IE7+即現(xiàn)代瀏覽器上使用。

引入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結(jié)構(gòu)

創(chuàng)建一個DIV標簽,然后給這個標簽添加一個ID或者Class,例如:toc

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

這個div#toc它默認是空的內(nèi)容,它用來動態(tài)生成文章目錄,那文章目錄如何動態(tài)關(guān)聯(lián)文章節(jié)點的呢?我們還需要把文章節(jié)點做一些規(guī)劃,如:

<div class="wrap"> 
<h1>Tocify</h1> 
<br /> 
<section> 
<h2>節(jié)點1</h2> 
<p>內(nèi)容</p> 
</section> 
<br /> 
<section> 
<h2>節(jié)點2</h2> 
<p>內(nèi)容</p> 
</section> 
... 
</div>

以上的HTML結(jié)構(gòu)代碼大家可以修改tocify的CSS文件來滿足你項目視覺的需求。

Javascript

使用jQuery選擇選中我們的toc元素,然后通過tocify()方法調(diào)用Tocify插件。

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

如此,運行網(wǎng)頁,一個動態(tài)的文章目錄就生成了。

選項設(shè)置

Tocify提供了豐富的選項設(shè)置,我們可以根據(jù)項目實際需求設(shè)置不同的選項參數(shù)。以下是主要的幾個參數(shù)選項介紹:

選項 說明 默認值
context 任意可用的jQuery選擇器 "body"
selectors 文章節(jié)點,可以關(guān)聯(lián)生成目錄 "h1,h2,h3"
showAndHide 是否展示二級目錄結(jié)構(gòu) true
showEffect 目錄展示效果:"none", "fadeIn", "show", or "slideDown" "slideDown"
showEffectSpeed 目錄展示速度:"slow", "medium", "fast", 或數(shù)字(毫秒) "medium"
hideEffect 目錄隱藏效果:"none", "fadeOut", "hide", "slideUp" "none"
hideEffectSpeed 目錄隱藏速度:"slow", "medium", "fast", 或數(shù)字(毫秒) "medium"
smoothScroll 當點擊目錄節(jié)點菜單時,是否平滑滾動到文章對應的節(jié)點內(nèi)容 true
smoothScrollSpeed 平滑滾動速率,可以是數(shù)字(毫秒) or String: "slow", "medium", or "fast" "medium"
scrollTo 當頁面滾動時,頁面頂端與目錄之間的間隔 0
showAndHideOnScroll 當滾動頁面時,是否顯示和隱藏目錄子菜單 true
theme 內(nèi)容展示風格,可以是"bootstrap", "jqueryui", or "none" "bootstrap"

相關(guān)文章

最新評論