ホームページ >ウェブフロントエンド >htmlチュートリアル >Web 版フォルダー Treeview_html/css_WEB-ITnose の作成方法
Web 版フォルダー Treeview_html/css_WEB-ITnose の作成方法
- WBOYオリジナル
- 2016-06-24 11:25:111194ブラウズ
フォルダーツリービューの効果
このようなツリービューは実際のプロジェクトの多くのシナリオで使用されます。
よく使うので、網羅的ではありませんが、基本的には一度はDIYしてみましょう。
1.まずアイコン素材を用意します
file.gif、ファイルアイコン
folder.gif、フォルダーを開くアイコン
folder-closed.gif、フォルダーを閉じるアイコン
treeview-default.gif、折りたたみアイコン
ツリービュー-default-line.gif、折り線アイコン、実際の解像度は 16*1776 です
2.
treeview は ul li とそのネストに基づいており、リストを使用してフォルダー ツリーを構築します
html コード
<!DOCTYPE><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>treeview</title> <style type="text/css"> </style> </head> <body> <h4>treeview</h4> <ul id="browser" class="treeview"> <li> <div class='foldarea foldarea-collapsable'></div> <span class="folder folder-opened">文件夹1</span> <ul> <li class="last"><span class="file">文件1-1</span></li> </ul> </li> <li> <div class='foldarea foldarea-collapsable'></div> <span class="folder folder-opened">文件夹2</span> <ul> <li> <div class='foldarea foldarea-collapsable'></div> <span class="folder folder-opened">文件夹2.1</span> <ul id=""> <li><span class="file">文件2.1-1</span></li> <li class="last"><span class="file">文件2.1-2</span></li> </ul> </li> <li class="last"><span class="file">文件2-1</span></li> </ul> </li> <li> <div class='foldarea foldarea-collapsable'></div> <span class="folder folder-opened">文件夹3</span> <ul> <li class="last"><span class="file">文件3-1</span></li> </ul> </li> <li class="last"><span class="file">文件0-1</span></li> </ul> <script src="lib/jquery.js" type="text/javascript"></script> <script type="text/javascript"> </script></body></html>
コード内で CSS クラス名を使用して各要素の役割を定義すると、後続の CSS 定義が準備できます。
3.
リストのスタイルがリリースされた後、リストのスタイルをフォルダー ツリーのスタイルに変更するには、まず、ネストされた UL を含むリストの UL スタイルをクリアし、設定する必要があります。パディングとマージン 0px は、独自の要件に従って後続の定義に使用できるようになります。
.treeview, .treeview ul{ list-style: none; padding: 0px; margin: 0px; }
4.
リストの背景色を白に設定し、上の要素から少し離れるように上マージンを設定します。
カスタムのインデントを実現するには、li にカスタム パディングを設定します。
.treeview ul{ background-color: white; margin-top: 4px; } .treeview li{ margin:0px; padding:3px 0px 3px 16px; }
5.
リストモードは展開状態です。
フォルダー スパンの前にプラスまたはマイナスのアイコンを追加し、アイコン表示要素として div を使用し、デフォルトで折り畳み可能なスタイルfoldarea-collapseableを使用してマイナス アイコンを表示します。
<li> <div class='foldarea foldarea-collapsable'></div> <span class="folder folder-opened">文件夹1</span> <ul> <li class="last"><span class="file">文件1-1</span></li> </ul> </li>
div を左にフロートに設定して、設定可能な幅を持つインライン要素になり、フォルダー スパンと同じ行に配置できるようにします。
.treeview .foldarea{ height: 16px; width: 16px; float: left; margin-left: -16px; } 折りたたみ可能なスタイルと展開可能なスタイルを定義します。
折りたたみスタイルは、現在のリストが展開されていることを示し、マイナス記号アイコンが表示されます。
展開可能なスタイルは、現在のリストが折りたたまれていることを示し、プラス アイコンが表示されます。
.treeview .foldarea-expandable{ background: url(images/treeview-default.gif) -80px -3px no-repeat; } .treeview .foldarea-collapsable{ background: url(images/treeview-default.gif) -64px -25px no-repeat; }
6.
フォルダーテキストの前にフォルダーアイコンを追加します。フォルダーを開くアイコンの表示には、デフォルトのフォルダーを開いたスタイルが使用されます。
<li> <div class='foldarea foldarea-collapsable'></div> <span class="folder folder-opened">文件夹1</span> <ul> <li class="last"><span class="file">文件1-1</span></li> </ul> </li>
まず、フォルダーのテキストのインデントを設定して、アイコン表示用のスペースを残すためにカスタムの距離だけ右にインデントします。
.treeview .folder{ padding: 1px 0px 1px 16px; } フォルダーの開閉スタイルを定義して、対応するアイコンを設定します。
.treeview .folder-opened{ background: url(images/folder.gif) 0 0 no-repeat; } .treeview .folder-closed{ background: url(images/folder-closed.gif) 0 0 no-repeat; }
7.
ファイルスタイルを定義し、ファイルテキストの前にファイルアイコンを追加します。
<li> <div class='foldarea foldarea-collapsable'></div> <span class="folder folder-opened">文件夹1</span> <ul> <li class="last"><span class="file">文件1-1</span></li> </ul> </li>
ファイルテキストをインデントし、アイコンの表示スペースを公開し、ファイルの背景アイコンを設定します。
.treeview .file{ background: url(images/file.gif) 0 0 no-repeat; padding: 0px 0px 1px 16px; }
8.
すべての li リスト項目に折り線の背景を設定します
折り線の背景画像の上部に小さな直角のフォークがあります。
.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; } 折り線を設定すると、最後のリスト項目には尾が付きます。この尾を削除するために、折り線の背景画像の下部は直角の閉じたスタイルになります。
そして、最後の li リスト項目をすべて最後のスタイルに設定し、これが最後のリスト項目であることを示します
- <li> <div class='foldarea foldarea-collapsable'></div> <span class="folder folder-opened">文件夹1</span> <ul> <li class="last"><span class="file">文件1-1</span></li> </ul> </li>
- 文件夹2
- 文件夹2.1
- 文件2.1-1
- 文件2.1-2
- 文件2-1
- 文件夹2.1
- 文件夹3
- 文件3-1
- 文件0-1
最後のスタイルの重要なポイントは、折り線の表示部分を右下の角度に配置することですbackground-position を介して、折り線を効果的に閉じます。
.treeview li.last { background-position: 0 -1766px; }
9.
最後に、フォルダー上にマウスを移動した後のテキストの色とマウス ポインターを変更します。
次に、最初にホバースタイルを定義します。
.hover{ cursor: pointer; color: red; } すべてのフォルダー スパンを検索し、ホバー イベントに応答し、マウス入力スタイルを動的に追加および削除し、動的効果を実現します。
そして、フォルダーのスパンとプラス記号とマイナス記号の div のクリックイベントに応答します。展開されている場合は、クリックしてその下のリストを折りたたみ、折りたたまれている場合は、クリックして展開します。 display:none スタイルを制御します。
次に、折りたたまれた状態または展開された状態に応じてアイコンの表示を制御します。
$(document).ready(function(){ var folders = $('.folder'); var foldareas = $('.foldarea'); //鼠标移入文件夹节点上，节点文字变色，鼠标指针改变 folders.hover( function(){ $(this).addClass('hover'); }, function(){ $(this).removeClass('hover'); } ); var doFold = function(){ var ul = $('ul',this.parentNode)[0]; var foldarea = $('.foldarea',this.parentNode)[0]; var folder = $('.folder',this.parentNode)[0]; if(!ul){ return; } var ulDisplay = $(ul).css('display'); if(ulDisplay==='none'){ //展开列表 $(ul).css('display','block'); //显示展开时的文件夹图标 $(folder).removeClass('folder-closed'); $(folder).addClass('folder-opened'); //展开时显示可折叠图标 $(foldarea).removeClass('foldarea-expandable'); $(foldarea).addClass('foldarea-collapsable'); }else{ //通过隐藏来实现折叠列表 $(ul).css('display','none'); //显示折叠时的文件夹图标 $(folder).removeClass('folder-opened'); $(folder).addClass('folder-closed'); //折叠时显示可展开图标 $(foldarea).removeClass('foldarea-collapsable'); $(foldarea).addClass('foldarea-expandable'); } }; //将文件夹节点下的列表折叠或展开 folders.click(doFold); foldareas.click(doFold); });
この時点で、ツリービューの基本的な実装は完了です。
全体的な機能を完成させる必要がある場合は、これに基づいてツリービューのさまざまな機能をカプセル化して実装する必要があります。
コード: ポケ