Uni/WME
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add checklist prototype

Browse source
This commit is contained in:
hodasemi 2018-10-31 08:51:56 +01:00
parent d4a0b83b9f
commit 57312cbf29
2 changed files with 101 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
css/dropdown.css Normal file
View 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
View file

@ -1,18 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ca">
<head>
<meta charset="utf-8" />
<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="keywords" content="Welt, Daten, Überblick, HTML">
<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/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/dropdown.css" />
<script src="js/table.js"></script>
<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>
<body>
@ -45,17 +47,55 @@
<div class="page">
<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>
<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>
<script>
// create table
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>
</div>