如何在动态页面加载中创建默认视图？ [英] How to Make Default view in dynamic page loading?
本文介绍了如何在动态页面加载中创建默认视图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我漫无目的地搜索时发现了这段代码...
I found this code when googling aimlessly...
<!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=iso-8859-1" />
<title>Demo: Ajax and Prototype: Display multiple pages without refreshing</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
// <![CDATA[
document.observe('dom:loaded', function () {
var newsCat = document.getElementsByClassName('newsCat');
for (var i = 0; i < newsCat.length; i++) {
$(newsCat[i].id).onclick = function () {
getCatPage(this.id);
}
}
});
function getCatPage(id) {
var url = 'load-content.php';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
$('newsContent').style.display = 'none';
$('newsLoading').style.display = 'block';
}
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
$('newsLoading').style.display = 'none';
$('newsContent').style.display = 'block';
$('newsContent').innerHTML = newData;
}
// ]]>
</script>
<style type="text/css" media="screen">
<!--
body {
font: 1em Verdana, Arial, Helvetica, sans-serif;
}
#tagLine {
color: #d39819;
margin: 0 0 15px 0;
font-style: italic;
font-size: 1.05em;
font-family: georgia, arial, helvetica;
}
#credits {
font: normal 66% verdana, helvetica, arial;
padding: 0.5em 0;
margin: 2em 0;
border-top: 1px dotted #c0c0c0;
border-bottom: 1px dotted #c0c0c0;
}
h1 {
font: normal 2em georgia, arial, helvetica;
margin: 0;
padding: 0;
color: #D35619;
}
h2 {
font: normal 1.5em georgia, arial, helvetica;
margin: 0;
padding: 0;
color: #CCCC66;
}
h3 {
font-weight: normal;
text-align:center;
}
#newsContainer {
background-color:white;
width: 500px;
height: 300px;
margin: 0 auto; /* we center our container div */
border: 1px solid #99CC00;
padding: 7px;
}
#newsCategoriesContainer {
float: left;
height: 300px;
background-color: #fafafa;
margin-right:10px;
}
#newsCategoriesContainer .newsCat{
margin: 10px;
padding: 4px;
text-align:center;
display: block;
cursor:pointer;
border:1px solid #ccc;
width: 100px;
}
#newsCategoriesContainer .newsCat:hover{
background-color:#FFFFCC;
}
#newsContent {
padding: 10px;
}
#newsLoading {
margin-top: 10px;
text-align:center;
display:none;
}
-->
</style>
</head>
<body>
<h1>Demo: AJAX with Prototype: Display multiple pages without refreshing</h1>
<div id="tagLine">a fresh how-to guide featuring the powerful Javascript framework named Prototype</div>
<div id="credits">Author: <a href="mailto:nikolaas [[AT]] torn [[DOT]] be" title="The author of this article is Nikolaas De Geyndt">Nikolaas De Geyndt</a>
| This demo appeared on tutorial: <a href="http://webdesign.torn.be/tutorials/javascript/prototype/page-loading/" title="This article appeared on http://webdesign.torn.be/tutorials/javascript/prototype/page-loading/">http://webdesign.torn.be/tutorials/javascript/prototype/page-loading/</a></div>
<br />
<h3>The News Today</h3>
<div id="newsContainer">
<div id="newsCategoriesContainer">
<div class="newsCat" id="newsCat1">Politics</div>
<div class="newsCat" id="newsCat2">Sports</div>
<div class="newsCat" id="newsCat3">Lifestyle</div>
</div>
<div id="newsLoading">Loading <img src="loading_indicator.gif" title="Loading..." alt="Loading..." border="0" /></div>
<div id="newsContent"></div>
</div>
</body>
</html>
此代码的结果如下图所示 ht tp：//s24.postimg.org/rlelu0wfp/dynamic_page.png [ ^ ]
问题是如何制作政治新闻，例如默认情况下不点击按钮？我试着一遍又一遍地思考，仍然没有找到解决这个问题的方法。
请有人告诉我逻辑......
This code will result like this pic http://s24.postimg.org/rlelu0wfp/dynamic_page.png[^]
The question is how to make a Politics News for example show by default without click the button?? I try to think over and over and still doesn't figuring out a way or another to solve this.
Please anyone show me the logic...
推荐答案
（newsCat [i] .id）.onclick = function（）{
getCatPage（this.id）;
}
}
}）;
函数getCatPage（id）{
var url ='load-content.php';
var rand = Math.random（9999）;
var pars ='id ='+ id +'& rand ='+ rand;
var myAjax = new Ajax.Request（url，{method：'get'，parameters：pars，onLoading：showLoad，onComplete：showResponse}）;
}
function showLoad（）{
(newsCat[i].id).onclick = function () { getCatPage(this.id); } } }); function getCatPage(id) { var url = 'load-content.php'; var rand = Math.random(9999); var pars = 'id=' + id + '&rand=' + rand; var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} ); } function showLoad () {
（'newsContent'）。style.display ='none';
('newsContent').style.display = 'none';
（'newsLoading'）。style.display ='block';
}
函数showResponse（originalRequest）{
var newData = originalRequest.responseText;
('newsLoading').style.display = 'block'; } function showResponse (originalRequest) { var newData = originalRequest.responseText;
这篇关于如何在动态页面加载中创建默认视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![ht tp：//s24.postimg.org/rlelu0wfp/dynamic_page.png](\"http://s24.postimg.org/rlelu0wfp/dynamic_page.png\"){kind=link}