きっと未来の俺氏はいつものように過去にやったことをほぼほぼ全部忘れてしまい、「これ、なんだったかのぅ("･ω･ﾞ)」となるに決まっているので、自分の為に覚書を残す。
デザインやらコードやら、色々と手直ししたいところはあるものの、取り敢えずこれでいいか。
このデータ埋め込みだと、コードをそのままコピペすることも出来るし、コメントも埋め込めるので視認性は良いかなぁと思うのだけれどもどうかなぁ…(´･ω･｀)
cssでも実現可能なら、いずれはcssのみで実装したいところではある。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta http-equiv="content-style-type" content="text/css">
<title>embedded_data</title>
<style type="text/css">
div#disp {
white-space: nowrap;
border: solid 1px #808080;
width:100%;
height:150px;
padding: 0.5em;
line-height: 1.8em;
overflow: auto;
background-color:#eeeeee;
}
div#code {
white-space: nowrap;
border: solid 1px #808080;
width:100%;
height:250px;
padding: 0.5em;
overflow: auto;
background-color:#dddddd;
}
.ml-1 {
margin-left: 20px;
}
.ml-2 {
margin-left: 40px;
}
.ml-3 {
margin-left: 60px;
}
.ml-4 {
margin-left: 80px;
}
</style>
</head>
<body>
<div id='disp'>disp</div>
<div id='code'>
<span id='d1' class='dc'>aaa</span><br>
<span id='d2' class='dc'>bbb</span><br>
</div>
<div>
<span id='d_d1' data-con='aaa'></span><br>
<span id='d_d2' data-con='bbb'></span><br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript'>
jQuery(function () {
let orgColor;
$('span.dc').hover(
function () {
orgColor = $(this).css('color');
$(this).css('color','red');
var id = '#d_' + $(this).attr('id');
$('#disp').html($(id).attr('data-con'))
},
function () {
$(this).css('color',orgColor);
}
);
});
</script>
</body>
</html>