jQuery實現的仿百度分頁足跡效果代碼
622
2024-03-22
在項目中，我們經常會需要一些樹狀結構的樣式來顯示層級結構等，比如下圖的樣式，之前在學.net的時候可以直接拖個服務端控件過來直接使用非常方便。但是利用Jquery的一些插件，也是可以實現這些效果的，比如說Jquery.treeview.js插件。
下面就直入主題，開始從簡入繁的分析怎么使用treeview插件，從已知的知識開始輕松入手，讓樹狀結構唾手可得?！?/p>
顯示樹狀結構的幾個實現步驟：
一、HTML做初始靜態原型。
首先通過<ul></ul><li></li>展示樹狀基本結構，還原其最初的樣子：
相信學過一點HTML的同學都可以實現吧，在“tree.html”中寫如下代碼：
<ul>
<li>系統管理
<ul>
<li>部門管理</li>
<li>崗位管理
<ul>
<li>崗位添加</li>
<li>崗位刪除</li>
</ul>
</li>
<li><用戶管理
<ul>
<li>添加用戶</li>
<li>修改用戶</li>
</ul>
</li>
</ul>
</li>
<li>審批流轉</li>
</ul>
我們靜態的樹形結構的草本如下：
二、加入treeview插件庫，實現動態樹狀結構。
在有了基本靜態的樹狀模型以后，我們需要實現一個動態的結構，那么，我們的大菜就要上場了。
1、首先搜索Jquery.treeview.js插件進行下載，或直接進入下面的網址進行下載插件包：
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
2、下載壓縮包解壓到相應文件夾內，將之間的靜態頁面tree.html放到根目錄下：
3、在tree.html中導入js和css文件。
< 導入js和CSS--> <link rel="stylesheet" /> <script src="http://www.gimoo.net/t/1902/lib/jquery.js" type="text/javascript"></script> <script src="http://www.gimoo.net/t/1902/lib/jquery.cookie.js" type="text/javascript"></script> <script src="http://www.gimoo.net/t/1902/jquery.treeview.js" type="text/javascript"></script>
4、使用<ul>展示數據，為了方便得到樹，在最外邊的<ul>標簽里加入Id為tree，如下
5、顯示我們的樹狀結構（加上行為）。
在js里，我們只需要一行代碼：
在<ul></ul>標簽下加入js代碼：
<script type="text/javascript"> $("#tree").treeview(); </script>
我們的動態的樹狀結構的初步樣式如下，已經可以自由的收起和展示了：
6、顯示樹狀結構（加上樣式）。
上面的樣式離我們最初想要的結果還差一點樣式，比如說各項之前的文件夾圖標。下面我們可以加上樣式，從而完成整個樹狀結構的展示。
6.1在樹的根節點<ul>標簽中加入 class="filetree"。
6.2在各項節點前加入文件夾<span>標簽：比如：<span class="folder">系統管理</span>。
整體tree.html代碼如下：
<!DOCTYPE html pageEncoding="utf-8">
<html>
<head>
<title>tree.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB2312">
< 導入js和CSS-->
<link rel="stylesheet" />
<script src="http://www.gimoo.net/t/1902/lib/jquery.js" type="text/javascript"></script>
<script src="http://www.gimoo.net/t/1902/lib/jquery.cookie.js" type="text/javascript"></script>
<script src="http://www.gimoo.net/t/1902/jquery.treeview.js" type="text/javascript"></script>
</head>
<body>
<ul id="tree" class="filetree">
<li><span class="folder">系統管理</span>
<ul>
<li><span class="folder">部門管理</span></li>
<li><span class="folder">崗位管理</span>
<ul>
<li><span class="folder">崗位添加</span></li>
<li><span class="folder">崗位刪除</span></li>
</ul>
</li>
<li><span class="folder">用戶管理</span>
<ul>
<li><span class="folder">添加用戶</span></li>
<li><span class="folder">修改用戶</span></li>
</ul>
</li>
</ul>
</li>
<li><span class="folder">審批流轉</span></li>
</ul>
<script type="text/javascript">
$("#tree").treeview();
</script>
</body>
</html>
最后的樣式展示：
需求完成啦！
當然樹狀結構的樣式有多種多樣，也可以實現動態的添加節點分支等等，大家可以在下載的插件里找demo文件下的例子看一下，很容易的。
第一次實現樹狀結構，一開始的心情有些恐懼，也是沒有頭緒，感覺要通過js寫下一個樹狀結構也是有些難度的，雖說toggle方法也可以實現指定區域的收縮（隱藏）和展示，加上動態變換文件夾等圖標的樣式也是可以實現的，但是一想就覺得太麻煩了。所以在做OA的時候，老師提到了Jquery的treeview插件很好使，上網查詢它的官方資料竟然查到了一大堆插件，作為插件控的同學們一定很興奮吧，有一種劉姥姥進大觀園的感覺。而且實現起來非常簡單，從已知的知識入手，由簡入繁，輕松掌握了所有Jquery插件的使用。這就是米老師說的所謂的吃飯理論吧：一個人被邀請去參加一個飯局，發現飯局中只認識那個邀請自己的人，有些人會覺得飯局很無聊，很惆悵，或退場，或自娛自樂。但是聰明的人會通過那個唯一自己認識的人而認識整個飯局的人，從而結識了一大幫朋友。我們學習也是一樣的，由我們已知的知識帶領我們走進未知世界，戰勝恐懼和膽怯，相信沒有什么實現不了事情吧。
以上這篇由簡入繁實現Jquery樹狀結構的方法(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持綠夏網。
