173 lines
5.9 KiB
HTML
Executable File
173 lines
5.9 KiB
HTML
Executable File
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>JSLists - Very simple nested list [Example 1]</title>
|
|
<link rel="stylesheet" href="jsLists.css"/>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 90px;
|
|
background-color: rgb(156, 158, 160);
|
|
padding-left: 18px;
|
|
}
|
|
header > div {
|
|
position: relative;
|
|
display: inline-block;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 3.4rem;
|
|
font-weight: 900;
|
|
}
|
|
main {
|
|
position: absolute;
|
|
top: 90px;
|
|
height: calc(100vh - 90px);
|
|
}
|
|
main > div:nth-child(1) {
|
|
padding: 16px;
|
|
}
|
|
main > div:nth-child(2) {
|
|
padding: 18px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header><div>JSLists</div></header>
|
|
<main>
|
|
<div style='height: 100%; width: 30%; float: left; overflow-y: scroll;'>
|
|
<div style='font-size: 1.4rem; font-weight:700;'>Example 1:</div>
|
|
<ul id='f1teams' class='jslists'>
|
|
<li>Formula One Teams (2018)
|
|
<ul>
|
|
<li>○ Scuderia Ferrari</li>
|
|
<li>○ Sahara Force India F1 Team</li>
|
|
<li>○ Haas F1 Team</li>
|
|
<li>○ McLaren F1 Team</li>
|
|
<li>○ Mercedes AMG Petronas Motorsport</li>
|
|
<li>○ Aston Martin Red Bull Racing</li>
|
|
<li>○ Renault Sport Formula One Team</li>
|
|
<li>○ Alfa Romeo Sauber F1 Team</li>
|
|
<li>○ Red Bull Toro Rosso Honda</li>
|
|
<li>○ Williams Martini Racing</li>
|
|
</ul>
|
|
</li>
|
|
</ul><br>
|
|
<div style='font-size: 1.4rem; font-weight:700;'>Example 2:</div>
|
|
<ul id='f1drivers' class='jslists'>
|
|
<li>Formula One Drivers (2018)
|
|
<ul>
|
|
<li>● Lewis Hamilton</li>
|
|
<li>● Sebastian Vettel</li>
|
|
<li>● Kimi Räikkönen</li>
|
|
<li>● Valtteri Bottas</li>
|
|
<li>● Daniel Ricciardo</li>
|
|
<li>● Max Verstappen</li>
|
|
<li>● Nico Hülkenberg</li>
|
|
<li>● Kevin Magnussen</li>
|
|
<li>● Fernando Alonso</li>
|
|
<li>● Sergio Pérez</li>
|
|
<li>● Carlos Sainz Jr.</li>
|
|
<li>● Esteban Ocon</li>
|
|
<li>● Pierre Gasly</li>
|
|
<li>● Romain Grosjean</li>
|
|
<li>● Charles Leclerc</li>
|
|
<li>● Stoffel Vandoorne</li>
|
|
<li>● Marcus Ericsson</li>
|
|
<li>● Lance Stroll</li>
|
|
<li>● Brendon Hartley</li>
|
|
<li>● Sergey Sirotkin</li>
|
|
</ul>
|
|
</li>
|
|
</ul><br>
|
|
<div style='font-size: 1.4rem; font-weight:700;'>Example 3:</div>
|
|
<ul id='f1combined' class='jslists'>
|
|
<li>Formula One combined (2018)
|
|
<ul>
|
|
<li>Scuderia Ferrari
|
|
<ul>
|
|
<li>● Sebastian Vettel</li>
|
|
<li>● Kimi Räikkönen</li>
|
|
</ul>
|
|
</li>
|
|
<li>Mercedes AMG
|
|
<ul>
|
|
<li>● Lewis Hamilton</li>
|
|
<li>● Valtteri Bottas</li>
|
|
</ul>
|
|
</li>
|
|
<li>Haas F1 Team
|
|
<ul>
|
|
<li>● Romain Grosjean</li>
|
|
<li>● Kevin Magnussen</li>
|
|
</ul>
|
|
</li>
|
|
<li>McLaren F1 Team
|
|
<ul>
|
|
<li>● Fernando Alonso</li>
|
|
<li>● Stoffel Vandoorne</li>
|
|
</ul>
|
|
</li>
|
|
<li>Red Bull Racing
|
|
<ul>
|
|
<li>● Max Verstappen</li>
|
|
<li>● Daniel Ricciardo</li>
|
|
</ul>
|
|
</li>
|
|
<li>Renault
|
|
<ul>
|
|
<li>● Max Verstappen</li>
|
|
<li>● Daniel Ricciardo</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div style='height: 100%; width: 70%; float: left; overflow-y: scroll; font-size: 1.15rem;'>
|
|
jslists is a small JavaScript library that can turn those pesky unordered & ordered list into a funky tree.
|
|
There is an example to the left which demostrates the basic functionality<br><br>
|
|
Because JSLists doesn't effect any element of the HTML list you are passing is, you can use all of the functionality of standard HTML list.
|
|
So ALL list items can contain any valid HTML elements, such as anchors <a>, <img>, <div> etc.
|
|
It's pretty easy to use. To create a tree element, give the UL/OL an id, then simply add another unordered or ordered list as a list item. The text within the list item becomes the heading for that list. <br><br>
|
|
The markup for the Formula One Teams list to the left is:<br>
|
|
<ul id='f1teams' class='jslists'><br>
|
|
 <li>Formula One Teams (2018)<br>
|
|
  <ul><br>
|
|
   <li>&#9675; Scuderia Ferrari</li><br>
|
|
   <li>&#9675; Sahara Force India F1 Team</li><br>
|
|
   <li>&#9675; Haas F1 Team</li><br>
|
|
   <li>&#9675; McLaren F1 Team</li><br>
|
|
   <li>&#9675; Mercedes AMG Petronas Motorsport</li><br>
|
|
   <li>&#9675; Aston Martin Red Bull Racing</li><br>
|
|
   <li>&#9675; Renault Sport Formula One Team</li><br>
|
|
   <li>&#9675; Alfa Romeo Sauber F1 Team</li><br>
|
|
   <li>&#9675; Red Bull Toro Rosso Honda</li><br>
|
|
   <li>&#9675; Williams Martini Racing</li><br>
|
|
  </ul><br>
|
|
 </li><br>
|
|
</ul><br><br>
|
|
You can also create nested lists using jsLists. Check out the source code for Example 3 and you will see the pattern is the same as the standard list.
|
|
</div>
|
|
</main>
|
|
<script src="jsLists.js"></script>
|
|
<script>
|
|
// JSLists.createTree("simple_list");
|
|
JSLists.createTree("f1teams");
|
|
JSLists.createTree("f1drivers");
|
|
JSLists.createTree("f1combined");
|
|
</script>
|
|
</body>
|
|
</html> |