我这里先把代码写给大家看看(省略了部分代码):
<!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=gb2312" /> <title>Ajax标签导航实例详解</title> <link href="css/article.css" rel="stylesheet" type="text/css" media="all" /> <script language="javascript" type="text/javascript" src="js/common.js"></script> </head> <body> <div id="container"> <div id="topbar"> <h1><a href="http://www.yaohaixiao.com/" target="_blank" title="海啸的地盘--享受生活,享受每一天!">海啸的地盘--享受生活,享受每一天!</a></h1> <div id="search-bar"> <form name="frmsearch" id="frmsearch" action="" method="post"> <label for="keyword">站内搜索:</label> <select id="topics"> <option value="0">全部主题</option> <option value="1">(X)HTML</option> <option value="2">CSS</option> <option value="3">Javascript</option> <option value="4">XML</option> <option value="5">ASP/ASP.NET</option> </select> <input type="text" name="keyword" id="keyword" value="请输入搜索关键字" maxlength="60" /> <input type="reset" name="btnsearch" id="btnsearch" value="开始搜索" /> </form> </div> </div> <ul id="nav"> <li><a href="#2">ARTICLES</a></li> <li><a href="#2">TOPICS</a></li> <li><a href="#2">ABOUT</a></li> <li><a href="#2">CONTACT</a></li> <li><a href="#2">GESTBOOK</a></li> <li><a href="#2">FEED</a></li> </ul> <h2>Ajax标签导航实例详解</h2> <div id="article-info">作者/程序设计:<a href="yaohaixiaomailto:haixiao_yao@yahoo.com.cn">yaohaixiao</a> 来源:<a href="http://www.yaohaixiao.com" target="_blank">yaohaixiao.com</a> 发布时间:2008年4月28日</div> <h3>代码篇</h3> <p> 之前整理发表了<a href="http://www.yaohaixiao.com/article.asp?id=44" target="_blank">《XMLHTTPRequest的属性和方法简介》</a>,它Ajax要使用的核心的技术之一,现在就来实际运用它。这个Ajax标签导航,是我很久前就写的一个脚本,很实用的(还被很多网站收录了哦),现在拿它来做实例讲解吧!当然个人能力有限,有什么不对的地方还请多包含! </p> <p> 演示地址:<a href="http://www.yaohaixiao.com/code/ajaxtab/index.htm" target="_blank">http://www.yaohaixiao.com/code/ajaxtab/index.htm</a> </p> <p> 效果大家看到了,核心功能有:<br /> 1、将当前选中标签以特殊的样式显示<br /> 2、将异步加载的页面信息显示到指定的DOM节点中 </p> <p> 我们来看看处理脚本的代码吧: </p> <div class="code-title">程序代码:ajaxtab.js</div> <div class="js code" name="code" id="js-code"> <!--<br /> // 判断是否支持ActiveX<br /> var useActiveX=(typeof ActiveXObject != "undefined"); <br /> // 判断是否支持DOM<br /> var useDom=document.implementation && document.implementation.createDocument;<br /> // 判断是否支持XMLHttpRequest对象<br /> var useXmlHttp=(typeof XMLHttpRequest != "undefined");<br /> // XMLHttpRequest对象版本<br /> var ARR_XMLHTTP_VERS = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];<br /> // DOM对象版本 <br /> var ARR_DOM_VERS = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0"]; <br /> /* ===========================================================<br /> * 函数名称:$(i)<br /> * 参数说明:i - 目标节点名称<br /> * 函数功能:获取指定的目标DOM节点<br /> * 返 回 值:返回要搜索的目标DOM节点<br /> * 使用方法:$("frmSearch")<br /> ============================================================ */<br /> function $(i){<br /> if(!document.getElementById)return false;<br /> if(typeof i==="string"){<br /> if(document.getElementById && document.getElementById(i)) {<br /> // W3C DOM<br /> return document.getElementById(i);<br /> }<br /> else if (document.all && document.all(i)) {<br /> // MSIE 4 DOM<br /> return document.all(i);<br /> }<br /> else if (document.layers && document.layers[i]) {<br /> // NN 4 DOM.. note: this won't find nested layers<br /> return document.layers[i];<br /> } <br /> else {<br /> return false;<br /> }<br /> }<br /> else{return i;}<br /> }<br /> //--> </div> <p> id="news" - news就是我们的导航标签的ID;<br /> id="newsCnt" - newsCnt就是我们要写入信息的目标DOM节点;<br /> class="first" - first当前(第一个)标签的样式;<br /> id="news-0" - news-0 通过”-“分开,我们就分别可以得到news(导航标签ID),0(标签[li]在导航标签中的索引值)<br /> <a href="news/news0.htm">网站重构</a> - 超链接<br /> <span></span> - 标签间的分割线<br /> </p> <p> 我罗列的这些东西,相信大家开始看出了些头绪了,呵呵,不过别急!在我们看处理的脚本之前,先让我们来看看导航标签的样式,主要是看看我们对分割线的处理(一点CSS处理的技巧)。 </p> <p> 本来想偷个懒,让大家看我上边说的那篇文章,想想也就是Ctrl+C&Ctrl+V,都贴出来吧!呵呵!!! </p> <p> 不过还没有完,最后要说的就是innerHTML这个特性,这里我们还要感谢微软啊,innerHTML就是它的专利,我们就是用它来改变指定DOM内的HTML字符串的,而不用刷新页面。详细的信息大家还是google一下吧,我也要休息下啊!!喝口茶先!!^-^! </p> <p> 以上讲了这么多,我们最后来看看,我们这个ajax标签导航都用到了那些技术吧: </p> <ol> <li>XHTML</li> <li>CSS</li> <li>Javascript</li> <li>DOM</li> <li>XMLHttpRequest对象</li> <li>innerHTML</li> </ol> <p> 还有XML,我们这个例子没有涉及到。东西虽小,包含的(web前端开发)知识可是都用到了啊,我把我会的点东西都端出来了(要失业了),呵呵! </p> <p> 当然我很喜欢跟大家多交流,以后有时间,我们在来谈谈CSS的HACKS技巧,Javascript DOM编程等等的,今天就收工了,谢谢捧场先!!! </p> </div> <p id="copyright"> Copyright © 2007-2008 <strong><a href="yaohaixiao.comhttp://www.yaohaixiao.com">yaohaixiao.com</a></strong>, All rights reserved. Powered By: <a href="Yaohaixiaomailto:haixiao_yao@yahoo.com.cn">Yaohaixiao</a> </p> </body> </html>
看出来什么没有?(代码是很多,呵呵!)可能大家已经发现,整个页面里基本上都是用户要看的数据,其中只包含了很少(必要)的布局(XHTML)标签(请允许我这么说)。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”,看看我的这个例子做到了没有?
结构清晰--也就是我们常说的,XHTML标签要结构化(语意化)。
出处:蓝色理想
责任编辑:bluehearts
上一页 WEB前端开发经验总结 [1] 下一页 WEB前端开发经验总结 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|