ajaxtabs.js文件
//
A 标签 href 属性将保持原有HTML功能。增加urn属性为AJAX Load 路径。
var
Browser
=
new
Object();
Browser.isMozilla
=
(
typeof
document.implementation
!=
'
undefined
'
)
&&
(
typeof
document.implementation.createDocument
!=
'
undefined
'
)
&&
(
typeof
HTMLDocument
!=
'
undefined
'
);
Browser.isIE
=
window.ActiveXObject
?
true
:
false
;
Browser.isFirefox
=
(navigator.userAgent.toLowerCase().indexOf(
"
firefox
"
)
!=-
1
);
Browser.isOpera
=
(navigator.userAgent.toLowerCase().indexOf(
"
opera
"
)
!=-
1
);
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
if
(Browser.isFirefox) ...
...
{ // entend Event Mod for FireFox
extendEventObject();
}
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
function
extendEventObject() ...
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
Event.prototype.__defineGetter__("srcElement", function () ......{
var node = this.target;
while (node.nodeType != 1) node = node.parentNode;
return node;
});
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
Event.prototype.__defineGetter__("fromElement", function () ......{
var node;
if (this.type == "mouseover")
node = this.relatedTarget;
else if (this.type == "mouseout")
node = this.target;
if (!node) return;
while (node.nodeType != 1) node = node.parentNode;
return node;
});
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
Event.prototype.__defineGetter__("toElement", function () ......{
var node;
if (this.type == "mouseout")
node = this.relatedTarget;
else if (this.type == "mouseover")
node = this.target;
if (!node) return;
while (node.nodeType != 1) node = node.parentNode;
return node;
});
}
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
function
IsChild(cNode,pNode)...
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
while(cNode!=null)......{
cNode=cNode.parentNode;
if(cNode==pNode) return true;
}
return false;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
var
ajccache
=
new
Object();
var
waitInterval;
var
tempref;
var
MouseDelayTime
=
150
;
//
鼠标感应延迟300毫秒
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
function
getTBprefixName(str,sta)...
...
{
if(str.indexOf("active")!=-1 || str.indexOf("normal")!=-1) str=str.substr(6);
else if(str.indexOf("over")!=-1) str=str.substr(4);
else str="";
return sta+str;
}
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
function
startajaxtabs()...
...
{
for(var i=0;i<arguments.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
......{
var ulobj=document.getElementById(arguments[i]);
ulist=ulobj.getElementsByTagName("li");
for(var j=0;j<ulist.length;j++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
......{
var thelist=ulist[j];
if(thelist.parentNode.parentNode!=ulobj) continue;//只有第一层li有效 fixed 2006.9.29
var ulistlink=thelist.getElementsByTagName("a")[0];
var ulistlinkurl=ulistlink.getAttribute("urn");
var ulistlinktarget=ulistlink.getAttribute("rel");
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
thelist.setActive=function(bactive)......{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(bactive)......{
this.status="active";
this.className=getTBprefixName(this.className,"active");
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else......{
this.status="normal";
this.className=getTBprefixName(this.className,"normal");
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
thelist.LoadTab=function()......{
this.setActive(true);
this.parentNode.parentNode.activetab.setActive(false);
this.parentNode.parentNode.activetab=this;
var ulistlink=this.getElementsByTagName("a")[0];
loadAJAXTab(ulistlink.getAttribute("urn"),ulistlink.getAttribute("rel"));
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
thelist.onmouseover=function(aEvent)......{
var myEvent = window.event ? window.event : aEvent;
var fm=myEvent.fromElement;
if(IsChild(fm,this) || fm==this) return;//过滤子元素event
if(this.status=="active") return;
tempref=this;
clearTimeout(waitInterval);
waitInterval=window.setTimeout("tempref.LoadTab();",MouseDelayTime);
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
thelist.onmouseout=function(aEvent)......{
var myEvent = window.event ? window.event : aEvent;
var em=myEvent.toElement;
if(IsChild(em,this) || em==this) return; //过滤子元素event
if(this.status=="active") return;
clearTimeout(waitInterval);
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(ulistlinkurl.indexOf("#default")!=-1)......{
thelist.setActive(true);
ulobj.activetab=thelist;
ajccache[ulistlinkurl]=getElement(ulistlinktarget).innerHTML;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else......{
thelist.setActive(false);
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
if(ulobj.activetab==null) ulobj.activetab=ulist[0];
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
function
getXmlhttp()
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
...
{
var http_request;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(window.XMLHttpRequest) ......{
http_request = new XMLHttpRequest();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (http_request.overrideMimeType) ......{
http_request.overrideMimeType("text/xml");
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
else if (window.ActiveXObject) ......{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
try ......{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
} catch (e) ......{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
try ......{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
} catch (e) ......{}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (!http_request) ......{
window.alert("can't create XMLHttpRequest object.");
return null;
}
return http_request;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
function
loadAJAXTab(url,contentid)...
...
{
var ocontent=getElement(contentid);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(ajccache[url]==null) ......{
var xhttp=getXmlhttp();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
xhttp.onreadystatechange=function()......{
if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1))
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
......{
ocontent.innerHTML=xhttp.responseText;
ajccache[url]=ocontent.innerHTML;
}
}
xhttp.open("GET",url,true);
xhttp.send(null);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else......{
ocontent.innerHTML=ajccache[url];
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
window.onerror
=
function
()...
...
{return true}
xxx.aspx文件
a.在head中:
<
SCRIPT
src
="ajaxtabs.js"
type
="text/javascript"
></
SCRIPT
>
b.滚动图片
<
div
id
="demo"
style
="BACKGROUND: #ffffff; OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff"
>
<
table
cellPadding
="0"
align
="left"
border
="0"
cellspace
="0"
>
<
tr
>
<
td
id
=""
vAlign
="middle"
>
<
div
id
="demo1"
valign
="center"
><
asp:datalist
id
="DataList4"
RepeatDirection
="Horizontal"
runat
="server"
width
="100%"
>
<
ItemTemplate
>
<
DIV
class
=menuA
id
='<%#
DataBinder.Eval(Container.DataItem,"id","{0}")%
>
'>
<
UL
>
<
LI
type
="none"
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
a
href
='projectdetail.aspx?id=<%#
DataBinder.Eval(Container.DataItem,"id","{0}")%
>
' urn='product_gc.aspx?id=
<%
...
...# DataBinder.Eval(Container.DataItem,"id","{0}")
%>
' rel=onearea target="_blank">
<
img
src
='<%#
DataBinder.Eval(Container.DataItem,"piclink","{0}")%
>
' width="120" height="80" border=0>
</
a
>
</
LI
>
</
UL
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
SCRIPT
type
="text/javascript"
>
...
...startajaxtabs('<%# DataBinder.Eval(Container.DataItem,"id","{0}")%>')
</
SCRIPT
>
</
ItemTemplate
>
</
asp:datalist
></
div
>
<
DIV
></
DIV
>
</
td
>
<
td
vAlign
="top"
>
<
div
id
="demo2"
><
asp:datalist
id
="DataList5"
RepeatDirection
="Horizontal"
runat
="server"
width
="100%"
>
<
ItemTemplate
>
<
DIV
class
=menuA
id
='<%#
DataBinder.Eval(Container.DataItem,"title","{0}")%
>
'>
<
UL
>
<
LI
type
="none"
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
a
href
='projectdetail.aspx?id=<%#
DataBinder.Eval(Container.DataItem,"id","{0}")%
>
' urn='product_gc.aspx?id=
<%
...
...# DataBinder.Eval(Container.DataItem,"id","{0}")
%>
' rel=onearea target="_blank">
<
img
src
='<%#
DataBinder.Eval(Container.DataItem,"piclink","{0}")%
>
' width="120" height="80" border=0>
</
a
>
</
LI
>
</
UL
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
SCRIPT
type
="text/javascript"
>
...
...startajaxtabs('<%# DataBinder.Eval(Container.DataItem,"title","{0}")%>')
</
SCRIPT
>
</
ItemTemplate
>
</
asp:datalist
></
div
>
</
td
>
</
tr
>
</
table
>
</
div
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
script
>
...
...
var speed=30
//demo2.innerHTML=demo1.innerHTML
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function Marquee()......{
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
else......{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
demo.onmouseover=function() ......{clearInterval(MyMar)}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
demo.onmouseout=function() ......{MyMar=setInterval(Marquee,speed)}
</
script
>
c.鼠标经过时内容变换区的层位置
<
DIV id
=
"
onearea
"
>
<
table width
=
"
275
"
border
=
"
0
"
align
=
"
center
"
cellPadding
=
"
5
"
cellSpacing
=
"
0
"
>
<
tr
>
<
td id
=
"
TDtitle
"
align
=
"
center
"
height
=
"
27
"
runat
=
"
server
"
>&
nbsp;
</
td
>
</
tr
>
<
tr
>
<
td id
=
"
TDdetail
"
vAlign
=
"
top
"
align
=
"
left
"
height
=
"
80
"
runat
=
"
server
"
>&
nbsp;
</
td
>
</
tr
>
<
tr
>
<
td align
=
"
right
"
height
=
"
20
"
><
asp:hyperlink id
=
"
HyperLink1
"
runat
=
"
server
"
Target
=
"
_blank
"
>
更多
>></
asp:hyperlink
>&
nbsp;
</
td
>
</
tr
>
</
table
>
</
DIV
>
d.produc_gc.aspx文件是放置变化的内容