jQuery插件之Tocify動態(tài)節(jié)點目錄菜單生成器附源碼下載
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)文章
jQuery插件echarts實現(xiàn)的多折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的多折線圖效果,結(jié)合完整實例形式分析了echarts插件繪制多折線圖效果的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery之DOM對象和jQuery對象的轉(zhuǎn)換與區(qū)別分析
這篇文章主要介紹了jQuery之DOM對象和jQuery對象的轉(zhuǎn)換與區(qū)別分析,對比分析了DOM對象和jQuery對象的原理與用法,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01jquery使用each方法遍歷json格式數(shù)據(jù)實例
這篇文章主要介紹了jquery使用each方法遍歷json格式數(shù)據(jù),實例分析了jQuery中each方法的使用技巧,需要的朋友可以參考下2015-05-05Jquery仿淘寶京東多條件篩選可自行結(jié)合ajax加載示例
仿淘寶京東多條件篩選可自行結(jié)合ajax加載,使用Jquery簡單實現(xiàn),具體如下,喜歡的朋友可以參考下2013-08-08jQuery 獲取跨域XML(RSS)數(shù)據(jù)的相關(guān)總結(jié)分析
下面小編就為大家?guī)硪黄猨Query 獲取跨域XML(RSS)數(shù)據(jù)的相關(guān)總結(jié)分析。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05