📄 ajax-dynamic-content.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ajax dynamic content</title>
<style type="text/css">
/* This css is only needed for the demo */
body{
margin:10px;
font-size:0.9em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
text-align:center;
background-color:#E2EBED;
height:100%;
}
a{
color:#F00;
}
#mainContainer{
width:760px;
margin:0 auto;
text-align:left;
background-color:#FFF;
height:100%;
padding-bottom:10px;
}
#mainContainer .news{
margin:5px;
border:1px dotted #555;
background-color:#EEE;
padding:10px;
}
#mainContainer img{
float:left;
margin:2px;
}
div#header{
border:0px;
background-color:#FFF;
padding:0px;
margin:0px;
height:100px;
}
h2{
font-size:1.3em;
margin-bottom:5px;
}
p{
margin-top:0px;
}
.clear{
clear:both;
}
h2{
color:#000;
}
#news2{
height:150px;
}
.header{
padding-left:5px;
font-weight:bold;
}
</style>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
</head>
<body>
<div id="mainContainer">
<p class="header">The content of the three boxes below are loaded by Ajax(Asyncron Javascript And XML) from external files.</p>
<div class="news" id="news1"><!-- Empty div for dynamic content -->Loading news. please wait...</div>
<div class="news" id="news2"><!-- Empty div for dynamic content -->Loading news. please wait...</div>
<div class="news" id="news3"><!-- Empty div for dynamic content -->Loading news. please wait...</div>
</div>
<script type="text/javascript">
ajax_loadContent('news1','external/externalfile1.html');
ajax_loadContent('news2','external/externalfile2.html');
ajax_loadContent('news3','external/externalfile3.html');
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -