-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
68 lines (60 loc) · 2.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:#f9f9f9;}
a { text-decoration: none; }
.uri {width:95%;background-color:#eee;}
.uri li { width:15%;height:40px;padding:15px;font-size:9pt;list-style-type:none;float:left;margin-bottom:15px;margin-right:30px;border:1px solid #e4ecf3;background-color:#fff;color:#2c2e2f;font-weight:bold;}
.uri img { width:40px;height:40px;margin-right:10pt;vertical-align:middle;}
#bottom_column {clear:both;padding-top:10px;}
.top_column_hover { background-color: #fff;font-weight:bold;color: orange;}
#top_column li { height: 30px;width: 120px;text-align: center;line-height: 30px;margin: -1px -1px 0px -1px;float:left;list-style-type:none; font-weight:bold;}
</style>
</head>
<body>
<content id='concent'> mylink </content>
</body>
<script type="text/javascript" src="js/yaml.min.js"></script>
<script>
window.onload=oni;
function oni(){
nativeObject = YAML.load('uri.yaml');
var myDom = document.getElementById("concent");
list = '<ul id="top_column">';
itema = '<div id="bottom_column">';
for (var i in nativeObject) {
list += "<li>"+i+"</li>";
itema += "<ul class='uri'>";
for (var j in nativeObject[i]) {
itema += "<a href='"+nativeObject[i][j][0]+"' target='_blank'><li><img src='./logos/"+nativeObject[i][j][1]+"' />"+j+"</li></a>";
};
itema += "</ul>";
};
list += '</ul>';
myDom.innerHTML = list+itema+'</div>';
var top_column=document.getElementById("top_column").getElementsByTagName("li");
var bottom_column=document.getElementById("bottom_column").getElementsByTagName("ul");
for(var i=0;i<top_column.length;i++){
top_column[i].id=i;
bottom_column[i].style.display="none";
if (i == 0)
{
top_column[i].className="top_column_hover";
bottom_column[i].style.display="block";
}
top_column[i].onmouseover=function(){
tab_content(this.id);
}
}
function tab_content(i){
for(var j=0;j<top_column.length;j++){
top_column[j].className="top_column_not_hover";
bottom_column[j].style.display="none";
}
top_column[i].className="top_column_hover";
bottom_column[i].style.display="block";
}
}
</script>
</html>