Web 版フォルダー Treeview_html/css_WEB-ITnose の作成方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Web 版フォルダー Treeview_html/css_WEB-ITnose の作成方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:25 AM

フォルダーツリービューの効果

このようなツリービューは実際のプロジェクトの多くのシナリオで使用されます。

よく使うので、網羅的ではありませんが、基本的には一度はDIYしてみましょう。

1.まずアイコン素材を用意します

file.gif、ファイルアイコン

folder.gif、フォルダーを開くアイコン

folder-closed.gif、フォルダーを閉じるアイコン

treeview-default.gif、折りたたみアイコン

ツリービュー-default-line.gif、折り線アイコン、実際の解像度は 16*1776 です

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 定義が準備できます。

リストのスタイルがリリースされた後、リストのスタイルをフォルダーツリーのスタイルに変更するには、まず、ネストされた UL を含むリストの UL スタイルをクリアし、設定する必要があります。パディングとマージン 0px は、独自の要件に従って後続の定義に使用できるようになります。

1	`.treeview, .treeview ul{ list-style: none; padding: 0px; margin: 0px; }`

ログイン後にコピー

リストの背景色を白に設定し、上の要素から少し離れるように上マージンを設定します。

カスタムのインデントを実現するには、li にカスタムパディングを設定します。

1	`.treeview ul{ background-color: white; margin-top: 4px; } .treeview li{ margin:0px; padding:3px 0px 3px 16px; }`

ログイン後にコピー

リストモードは展開状態です。

フォルダースパンの前にプラスまたはマイナスのアイコンを追加し、アイコン表示要素として div を使用し、デフォルトで折り畳み可能なスタイルfoldarea-collapseableを使用してマイナスアイコンを表示します。

1	`<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 を左にフロートに設定して、設定可能な幅を持つインライン要素になり、フォルダースパンと同じ行に配置できるようにします。

1	`.treeview .foldarea{ height: 16px; width: 16px; float: left; margin-left: -16px; }`

ログイン後にコピー

折りたたみ可能なスタイルと展開可能なスタイルを定義します。

折りたたみスタイルは、現在のリストが展開されていることを示し、マイナス記号アイコンが表示されます。

展開可能なスタイルは、現在のリストが折りたたまれていることを示し、プラスアイコンが表示されます。

1	`.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; }`

ログイン後にコピー

フォルダーテキストの前にフォルダーアイコンを追加します。フォルダーを開くアイコンの表示には、デフォルトのフォルダーを開いたスタイルが使用されます。

1	`<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>`

ログイン後にコピー

まず、フォルダーのテキストのインデントを設定して、アイコン表示用のスペースを残すためにカスタムの距離だけ右にインデントします。

1	`.treeview .folder{ padding: 1px 0px 1px 16px; }`

ログイン後にコピー

フォルダーの開閉スタイルを定義して、対応するアイコンを設定します。

1	`.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; }`

ログイン後にコピー

ファイルスタイルを定義し、ファイルテキストの前にファイルアイコンを追加します。

1	`<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>`

ログイン後にコピー

ファイルテキストをインデントし、アイコンの表示スペースを公開し、ファイルの背景アイコンを設定します。

1	`.treeview .file{ background: url(images/file.gif) 0 0 no-repeat; padding: 0px 0px 1px 16px; }`

ログイン後にコピー

すべての li リスト項目に折り線の背景を設定します

折り線の背景画像の上部に小さな直角のフォークがあります。

1	`.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }`

ログイン後にコピー

折り線を設定すると、最後のリスト項目には尾が付きます。この尾を削除するために、折り線の背景画像の下部は直角の閉じたスタイルになります。

そして、最後の li リスト項目をすべて最後のスタイルに設定し、これが最後のリスト項目であることを示します

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

ログイン後にコピー

最後のスタイルの重要なポイントは、折り線の表示部分を右下の角度に配置することですbackground-position を介して、折り線を効果的に閉じます。

1	`.treeview li.last { background-position: 0 -1766px; }`

ログイン後にコピー

最後に、フォルダー上にマウスを移動した後のテキストの色とマウスポインターを変更します。

次に、最初にホバースタイルを定義します。

1	`.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); });

ログイン後にコピー

この時点で、ツリービューの基本的な実装は完了です。

全体的な機能を完成させる必要がある場合は、これに基づいてツリービューのさまざまな機能をカプセル化して実装する必要があります。

コード: ポケ

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。