<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js - фарева</title>
<script>
function __dscArr(tag, arr) {
/*
Вывод в указаный tag информацию о массиве: (key: value)
*/
var ul = document.createElement('ul');
var li = document.createElement('li');
var span = document.createElement('span');
var addClass = 'bivariate-array';
var mas = [];
//Построение
tag.appendChild(ul);
for (var key in arr) {
if (Object.prototype.toString.call(arr[key]) === '[object Array]') {
li.className = addClass;
ul.appendChild(li);
li.appendChild(span);
/*before*/
span.onclick = function () {
alert();
}
/*after*/
li.innerHTML += '' +
'<b>' + key + ':' + '</b>'
;
__dscArr(li, arr[key]);
}
else {
ul.innerHTML += '' +
'<li>' +
'<b>' + key + ': ' + '</b>' +
'<span>' + arr[key] + '</span>' +
'</li>'
;
}
}
}
</script>
<script>
window.onload = function () {
var mass = [
0,
[
0, 1,
[0, 1,
[0, 1, 2, 3]
],
3, 4
],
2, 3, 4
];
__dscArr(desc, mass);
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 15px;
}
ul li {
list-style-type: none;
}
li.bivariate-array {
position: relative;
}
li.bivariate-array > span {
position: absolute;
top: 6px;
left: -11px;
width: 9px;
height: 9px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yMi8xM4uhIv4AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAmUlEQVQ4jeVTSQ7EIAyzK/4d+DjupUGIApE63MYXIuHsMXPOAiCsQTNjKSXkJQAys2vFKKXUxwx5r0+Su+xbLDN9QXKjr8htSRwdurYbvP0WzB1JahZkdJzhaJuvYLuqIiQAnM2hgwcPeZQ+X8I0a3jZkvhsOFaApOUiSDYFRLw/UQAB1H4WowJIVkmXv6uqpjP7BUcVcPTObiyVZin7rh6UAAAAAElFTkSuQmCC") no-repeat -10px 0;
cursor: pointer;
}
li.bivariate-array > span:hover {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yMi8xM4uhIv4AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAmUlEQVQ4jeVTSQ7EIAyzK/4d+DjupUGIApE63MYXIuHsMXPOAiCsQTNjKSXkJQAys2vFKKXUxwx5r0+Su+xbLDN9QXKjr8htSRwdurYbvP0WzB1JahZkdJzhaJuvYLuqIiQAnM2hgwcPeZQ+X8I0a3jZkvhsOFaApOUiSDYFRLw/UQAB1H4WowJIVkmXv6uqpjP7BUcVcPTObiyVZin7rh6UAAAAAElFTkSuQmCC") no-repeat -10px -10px, #eee;
}
li.bivariate-array ul {
margin-left: -7px;
padding-left: 30px;
border-left: 1px dashed #ccc;
word-wrap: break-word;
}
</style>
</head>
<body>
<div id='desc'></div>
</body>
</html> |