Konstrukcja drzewa za pomocą funkcji toggle()

Demo:
  • Project

    • Photos
    • Video
    • Audio
  • Tools

    • Gears
    • Folders
    • Grid
  • Library

    • Charts
    • Users
    • Mobile

Konstrukcja drzewa może być użyta jako menu, sitemap, czy też przekazać pewne zależności. Bardzo ciekawy przykład zamieszczam w bardzo prostej formie. Można wykorzystać na wiele sposobów. Uważam, że skrypt ten jest bardzo dobrą podstawą do rozbudowania go w zależności od potrzeb.

Konstrukcja drzewa w HTML

Bardzo prosta konstrukcja, z trzema głównymi poziomami, oraz trzema pod-poziomami. W kodzie HTML zostały użyte darmowe czcionki Font awesome, jako ikonki.

</pre>
<ul class="ewd_tree">
	<li class="main">
Project

<i class="fa fa-briefcase "></i>
<ul class="child">
	<li><i class="fa fa-picture-o"></i>Photos</li>
	<li><i class="fa fa-video-camera"></i>Video</li>
	<li><i class="fa fa-music"></i>Audio</li>
</ul>
</li>
	<li class="main">
Tools

<i class="fa fa-gear "></i>
<ul class="child">
	<li><i class="fa fa-gears"></i>Gears</li>
	<li><i class="fa fa-folder"></i>Folders</li>
	<li><i class="fa fa-th-large"></i>Grid</li>
</ul>
</li>
	<li class="main">
Library

<i class="fa fa-laptop "></i>
<ul class="child">
	<li><i class="fa fa-pie-chart"></i>Charts</li>
	<li><i class="fa fa-users"></i>Users</li>
	<li><i class="fa fa-tablet"></i>Mobile</li>
</ul>
</li>
</ul>
<pre>

Style css

Bardzo ważne w moim przypadku odgrywa role plik z stylami css. Praktycznie w całości one nadają kształt, formę i działanie naszego drzewa. Bardzo pomocną funkcją css są polecenia :last-child, :before.

ul.ewd_tree
{
	margin:0;
	padding:0;
}
ul.ewd_tree li.main
{
	list-style:none;
	background-repeat:no-repeat;
	font-size:25px;
	cursor:pointer;

}
ul.ewd_tree li.main p
{
	padding:0;
	margin:0;
	display:inline-block;
	width:90px;
}

ul.ewd_tree li.main i
{
	margin-left:15px;
}
ul.ewd_tree li.main:before
{
	color:#2ECC71 ;
	content: " • ";
	background:#333;
	font-size:25px;
}
ul.ewd_tree ul.child
{
	margin:0;
	padding:0px 46px;
	display:none;
}
ul.ewd_tree ul.child li
{
	cursor:default;
	list-style-image:url(img/circle2.png);
	font-size:17px;
}
ul.ewd_tree ul.child li:hover i
{
	color:#2ECC71;
}
ul.ewd_tree ul.child li:last-child
{
padding-bottom: 20px;
}
ul.ewd_tree ul.child li i
{
	padding-right:10px;
}

W mojej konstrukcji używam również jednego obrazka, które można pobrać tutaj
Po konstrukcji html, oraz stylach css widzimy już jak nasze drzewo się prezentuje. Jeśli ktoś nie chce mieć żadnej interakcji, to można w stylach dla znacznika: (ul.ewd_tree ul.child) dać zamiast display:none użyć polecenia display:block. Jednak w mojej konstrukcji wyświetlane są jedynie główne elementy, a podrzędne dopiero po kliknięciu na dany element.

Skrypt toggle() jquery

Bardzo prosty skrypt jQuery, który ma za zadanie pokazywać oraz ukrywać po kliknięciu podrzędne elementy.

 $('li.main').click(function(){
		$(this).children('ul.child').toggle();
	 });

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code