Pico UIはjQuery/ jQuery UIに基づいて作成されました。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://pico-ui.com/assets/vendor/picoui/css/pico-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="https://pico-ui.com/assets/vendor/picoui/js/pico-ui.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
pico.desk.init({
apps:{
items:[{
accessid:"page-a",
title:"Page A",
icon:{
type:"material",
class:"people_alt",
},
window:{
url:"./a.html"
}
},
{
accessid:"page-b",
title:"Page B",
icon:{
type:"material",
class:"calendar_today",
},
window:{
url:"./b.html"
}
}]
},
dock:{
items:["page-a","page-b"]
}
});
</script>
</html>