您的位置：首页 > 其它

Ajax - 基础教程第八章例子学习一

2007-09-04 14:04 615 查看

这是本人的原创,转载先通知下

这是个综合的例子，作者起名为 Ajax DashBoard。在这个DashBoard 中,主要提供4个版块, 天气预报版块, 股票行情版块, 新闻组件版块, 搜索版块。

现在中用到的工具有Taconite（在sourceforge可以下载到）和dom-drag库（这个js好啊，可以实现页面中的窗口鼠标拖动，简单易用）。

项目所需包主要是axis1.2.1，

包括 axis.jar, axis-ant.jar, commons-discovery.jar, commons-loggin, jaxrpc.jar, log4j.jar, saaj.jar, wsdl4j.jar, 私人加多两个，activation.jar, mail.jar( 这两是j2ee1.4的东西)

jstl 1.1的，

包括 jstl.jar , standard.jar。

其他 jdom.jar， taconite.jar。

JDK1.5。

一。主要页面 ajaxDashboard.jsp

代码清单8-1 ajaxDashboard.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Ajax Dashboard</title>
<script type="text/javascript" src="js/autocomplete.js"></script>
<script type="text/javascript" src="js/dom-drag.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/weatherForecast.js"></script>
<script type="text/javascript" src="js/stockQuote.js"></script>
<script type="text/javascript" src="js/news.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/taconite/taconite-client.js"></script>
<script type="text/javascript" src="js/taconite/taconite-parser.js"></script>
<link type="text/css" rel="stylesheet" title="style" href="../css/styles.css" />

</head>

<body>

<%@ include file="weather/weatherForecast.jsp" %>

<%@ include file="stockQuote/stockQuote.jsp" %>

<%@ include file="news/newsItems.jsp" %>

<%@ include file="search/search.jsp" %>

<script type="text/javascript" src="js/ajaxDashboard.js"></script>

<div style="position:absolute;overflow:auto;display:none;background-color:white"
id="popup">
</div>

</body>

</html>

这个是搜索版块的自动填充的js

<script type="text/javascript" src="js/autocomplete.js"></script>

这个是实现组件鼠标拖动的js
<script type="text/javascript" src="js/dom-drag.js"></script>

这个是公共的js，主要是让个版块的内容显示或隐藏，实现所谓的最大化，最小化
<script type="text/javascript" src="js/common.js"></script>

天气预报版块的js
<script type="text/javascript" src="js/weatherForecast.js"></script>

股票行情版本的js
<script type="text/javascript" src="js/stockQuote.js"></script>

新闻版本的js
<script type="text/javascript" src="js/news.js"></script>

搜索版本的js
<script type="text/javascript" src="js/search.js"></script>

下面两个是taconite的js
<script type="text/javascript" src="js/taconite/taconite-client.js"></script>
<script type="text/javascript" src="js/taconite/taconite-parser.js"></script>

样式表
<link type="text/css" rel="stylesheet" title="style" href="../css/styles.css" />

在body中

<%@ include file="weather/weatherForecast.jsp" %>

<%@ include file="stockQuote/stockQuote.jsp" %>

<%@ include file="news/newsItems.jsp" %>

<%@ include file="search/search.jsp" %>

这include的四个jsp分别是4个版块的jsp页面，把他们各自写在一个页面中便于维护，添加和删除组件。

<script type="text/javascript" src="js/ajaxDashboard.js"></script>

这个是一个在加载页面时必须运行的JS，大部分的代码是实现版块的鼠标拖动功能，还有运行4个版块必须的初始化函数。

代码清单8-1a ajaxDashbord.js

function initDomDrag(handleID, rootID) {
var handle = document.getElementById(handleID);
var root = document.getElementById(rootID);
Drag.init(handle, root);
}

//weather forecast
initDomDrag("handle", "root");

//stock quotes
initDomDrag("stockQuoteHandle", "stockQuoteRoot");

//headline news
initDomDrag("newsItemsHandle", "newsItemsRoot");

//search
initDomDrag("searchHandle", "searchRoot");

//start auto updating
handleZipCodeChange();
startUpdateStockQuoteInterval();
startUpdateNewsItemsInterval();

//set up autocomplete
AutocompleteManager.registerHandler(new AutocompleteHandler("searchTerm"
, "Search", 275, 3));

下一部分是天气预报版块的说明

http://blog.csdn.net/lin49940/archive/2007/09/04/1771841.aspx

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航