Add checklist prototype
This commit is contained in:
parent
d4a0b83b9f
commit
57312cbf29
2 changed files with 101 additions and 6 deletions
55
css/dropdown.css
Normal file
55
css/dropdown.css
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
/*
|
||||||
|
Source: https://stackoverflow.com/questions/19206919/how-to-create-checkbox-inside-dropdown
|
||||||
|
*/
|
||||||
|
|
||||||
|
.dropdown-check-list {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-check-list .anchor {
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px 50px 5px 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-check-list .anchor:after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
border-left: 2px solid black;
|
||||||
|
border-top: 2px solid black;
|
||||||
|
padding: 5px;
|
||||||
|
right: 10px;
|
||||||
|
top: 20%;
|
||||||
|
-moz-transform: rotate(-135deg);
|
||||||
|
-ms-transform: rotate(-135deg);
|
||||||
|
-o-transform: rotate(-135deg);
|
||||||
|
-webkit-transform: rotate(-135deg);
|
||||||
|
transform: rotate(-135deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-check-list .anchor:active:after {
|
||||||
|
right: 8px;
|
||||||
|
top: 21%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-check-list ul.items {
|
||||||
|
padding: 2px;
|
||||||
|
display: none;
|
||||||
|
margin: 0;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-check-list ul.items li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-check-list.visible .anchor {
|
||||||
|
color: #0094ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-check-list.visible .items {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
52
index.html
52
index.html
|
|
@ -1,18 +1,20 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="ca">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Page Title</title>
|
<title>Page Title</title>
|
||||||
<meta name="description" content="Die Daten der Welt im Überblick"/>
|
<meta name="description" content="Die Daten der Welt im Überblick" />
|
||||||
<meta name="author" content="Michael Hübener und Selina Marie-Alice Schönherr">
|
<meta name="author" content="Michael Hübener und Selina Marie-Alice Schönherr">
|
||||||
<meta name="keywords" content="Welt, Daten, Überblick, HTML">
|
<meta name="keywords" content="Welt, Daten, Überblick, HTML">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
|
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
|
||||||
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
|
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" media="screen" href="css/dropdown.css" />
|
||||||
<script src="js/table.js"></script>
|
<script src="js/table.js"></script>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
|
||||||
|
crossorigin="anonymous">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -45,17 +47,55 @@
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<h1>World Data Overview ...</h1>
|
<h1>World Data Overview ...</h1>
|
||||||
|
|
||||||
<p class='text'>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.
|
<p class='text'>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie,
|
||||||
|
musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li
|
||||||
|
pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa
|
||||||
|
continuar payar custosi traductores.
|
||||||
|
|
||||||
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
|
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues
|
||||||
|
coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li
|
||||||
|
nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.
|
||||||
|
|
||||||
It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.
|
It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un
|
||||||
|
simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es. Li Europan lingues es membres
|
||||||
|
del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li
|
||||||
|
sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
|
||||||
|
Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.
|
||||||
|
|
||||||
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a></p>
|
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a></p>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="list1" class="dropdown-check-list" tabindex="100">
|
||||||
|
<span class="anchor">Select Columns</span>
|
||||||
|
<ul class="items">
|
||||||
|
<li><input type="checkbox" />Apple </li>
|
||||||
|
<li><input type="checkbox" />Orange</li>
|
||||||
|
<li><input type="checkbox" />Grapes </li>
|
||||||
|
<li><input type="checkbox" />Berry </li>
|
||||||
|
<li><input type="checkbox" />Mango </li>
|
||||||
|
<li><input type="checkbox" />Banana </li>
|
||||||
|
<li><input type="checkbox" />Tomato</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<table id="t01"></table>
|
<table id="t01"></table>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
// create table
|
||||||
handleFile()
|
handleFile()
|
||||||
|
|
||||||
|
// create callbacks for checkboxes
|
||||||
|
var checkList = document.getElementById('list1');
|
||||||
|
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
|
||||||
|
if (checkList.classList.contains('visible'))
|
||||||
|
checkList.classList.remove('visible');
|
||||||
|
else
|
||||||
|
checkList.classList.add('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
checkList.onblur = function (evt) {
|
||||||
|
checkList.classList.remove('visible');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue