分页显示代码js_第1页
分页显示代码js_第2页
分页显示代码js_第3页
分页显示代码js_第4页
分页显示代码js_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、一个封装了的选项卡效果js<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>井底的蛙</title><script type="text/javascript">/* 选项卡封装 by 井底的

2、蛙 2008-2-4*/opCard = function() this.bind = new Array(); this.index = 0; /默认显示哪个选项卡，从0开始 this.style = new Array(); /"","","" this.overStyle = false; /选项是否有over, out变换样式事件，样式为this.style2 this.overChange = false; /内容是否用over, out直接激活 this.menu = false; /菜单类型 this.nesting =

3、 false,false,"","" /是否嵌套，后面2个参数是指定menu,info的子集深度所用id this.auto = false, 1000; /自动滚动true,2000 this.timerID = null; /自动播放的 this.menutimerID = null; /菜单延时的 this.creat = function(func) var _arrMenu = document.getElementById(this.bind0).getElementsByTagName(this.bind1); var _arrInfo =

4、 document.getElementById(this.bind2).getElementsByTagName(this.bind3); var my = this, i; var argLen = arguments.length; var arrM = new Array(); if(this.nesting0 | this.nesting1) / 有选项卡嵌套 / 过滤出需要的数据 var arrMenu = this.nesting0?getChilds(_arrMenu,this.bind0,2):_arrMenu; var arrInfo = this.nesting1?get

5、Childs(_arrInfo,this.bind2,3):_arrInfo; else var arrMenu = _arrMenu; var arrInfo = _arrInfo; var l = arrMenu.length; if(l!=arrInfo.length)alert("菜单和内容必须拥有相同的数量n如果需要，你可以放一个空的在那占位。") / 修正 if(this.menu)this.auto=false;this.overChange=true; /如果是菜单，则没有自动运行，有over, out直接激活 / 循环添加各个事件等 for(i=0;i&l

6、t;l;i+) arrMenui.cName = arrMenui.className; arrMenui.className = (i!=this.index | this.menu)?getClass(arrMenui,this.style0):getClass(arrMenui,this.style1); /加载样式，菜单的话统一样式 if(arrMenui.getAttribute("skip") / 需要跳过的容器 if(this.overStyle | this.overChange) / 有over, out 改变样式 或者 激活 arrMenui.onmou

7、seover = function()changeTitle(this, 2);autoStop(this, 0); arrMenui.onmouseout = function()changeTitle(this, 0);autoStop(this, 1); arrMenui.onclick = function()if(argLen=1)func() arrInfoi.style.display = "none" continue; if(i!=this.index | this.menu)arrInfoi.style.display="none"

8、/隐藏初始化，菜单的话全部隐藏 arrMenui.index = i; /记录自己激活值序号 arrInfoi.index = i; if(this.overChange) /有鼠标over, out事件 arrMenui.onmouseover = function()changeOption(this);my.menu?changeMenu(1):autoStop(this, 0); arrMenui.onmouseout = function()changeOption(this);my.menu?changeMenu(0):autoStop(this, 1); else /onclic

9、k触发 arrMenui.onclick = function()changeOption(this);autoStop(this, 0);if(argLen=1)func() if(this.overStyle) / 有over, out 改变样式 arrMenui.onmouseover = function()changeTitle(this, 2);autoStop(this, 0); arrMenui.onmouseout = function()changeTitle(this, 0);autoStop(this, 1); else / 没有over, out 改变样式 if(th

10、is.auto0) / 有自动运行 arrMenui.onmouseover = function()autoStop(this, 0); arrMenui.onmouseout = function()autoStop(this, 1); if(this.auto0 | this.menu) /arrinfo 控制自动播放 arrInfoi.onmouseover = function()my.menu?changeMenu(1):autoStop(this, 0); arrInfoi.onmouseout = function()my.menu?changeMenu(0):autoStop

11、(this, 1); /for结束 if(this.auto0) this.timerID = setTimeout(autoMove,this.auto1) / 自动播放 function autoMove() var n; n = my.index + 1; if(n=l)n=0; while(arrMenun.getAttribute("skip") / 需要跳过的容器 n += 1; if(n=l)n=0; changeOption(arrMenun); my.timerID = setTimeout(autoMove,my.auto1); / onmouseove

12、r时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-! function autoStop(obj, num) if(!my.auto0)return; /if(obj.index=my.index) num = 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto1); / 改变选项卡 function changeOption(obj) arrMenumy.index.className = getClass(arrMenumy.index,my.style0); /修改旧

13、内容 arrInfomy.index.style.display = "none" /隐藏旧内容 obj.className = getClass(obj,my.style1); /修改为新样式 arrInfoobj.index.style.display = "" /显示新内容 my.index = obj.index; /更新当前选择的index /* 只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活 obj：目标对象。 num：1为over，0为out */ function changeTit

14、le(obj, num) if(!my.overStyle)return; if(obj.index!=my.index)obj.className = getClass(obj,my.stylenum) /* 菜单类型时用 obj：目标对象。 num：1为over，0为out */ function changeMenu(num) if(!my.menu)return; num=0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID) /关闭菜单 function menuClose() arrInf

15、omy.index.style.display = "none" arrMenumy.index.className = getClass(arrMenumy.index,my.style0); / 得到className（防止将原有样式覆盖） function getClass(o, s) if(o.cName="")return s elsereturn o.cName + " " + s /嵌套情况下得到真正的子集 function getChilds(arrObj, id, num) var depth = 0; var fi

16、rstObj = my.nestingnum=""?arrObj0:document.getElementById(my.nestingnum); /得到第一个子集 do /计算深度 if(firstObj.parentNode.getAttribute("id")=id)breakelsedepth+=1 firstObj = firstObj.parentNode; while(firstObj.tagName.toLowerCase()!="body") / body强制退出。 var t; var arr = new Arra

17、y(); for(i=0;i<arrObj.length;i+) /过滤出需要的数据 t = arrObji, d = 0; do if(t.parentNode.getAttribute("id")=id && d = depth) arr.push(arrObji);break; /得到数据 else if(d=depth)break;d+=1; t = t.parentNode; while(t.tagName.toLowerCase()!="body") / body强制退出 return arr; window.onloa

18、d = function() var aa = new opCard(); aa.bind = "a1","div","b1","div" aa.style = "a1_0","a1_1","a1_0" aa.index = 0; aa.nesting = false,true,"","" aa.creat(); aa =null; / 默认的onclick中，第一个例子 var bba = new opCard()

19、; bba.bind = "a2","li","b2","div" bba.style = "style1","style2","style3" bba.overStyle = true; bba.creat(); bba = null; / 默认的onclick中，第二个例子 var bbb = new opCard(); bbb.bind = "a3","li","b3","div&

20、quot; bbb.style = "style1","style2","style3" bbb.overStyle = true; bbb.creat(); bbb = null; / onmousover触发中的例子 var cc = new opCard(); cc.bind = "a4","li","b4","div" cc.style = "style1","style2","style3&quo

21、t; cc.overStyle = true; cc.overChange = true; cc.creat(); cc = null; /自动播放auto第一个例子 var dd = new opCard(); dd.bind = "a5","li","b5","div" dd.style = "style1","style2","style3" dd.auto = true, 3000; dd.creat(); dd = null; /自动播放auto

22、第二个例子 var ee = new opCard(); ee.bind = "a6","li","b6","div" ee.style = "style1","style2","style3" ee.auto = true, 2000; ee.overChange = true; ee.creat(); ee = null; /自动播放auto第三个例子 var ff = new opCard(); ff.bind = "a7",&q

23、uot;li","b7","div" ff.style = "style1","style2","style3" ff.auto = true, 1000; ff.overChange = true; ff.overStyle = true; ff.creat(); ff = null; /菜单导航例子 var gg = new opCard(); gg.bind = "a8","li","b8","div"

24、; gg.style = "style1","style2","style3" gg.overStyle = true; gg.menu = true; gg.creat(); gg = null; /其他应用 var hh = new opCard(); hh.bind = "a9","li","a9","li" hh.style = "style4","style4","style4" /hh

25、.overStyle = true; hh.auto = true, 1000; hh.creat(); hh = null;</script><style type="text/css">bodyfont-size:12px; font-family:Verdana,"宋体"p,ulmargin:0px; padding:0px;td,divfont-size:12px.a1_0 border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3p

26、x; padding:2px 0px; cursor:pointer;.a1_1 border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;.testtext-decoration:underline;#b1 div.sborder:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;#b1 div.s strongcolor:#00

27、66FF;/* */.style1float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;.style2float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-ty

28、pe:none; cursor:pointer;.style3float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;#a2,#a3,#a4,#a5,#a6,#a7,#a8 height:22px;#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 divborder:1px solid #FF9900; height

29、:100px; width:400px; padding:5px; overflow-y:auto;#b8 divborder:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;#b8 div amargin-right:20px;.style4float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;</style></head><bo

30、dy><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="a1" width="140" valign="top" align="center"> <div class="test">简单介绍</div> <div class="tes

31、t">默认的onclick</div> <div class="test">onmousover触发</div> <div class="test">自动播放auto</div> <div class="test">菜单导航</div> <div class="test">关于嵌套</div> <div class="test">其他应用</div>

32、 <div class="test">一些说明</div> <div class="test">&nbsp;</div> <div class="test">&nbsp;</div> <div class="test">&nbsp;</div> <div class="test">&nbsp;</div> </td> <td i

33、d="b1" valign="top"> <div class="s"> 封装了一个选项卡，不过已经不像选项卡了-_-!<br><br> 现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些<br><br> <p> <strong>obj.bind = "a1","td","b1","div"</strong><br> 绑定id=

34、"a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？<br> td标签的数量和div标签的数量必须相同<br> （若不需要显示内容，只显示菜单话，可以这个在td标签上加&lt;td skip="true"&gt;）<br> 如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting<br><br> <strong>obj.nesting = false,tr

