124 lines
4.3 KiB
HTML
124 lines
4.3 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<title>小令童鞋</title>
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
<link rel="shortcut icon" href="/favicon.ico" />
|
|
<script type="text/javascript" src="js/tabs.js"></script>
|
|
<!-- Cufon START -->
|
|
<script type="text/javascript" src="js/cufon-yui.js"></script>
|
|
<script src="js/Candy_Script_400.font.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
Cufon.replace('.logo', { fontFamily: 'Candy Script' });
|
|
Cufon.replace('H2', { fontFamily: 'Candy Script' });
|
|
Cufon.replace('H3', { fontFamily: 'Candy Script' });
|
|
</script>
|
|
<!-- Cufon END -->
|
|
|
|
</head>
|
|
<body>
|
|
<div id="main_container">
|
|
<div class="header">
|
|
<div class="logo">ZeekLing, a boring person, but has a dream!</div>
|
|
</div>
|
|
|
|
<div class="book">
|
|
<div class="book_top">
|
|
<div id="demo" class="demolayout">
|
|
<div class="left_content">
|
|
<ul id="demo-nav" class="demolayout">
|
|
<li><a class="active" href="#tab1">Navigation</a></li>
|
|
<li><a class="" href="#tab2">Skills</a></li>
|
|
<li><a class="" href="#tab3">About Me</a></li>
|
|
<li><a class="" href="#tab4">Links</a></li>
|
|
</ul>
|
|
<div class="photo">
|
|
<img src="images/frame.png" alt="" title="" border="0" class="frame"/>
|
|
<img src="images/boy.png" alt="" title="" border="0" class="picture" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tabs-container">
|
|
<div style="display: none;" class="tab" id="tab1">
|
|
<h2>Navigation</h2>
|
|
<div id="navigation"></div>
|
|
<h3>Server</h3>
|
|
<ul class="list" id="server"></ul>
|
|
<h3>Books</h3>
|
|
<ul class="list" id="book"></ul>
|
|
</div>
|
|
|
|
<div style="display: none;" class="tab" id="tab2">
|
|
<h2>Skills</h2>
|
|
<ul class="list" id="skills" ></ul>
|
|
</div>
|
|
|
|
<div style="display: block;" class="tab" id="tab3">
|
|
<h2>About Me</h2>
|
|
<div id="about"></div>
|
|
<h3>Motto</h3>
|
|
|
|
<ul class="list" id="motto"></ul>
|
|
|
|
<h3>Contact</h3>
|
|
<ul class="list" id="info"></ul>
|
|
</div>
|
|
|
|
<div style="display: none;" class="tab" id="tab4">
|
|
<h2>About Links</h2>
|
|
<ul class="list" id="aboutLinks"></ul>
|
|
<h2>Links</h2>
|
|
<ul class="list" id="links"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript" src="lib/jquery.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$("#navigation").load("json/navigation.json");
|
|
$("#about").load("json/about.json");
|
|
getContent("json/server.json","#server","al");
|
|
getContent("json/books.json","#book","al");
|
|
getContent("json/link.json","#links", "al");
|
|
getContent("json/info.json","#info", "li");
|
|
getContent("json/skills.json","#skills", "li");
|
|
getContent("json/motto.json","#motto", "");
|
|
getContent("json/aboutLinks.json","#aboutLinks", "");
|
|
})
|
|
|
|
function getContent(url, name,type){
|
|
$.ajax({
|
|
url:url,
|
|
type: "GET",
|
|
success: function(result){
|
|
var data = eval(result);
|
|
var htmlStr = "";
|
|
$.each(data, function(index, value){
|
|
if ("al" == type){
|
|
htmlStr = htmlStr + "<li><a href=\"" + value.url + "\" + target=\"_blank\">" + value.name + "</a>:" + value.des + "</li>\n"
|
|
}else if ("li" == type){
|
|
htmlStr = htmlStr + "<li>" + value.name + ":" + value.value + "</li>\n"
|
|
}else{
|
|
htmlStr = htmlStr + "<li>" + value + "</li>\n"
|
|
}
|
|
|
|
});
|
|
$(name).html(htmlStr);
|
|
}
|
|
});
|
|
|
|
}
|
|
var tabber1 = new Yetii({id: 'demo'});
|
|
</script>
|
|
</body>
|
|
</html>
|