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 id="treeview">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 は、独自の要件に従って後続の定義に使用できるようになります。

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

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

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

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

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

フォルダースパンの前にプラスまたはマイナスのアイコンを追加し、アイコン表示要素として 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;            }

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

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

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

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

すべての 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
            
        
                    
            文件夹3                            文件3-1
            
        
        文件0-1

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

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

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

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

            .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 までご連絡ください。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。