<head>
...
<script type="text/javascript" src="/js/totebee.1.0.min.js"></script>
...
</head>
<!-- totebee contents folder -->
<ul data-x="list" data-format="csv" data-src='data/inventors.csv'>
<!-- totebee item template -->
<li data-x="item"><a href="inventor.html?id={id}">
<img data-src="{img}">
<div>{name}</div>
<div>{year}</div>
</a>
</li>
</ul>
id,name,year,img
101,Thomas Edison,1847-1931,/img/edison.png
102,Graham Bell,1847-1869,/img/bell.png
103,Nicola Tesla,1856-1943,/img/tesla.png
[
{
"id": "101",
"name": "Thomas Edison",
"year": "1847-1931",
"img": "/img/edison.png"
},
{
"id": "102",
"name": "Alexander Graham Bell",
"year": "1847-1922",
"img": "/img/bell.png"
},
{
"id": "103",
"name": "Nikola Tesla",
"year": "1856-1943",
"img": "/img/tesla.png"
}
]
See the Pen ToteBee List by naota (@naota) on CodePen.
ID | Image | Name | Description | Link to Static Page |
---|---|---|---|---|
{id} | {name} | {description} | inventor.html?id={id} |
<table>
<thead>
<tr>
<th>ID</th>
<th>Image</th>
<th>Name</th>
<th>Description</th>
<th>Link to<br>Static Page</th>
</tr>
</thead>
<!-- totebee contents folder -->
<tbody data-x="list" data-format="json" data-src="/data/inventors.json">
<!-- totebee item template -->
<tr data-x="item">
<td>{id}</td>
<td><img data-src="{img}"></td>
<td><a href="inventor.html?id={id}">{name}</a></td>
<td>{description}</td>
<td><a href="inventor.html?id={id}">inventor.html?id={id}</a></td>
</tr>
</tbody>
</table>
id,name,year,img,description
101,Thomas Edison,1847-1931,/img/edison.png,"Thomas Alva Edison was an American ..."
102,Graham Bell,1847-1869,/img/bell.png,"Alexander Graham Bell was a ..."
103,Nicola Tesla,1856-1943,/img/tesla.png,"Nikola Tesla was a Serbian-American ..."
[
{
"id": "101",
"name": "Thomas Edison",
"year": "1847-1931",
"img": "/img/edison.png",
"description" : "Thomas Alva Edison was an American ..."
},
{
"id": "102",
"name": "Alexander Graham Bell",
"year": "1847-1922",
"img": "/img/bell.png",
"description" : "Alexander Graham Bell was a ..."
},
{
"id": "103",
"name": "Nikola Tesla",
"year": "1856-1943",
"img": "/img/tesla.png",
"description" : "Nikola Tesla was a Serbian-American ..."
}
]
<div data-x="list" data-format="csv" data-src="/data/inventors.csv"
data-filter="id=102">
<div data-x="item">
<h4>ID:{id}</h4>
<img data-src="{img}" width="150">
<h2>{name}</h2>
<h4>{year}</h4>
</div>
</div>
id,name,year,img
101,Thomas Edison,1847-1931,/img/edison.png
102,Graham Bell,1847-1869,/img/bell.png
103,Nicola Tesla,1856-1943,/img/tesla.png
[
{
"id": "101",
"name": "Thomas Edison",
"year": "1847-1931",
"img": "/img/edison.png"
},
{
"id": "102",
"name": "Alexander Graham Bell",
"year": "1847-1922",
"img": "/img/bell.png"
},
{
"id": "103",
"name": "Nikola Tesla",
"year": "1856-1943",
"img": "/img/tesla.png"
}
]
<a href="inventor.html?id=101">inventor.html?id=101</a>
<a href="inventor.html?id=102">inventor.html?id=102</a>
<a href="inventor.html?id=103">inventor.html?id=103</a>
<!-- totebee contents folder -->
<ul data-x="list" data-format="csv" data-src="/data/inventors.csv">
<!-- totebee item template -->
<li data-x="item">
<a href="inventor.html?id={id}">
<img data-src="{img}">
<div>{id}</div>
<div>{name}</div>
<div>{year}</div>
<div class="fixed-height-30">
<div data-x="if" data-condition="id=101">
<span class="highlight">Foo</span>
</div>
<div data-x="if" data-condition="id=102">
<span class="highlight">Bar</span>
</div>
</div>
</a>
</li>
</ul>
id,name,year,img
101,Thomas Edison,1847-1931,/img/edison.png
102,Graham Bell,1847-1869,/img/bell.png
103,Nicola Tesla,1856-1943,/img/tesla.png
[
{
"id": "101",
"name": "Thomas Edison",
"year": "1847-1931",
"img": "/img/edison.png"
},
{
"id": "102",
"name": "Alexander Graham Bell",
"year": "1847-1922",
"img": "/img/bell.png"
},
{
"id": "103",
"name": "Nikola Tesla",
"year": "1856-1943",
"img": "/img/tesla.png"
}
]
<ul data-x="list" data-format="csv"
data-pagesize='3' data-src="/data/inventors3.csv">
<!-- totebee item template -->
<li data-x="item">
<a href="inventor.html?id={id}">
<img data-src="{img}">
<div>{id}</div>
<div>{name}</div>
<div>{year}</div>
</a>
</li>
</ul>
id,name,year,img
101,Thomas Edison,1847-1931,/img/edison.png
102,Graham Bell,1847-1922,/img/bell.png
103,Nicola Tesla,1856-1943,/img/tesla.png
104,Samuel Morse,1791-1872,/img/morse.png
105,Guglielmo Marconi,1874-1937,/img/marconi.png
106,Rudolf Diesel,1858-1913,/img/diesel.png
107,Marie Curie,1867-1934,/img/curie.png
108,Michael Faraday,1791-1867,/img/faraday.png
109,James Watt,1736-1819,/img/watt.png
110,Alfred Nobel,1833-1896,/img/norbel.png
111,Charles Babbage,1791-1871,/img/babbage.png
112,John Neumann,1863-1947,/img/neumann.png
[{
"id": "101",
"name": "Thomas Edison",
"year": "1847-1931",
"img": "/img/edison.png"
},
{
"id": "102",
"name": "Alexander Graham Bell",
"year": "1847-1922",
"img": "/img/bell.png"
},
{
"id": "103",
"name": "Nikola Tesla",
"year": "1856-1943",
"img": "/img/tesla.png"
},
{
"id": "104",
"name": "Samuel Morse",
"year": "1856-1943",
"img": "/img/morse.png"
},
{
"id": "105",
"name": "Guglielmo Marconi",
"year": "1856-1943",
"img": "/img/marconi.png"
},
{
"id": "106",
"name": "Rudolf Diesel",
"year": "1856-1943",
"img": "/img/diesel.png"
},
{
"id": "107",
"name": "Marie Curie",
"year": "1867-1934",
"img": "/img/curie.png"
},
{
"id": "108",
"name": "Michael Faraday",
"year": "1791-1867",
"img": "/img/faraday.png"
},
{
"id": "109",
"name": "James Watt",
"year": "1736-1819",
"img": "/img/watt.png"
},
{
"id": "110",
"name": "Alfred Nobel",
"year": "1833-1896",
"img": "/img/norbel.png"
},
{
"id": "111",
"name": "Charles Babbage",
"year": "1791-1871",
"img": "/img/babbage.png"
},
{
"id": "112",
"name": "John Neumann",
"year": "1863-1947",
"img": "/img/neumann.png"
}
]
Sort Key :
<span data-x="x-sort" data-targetid="mylist" data-sortkey="id" class='active'>ID</span>
<span data-x="x-sort" data-targetid="mylist" data-sortkey="name">Name</span>
<span data-x="x-sort" data-targetid="mylist" data-sortkey="year">Birth Year</span>
<!-- totebee contents folder -->
<ul id="mylist" data-x="list" data-format="csv"
data-Srtkey/span>="name" data-src='/data/inventors2.csv'>
<!-- totebee item template -->
<li data-x="x-item">
<a href="inventor.html?id={id}">
<img data-src="{img}">
<div>{id}</div>
<div>{name}</div>
<div>{year}</div>
</a>
</li>
</ul>
id,name,year,img,description
101,Thomas Edison,1847-1931,/img/edison.png
102,Graham Bell,1847-1869,/img/bell.png,
103,Nicola Tesla,1856-1943,/img/tesla.png
104,Samuel Morse,1791-1872,/img/morse.png
105,Guglielmo Marconi,1874-1937,/img/marconi.png
106,Rudolf Diesel,1858-1913,/img/diesel.png
[
{
"id": "101",
"name": "Thomas Edison",
"year": "1847-1931",
"img": "/img/edison.png"
},
{
"id": "102",
"name": "Alexander Graham Bell",
"year": "1847-1922",
"img": "/img/bell.png"
},
{
"id": "103",
"name": "Nikola Tesla",
"year": "1856-1943",
"img": "/img/tesla.png"
},
{
"id": "104",
"name": "Samuel Morse",
"year": "1856-1943",
"img": "/img/morse.png"
},
{
"id": "105",
"name": "Guglielmo Marconi",
"year": "1856-1943",
"img": "/img/marconi.png"
},
{
"id": "106",
"name": "Rudolf Diesel",
"year": "1856-1943",
"img": "/img/diesel.png"
}
]
<div data-x="schedule" data-start="2019-01-01 00:00" data-end="2019-12-31 23:59">
This block goes public on 2019.
</div>
<div data-x="schedule" data-start="2020-01-01 00:00" data-end="2020-12-31 23:59">
This block goes public on 2020.
</div>
<div data-x="schedule" data-start="2021-01-01 00:00" data-end="2021-12-31 23:59">
This block goes public on 2021.
</div>