35、ue,"",""</strong><br> 当标签tag有嵌套时，需要用到这个<br> 比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到<br> 菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了<br> 判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断<br> 但有些情况下，这样还是不行<br> 我用后面2个参数做id来指定菜单或者内容的

36、第一项nesting = false,true,"","q2"<br> 这样就肯定不会错了（不明白的话看下例子就简单多了）<br><br> <strong>obj.index = 0;</strong><br> 默认显示第几个选项卡，序号从0开始<br><br> <strong>obj.style = "c1","c2","c3"</strong><br> 菜单加载

37、的样式的className：<br> 菜单未选中的className是c1<br> 菜单选中的className是c2<br> 菜单onmouseover的className是c3<br><br> <strong>obj.overStyle = false;</strong><br> 选项卡是否有onmouseover, onmouseout变换样式事件非激活选项卡内容，对应的样式为style2<br><br> <strong>obj.overChange = f

38、alse;</strong><br> 选项卡内容是否用onmouseover, onmouseout直接激活<br><br> <strong>obj.menu = false;</strong><br> 选项卡是菜单类型<br><br> <strong>obj.auto = false, 1000;</strong><br> 选项卡是否自动播放，播放速度（毫秒）<br><br> <strong>obj.creat()

39、;</strong><br> 开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名)<br> 所有的都会触发 </p> </div> <div class="s"> <!-默认的onclick中，第一个例子-> <div id="a2"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li&

40、gt; </ul> </div> <div id="b2"> <div>这个例子是用onclick触发的<br>并设置overStyle = true;<br>(over，out改变样式,但不激活)</div> <div> var bba = new opCard();<br> bba.bind = "a2","li","b2","div"<br> bba.style = &q

41、uot;style1","style2","style1"<br> bba.overStyle = true;<br> bba.creat();<br> bba = null; </div> <div>33333</div> <div>4444444</div> </div><br> <!-默认的onclick中，第二个例子-> <div id="a3"> <ul> &l

42、t;li>1</li> <li>2</li> <li>3</li> <li skip="true">4</li> </ul> </div> <div id="b3"> <div> 这个例子是比上面增加skip="true"<br>即&lt;li skip="true"&gt;4&lt;/li&gt;<br>所以选项卡4是没有

43、内容的<br> 你可以为选项卡的文字直接加上链接，我这里就不加了 </div> <div>222222</div> <div>33333</div> <div>4444444</div> </div> </div> <div class="s"> <!-onmousover触发中的例子-> <div id="a4"> <ul> <li>1</li> <li&g

44、t;2</li> <li skip="true">3</li> <li>4</li> </ul> </div> <div id="b4"> <div>这个例子是用onmouseover触发的<br>(over，out直接激活)<br>并且&lt;li skip="true"&gt;3&lt;/li&gt;选项卡3不会被激活<br>overStyle = true

45、;</div> <div> var cc = new opCard();<br> cc.bind = "a4","li","b4","div"<br> cc.style = "style1","style2","style1"<br> cc.overStyle = true;<br> cc.overChange = true;<br> cc.creat();<br&g

46、t; cc = null; </div> <div>33333</div> <div>4444444</div> </div> </div> <div class="s"> <!-自动播放auto第一个例子-> <div id="a5"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li&g

47、t; </ul> </div> <div id="b5"> <div>1111111<br>我每3秒切换一个选项卡</div> <div> var ee = new opCard();<br> ee.bind = "a6","li","b6","div"<br> ee.style = "style1","style2","style1&qu

48、ot;<br> ee.auto = true, 2000;<br> ee.overChange = true;<br> ee.creat();<br> ee = null; </div> <div>33333<br>我每3秒切换一个选项卡</div> <div>4444444<br>我每3秒切换一个选项卡</div> </div> <div>注：<strong>鼠标在选项卡任意位置都会使停止播放</strong>&l

49、t;br><br>下面这个结合overChange一起</div> <!-自动播放auto第二个例子-> <div id="a6"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="b6"> <div>1111111<br>我每2秒切换一个选项

50、卡</div> <div> var dd = new opCard();<br> dd.bind = "a5","li","b5","div"<br> dd.style = "style1","style2","style1"<br> dd.auto = true, 3000;<br> dd.creat();<br> dd = null;<br> </di

51、v> <div>33333<br>我每2秒切换一个选项卡</div> <div>4444444<br>我每2秒切换一个选项卡</div> </div> <div><br>下面这个再来个&lt;li skip="true"&gt;3&lt;/li&gt;，且overStyle=true;</div> <!-自动播放auto第三个例子-> <div id="a7"> <ul

52、> <li>1</li> <li>2</li> <li skip="true">3</li> <li>4</li> </ul> </div> <div id="b7"> <div>1111111<br>我每1秒切换一个选项卡</div> <div> var ff = new opCard();<br> ff.bind = "a7","li","b7","div"<br> ff.style = "style1","style2","style1"<br> ff.auto = true, 1000;<br> ff.overChange = true;<br> ff

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论